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.
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;
}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 code run on ConversionTab servers?
- No. Editing happens in your browser. Download the file and run it in your usual compiler, runtime, or platform.
- Can I change theme and font size?
- Yes. Use the toolbar above the editor; choices persist in local storage for your browser profile.