StyleBop
A visual CSS editor for Mac. Browse your stylesheets as node diagrams, edit variables, and write code — all in one place.
macOS 14 Sonoma or later · Apple Silicon · Includes sample project
What it does
Rulesets Canvas
Every ruleset is a draggable node. Descendant selectors indent automatically, and multi-select lets you edit many rulesets at once.
Tokens Panel
Every CSS custom property in one place, grouped by the ruleset that defines it. Edit inline, drag to reorder, and see live color swatches with var() resolution.
Animations
A dedicated tab for @keyframes. Edit each step's properties visually, jump to anywhere that uses an animation, add new ones with ⌘⇧A.
Media Queries, Visualized
Wrap any ruleset in a media query with one click. Responsive variants hoist under their base selector with a badge.
Visual Popovers
Box-shadow grids, draggable border-radius corners, cubic-bezier curves, and filter slider stacks — each with a live preview that updates the property as you drag.
Grid Visualizer
Edit grid-template-columns and -rows as draggable track lists with fr / auto / fixed kinds, plus a live cell preview that respects gap.
- Property editor that knows CSS. Autocomplete on names and values, an inline color picker, a variable picker scoped to the current file, and arrow-key nudges that preserve units.
- Gradient and image builder. Linear, radial, conic, or
url(...)— same popover. Drag stops to reorder, drop image files onto the swatch, tweakbackground-size/position/repeatfrom the same modal. - Cascade layers. Drag layer names to reorder priority; click to assign the current ruleset.
- Native CSS nesting. Nested blocks with
&or bare descendant selectors desugar to flat nodes on the canvas, then round-trip back into nesting on save. - Code editor with full-text view. Syntax highlighting, line-number gutter, and edits that reflect on the canvas immediately.
- Smart typing in the Code tab. Brace-and-quote pairing, skip-over closers, auto-indent on Return, and a context-aware autocomplete that suggests CSS properties / values /
var(--token)wrappers based on where the cursor is. - Token-driven design-system workflow. Right-click any property value to extract it to a CSS variable — added to
:root, every matching value in the file rewritten tovar(--name)in one undo. Each token row shows a usage badge: cross-file count, or an "unused" warning. - Filter chains, no syntax to memorize.
filterandbackdrop-filteropen a slider stack — blur, brightness, contrast, hue-rotate, saturate, sepia — over a colorful preview swatch. - Structural CSS, structurally edited.
@media,@container,@supports, and@layerall get a wrapper row in the property panel. Click to edit — including the layer priority list with drag-to-reorder. - Featherweight and native. Pure SwiftUI + AppKit. Tiny binary, instant launch, no background services.
Screenshots
Get StyleBop
Native SwiftUI. Includes a sample project to get started immediately.
Support
Questions, bug reports, or feature requests? Email ben.dansby@gmail.com and you’ll get a reply, usually within a day or two.
For how-to documentation, see the StyleBop documentation. For privacy questions, see the privacy policy.