Online Stylus Editor
Shape Stylus markup and styles in a lightweight editor before publishing or validating.
Completions appear as you type; press Ctrl+Space to open the list. Tab expands snippets where available. Find: Ctrl+F (Cmd+F on Mac). Format: toolbar button or Ctrl+Shift+B for supported languages.
Choose editor font size in pixels
Shape Stylus markup and styles in a lightweight editor before publishing or validating.
Useful for small markup or style edits before you validate or minify.
Quick Stylus edits for prototypes, emails, or handoffs before publish/validate.
In Stylus, prefer clear class names and short rule blocks. Group layout, type, and color so future you can find things.
Avoid !important wars in scratch CSS; fix specificity instead. Check contrast before you ship text colors.
Prefer relative units for type where possible, and keep media queries next to the rules they override so reviews stay local.
Minify for production separately. Here, keep styles readable so reviews and teaching demos stay clear.
Stable link for this mode: /code-editor/stylus
Open this Stylus editor, paste or type in the Ace buffer, use find/replace and theme/font controls, then download when ready. Theme choices may stick in local storage on this device—it is not a cloud project.
Editing stays in your browser for normal use (no account required). Do not paste production secrets; save important work to your own repo or encrypted store.
Copy a starter into the editor, rename symbols to match your project, then download. These are teaching/review snippets—not a full app scaffold.
Layout utilities
.stack {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.cluster {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}Theme tokens
:root {
--text: #111827;
--muted: #6b7280;
--border: #d1d5db;
--radius: 8px;
}Focus ring
.btn:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}Common Stylus patterns for variables, control flow, and comments. Adjust style to your team’s formatter before you commit.
Selectors
.card > h2 { font-size: 1.125rem; }
#app [data-active="true"] { outline: 2px solid #2563eb; }Custom properties
:root { --gap: 1rem; }
.panel { padding: var(--gap); }Media queries
@media (max-width: 48rem) {
.sidebar { display: none; }
}Comments
/* block comment */Responsive card grid
.grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.card { padding: 1rem; border: 1px solid #d0d7de; border-radius: 8px; }- Does Stylus run on ConversionTab servers?
- No. Download the file and run it in your usual compiler or runtime. Editing here does not execute Stylus on our servers.
- Is my code uploaded while I type?
- Normal editing stays in the browser. You do not need an account to draft or download.
- Can I change theme and font size?
- Yes—use the toolbar above the editor. Preferences can persist in local storage on this device.
- When should I use an IDE instead?
- Use your IDE for large projects, debugging, secrets, and production builds. This page is for short drafts and reviews.