StyleBop icon

StyleBop

A visual CSS editor for Mac. Browse your stylesheets as node diagrams, edit variables, and write code — all in one place.

Download for Mac See what it does

macOS 14 Sonoma or later · Apple Silicon · Includes sample project

badges.css badge--blue-solid badge--indigo badge--indigo-solid badge--violet badge--violet-solid badge--purple badge--purple-solid badge--pink badge--pink-solid badge--rose badge--rose-solid badge--red { }
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.

◈

Variables Panel

Every CSS custom property, grouped by ruleset. Edit inline, drag to reorder, and see live color swatches with var() resolution.

</>

Code Editor

A full-text view with syntax highlighting and a line-number gutter. Edits round-trip with the canvas so you can switch at any time.

✦

Property Editor

Edit properties with autocomplete, color pickers, and a variable picker. Arrow keys nudge numeric values while preserving units.

@

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 opens a dedicated editor with a 2D offset grid and live preview. Colors get a full picker — no memorizing syntax.

Screenshots

StyleBop screenshot 1
StyleBop screenshot 2
StyleBop screenshot 3
StyleBop screenshot 4

Get StyleBop

Native SwiftUI. Includes a sample project to get started immediately.

Download StyleBop