Documentation

StyleBop is a visual CSS editor for Mac. Open a folder of stylesheets and browse them as interactive node diagrams — edit properties, colors, and variables without touching the code editor unless you want to.

Installation

Download the DMG from the StyleBop page, open it, and drag StyleBop.app into your Applications folder. Then double-click to launch. macOS 14 or later is required. Apple Silicon only.

Opening a Project

StyleBop works with folders — it reads every .css file in the folder you open, recursively, and renders the folder hierarchy in the sidebar.

• Choose File → Open Folder… (⌘O) or click the folder icon at the bottom of the sidebar.
• The included Sample Project folder (bundled with the DMG) is a good starting point.
• Click any file in the sidebar to load it. The canvas, property editor, variables panel, and code editor all update immediately.
• File → Open Recent lists the last few folders you worked in.
• Opening a second folder while one is already open creates a new window so each project has its own workspace.
• StyleBop remembers every open window when you quit and restores them on next launch.
• The sidebar stays in sync with the filesystem — files and folders added, renamed, or removed in Finder appear (or disappear) automatically.

Sidebar

The sidebar shows the folder you opened as a tree: subfolders are expandable rows, CSS files are leaves. Each file row shows the filename, a count of rulesets, and the number of CSS variables (--custom-properties) defined in the file. A dot appears when a file has unsaved changes.

Folders

Click the disclosure triangle to expand or collapse a folder. The + button at the bottom of the sidebar offers both New CSS File and New Folder; each is created inside the currently-selected file's folder, or at the project root if no file is selected.

Right-click a folder to access: New CSS File Here, New Folder Here, Rename…, Show in Finder, and Delete… (moves the folder and its contents to Trash after confirmation).

Drag and drop

Drag any file or folder onto another folder row to move it inside. Drop onto empty space in the sidebar to move it back to the project root. Folder rows highlight while a drag is hovering over them. Moves use FileManager directly, so unsaved changes, selection, and open state are preserved.

File actions

Right-click any file to access: Duplicate, Rename, Show in Finder, Revert to Saved, and Delete. These are also available in the File menu for the currently selected file.

• Rename — click an already-selected file's name, or choose Rename from the context menu. Press Return to confirm, Escape to cancel. The base name is pre-selected so you don't have to clear the extension first.
• Revert to Saved — restores the file to the last saved version. A confirmation prompt prevents accidental data loss.
• Delete — moves the file to Trash after confirmation.

Rulesets Canvas

The canvas shows every ruleset in the selected file as a draggable node. Descendant selectors (like .card .title) are indented based on their combinator depth, so nesting is visible at a glance.

Selecting nodes

• Single click — selects one node and shows its properties in the Property Editor.
• ⌘-click or ⇧-click — adds or removes a node from the selection. When multiple nodes are selected, only shared properties appear in the Property Editor.
• Click the canvas background to deselect all.

Reordering

Drag any node to a new position. Undo (⌘Z) reverses the move.

Renaming a selector

Double-click a node's selector text to edit it inline. Press Return to confirm.

Creating rulesets

• New ruleset — click the empty space just below the last node on the canvas, or press the + button in the toolbar. A sheet prompts for a selector and an optional media query (with a combo box listing any media queries already in the document).
• Add a related ruleset — hover a node and click the small + icon next to its selector. The new-ruleset sheet opens pre-filled with that selector plus a trailing space, so you can quickly build a descendant selector (e.g. .card → .card .title).
• New rulesets are inserted adjacent to the node you created them from, not appended to the end of the file.

Deleting rulesets

Select one or more nodes and press Delete or Backspace. The deletion is undoable.

Media Queries

StyleBop treats @media blocks as first-class citizens on the canvas, so responsive variants stay visually grouped with the rule they modify.

The media query badge

Any ruleset wrapped in a media query shows a rounded badge on its node with the query text (e.g. max-width: 680px). The parentheses are stripped for readability but preserved on disk.

Hoisting under the base selector

A media-wrapped ruleset is hoisted directly beneath the first non-media ruleset that matches its selector (or its base token for descendants). A .card inside @media (max-width: 680px) appears indented under the unqualified .card — regardless of where it sits in the file. If there's no match, it renders at its natural position in file order with no hoisting.

Wrapping an existing ruleset

Hover a node and click the media wrap icon (next to the + icon). A sheet opens with a combo box listing every media query already used in the document — pick one, or type a new one. Bare feature expressions like max-width: 680px are auto-parenthesized; comma- and and-joined expressions are handled too.

Editing or removing the query

When a media-wrapped ruleset is selected, the Property Editor shows a media row above the CSS properties. Click it to open the same combo box and change the query. Clear the field to unwrap the ruleset entirely.

Creating a responsive variant

Use the related + button on an existing node, then pick a media query in the sheet — you get a second copy of that selector, already wrapped and grouped with the original.

Nested Selectors

StyleBop understands native CSS nesting. If your source file uses nested blocks with & or bare descendant selectors inside another rule, the parser desugars them into flat rulesets so every nested child becomes its own node on the canvas, but the original nesting is restored byte-for-byte when the file is saved.

• Nested children render on the canvas under their parent, indented the same way as descendant selectors.
• Edits made on the canvas, in the property editor, or in the code tab all round-trip — the saved file keeps the same nesting shape as the source.
• Nesting inside @media is preserved too: children are emitted inside the parent's braces, which itself sits inside the @media block.

Unknown At-Rules & Comments

Anything StyleBop doesn't interpret — @font-face, @keyframes, @supports, @layer, @container, vendor at-rules, license headers, inline /* comments */ between declarations — is preserved verbatim through the load → save round trip. You won't lose comments or at-rules by opening a file and saving it.

Property Editor

The panel on the right shows the CSS properties of the selected ruleset(s). Click any property to edit it. The name field has autocomplete for standard CSS property names; the value field has autocomplete for valid values for that property.

Editing existing properties

• Click a property name or value to begin editing.
• Press Tab or Return to commit and move to the next field.
• Press Escape to cancel.
• Use the color swatch, flex button, or variable button on the right of each value row to open the relevant picker.
• While editing a value that contains a number, ↑ and ↓ nudge the number up or down, preserving units. Hold Shift for a ×10 step, Option for a ÷10 step. Hex colors are skipped.

Deleting properties

Select one or more properties with the checkbox on the left (or click the row and use Delete) and press Delete or Backspace.

Variables Panel

Switch to the Variables tab to see all CSS custom properties (--name: value) in the file, grouped by the ruleset that defines them.

• Click a variable's name or value to edit inline.
• While editing a value that contains a number, ↑ and ↓ nudge it up or down with units preserved (Shift ×10, Option ÷10).
• Color swatches show the resolved color — including variables that reference other variables.
• Drag variables to reorder them within a group.
• Collapse groups with the disclosure triangle.

Code Editor

Switch to the Code tab for a full-text view of the CSS file with syntax highlighting and a line-number gutter. Edits here are reflected on the canvas immediately. When you switch back to the canvas, the selected ruleset and variable are preserved and the scroll position adjusts to keep them visible.

Adding Properties

Press + at the bottom of the property list, or press Return when a property is selected (if no field is in edit mode). A new row appears with the name field focused.

1. Type the property name. Autocomplete suggests matching CSS properties.
2. Press Tab to move to the value field.
3. Type a value, or use Tab to cycle through available pickers (see below).
4. Press Return to commit the new property.
5. Press Escape to cancel without saving.

Picker Cycling (Tab)

When adding a new property with the value field empty, Tab and Shift-Tab cycle through whichever pickers are relevant for the current property name:

• Color picker — appears for color properties (e.g. color, background-color) and all custom properties (--*).
• Flex visualizer — appears for flex-related properties (e.g. flex-direction, justify-content, align-items).
• Variable picker — appears when the current file defines custom properties compatible with the current property.

Tab opens the next picker in sequence (cycling back to the first after the last). Shift-Tab goes backwards. Choosing a value from any picker fills the value field and returns focus to the value input, ready for you to press Return to commit.

Color Picker

The color swatch button (colored square) opens a popover with:

• Hex / CSS value field — type any hex code, rgb(), hsl(), named color, or CSS keyword. Press Return to confirm.
• Color palettes — macOS system color lists. Use the chevron buttons to switch palettes.
• Keywords — quick buttons for transparent, inherit, and currentColor.
• Color panel — click the palette icon to open the macOS system color panel for more advanced color selection.

Press Return while the hex field is focused to confirm the value and close the popover.

Shadow Popover

For box-shadow properties, a dedicated popover opens in place of the text field. It writes a valid box-shadow value as you change it, so you never have to memorize the syntax.

• 2D offset grid — drag to set the X and Y offsets visually. The current values are shown numerically as you drag.
• Blur radius — a slider and numeric field. Controls how soft the edge of the shadow is.
• Spread — a slider and numeric field. Positive values expand the shadow; negative values pull it in.
• Color — opens the same color picker used elsewhere, including opacity.
• Inset toggle — switch between drop shadow and inset shadow.

The live preview updates the property value on every change, so the canvas/code editor reflects the shadow in real time. Press Return or click outside the popover to close it.

Flex Visualizer

For flex properties, the button (appears as a grid icon) opens a visual picker showing the effect of each value in context. Click a value to apply it.

Variable Picker

The { } button opens a searchable list of all CSS custom properties defined in the current file that are compatible with the selected CSS property. Typing in the search field filters the list. Click a variable to insert it as var(--name).

File Actions

Files autosave when you switch away from them, or you can save explicitly with ⌘S. Unsaved changes are shown as a dot in the sidebar.

Undo & Redo

Every action in StyleBop is undoable: property edits, renames, reorders, color changes, additions, deletions, and file operations.

• ⌘Z — Undo
• ⌘⇧Z — Redo

Each file has its own undo stack. Switching files preserves your undo history for each file independently.

Keyboard Shortcuts

Global

Canvas

Property Editor

Sidebar