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.
• File → New Window (⌘⌥N) opens an empty workspace.
• File → Close Project (⌘⇧W) clears the current workspace without closing the window; Close Window (⌘W) closes the window itself.
• 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.

HTML Files

StyleBop opens .html and .htm files alongside .css — handy for small projects that keep their styles inline in a single HTML file. The surrounding markup is left untouched; StyleBop only edits the style declarations inside.

• Embedded <style> blocks. The first <style>…</style> region inside the file is treated as a CSS file: its rulesets appear in the canvas, properties in the property editor, variables in the tokens panel. Edits round-trip back into the same block on save.
• Inline style="…" attributes. Each one shows up as a pseudo-ruleset in the sidebar — labeled div.card, h1#hero, etc. based on the surrounding element. Edits patch only the attribute value; nothing else in the markup moves.
• No <style> block yet? StyleBop synthesizes an injection point just before </head>. The file on disk is left as-is until your first save adds the new block.

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 — press ⌘N, 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.

At-Rules & Comments

StyleBop is structurally aware of the at-rules you actually use day to day:

• @media, @container, @supports, and @layer blocks each get a wrapper row in the property panel and a badge on canvas cards — see Media Queries, Cascade Layers, and Feature Queries.
• @font-face declarations live in the Tokens Panel as a font-family matrix.
• @keyframes blocks drive the Animations Panel.
• The bare @layer a, b, c; priority declaration round-trips as a single canonical line near the top of the file.

Anything else — vendor at-rules, @import, @charset, @namespace, 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.

Tokens Panel

Switch to the Tokens tab (⌘2) to see all CSS custom properties (--name: value) in the file, grouped by the ruleset that defines them. (Internally these are CSS variables — "tokens" is just a friendlier name for the design-system role they usually play.)

• Add a new variable with ⌘⌥K, or use the + in the panel.
• 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.

Animations Panel

Switch to the Animations tab to manage every @keyframes block in the file. Each animation appears as a card with its keyframe steps (e.g. 0%, 50%, to), and each step's properties show up in the Property Editor when selected.

• Add a new animation with ⌘⇧A. A sheet asks for the animation name; the @keyframes block is added to the file with default from / to stops.
• Select a step (e.g. 50%) to edit its declarations in the Property Editor — the same editor used for rulesets.
• Add new keyframe stops with the + button on the animation card; rename a stop by double-clicking the percentage.
• Animations round-trip with the file. Comments and unknown at-rules wrapping a @keyframes are preserved verbatim.
• Use the filter (⌘F) to narrow the list when a file has many animations.

Code Editor

Switch to the Code tab (⌘4) 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.

The Code tab also has its own dedicated text-edit undo stack — ⌘Z / ⌘⇧Z here walk back typing edits without disturbing the file's structural undo history (rename, reorder, color change, etc.). The stack survives leaving and returning to the tab.

Autocompletion

As you type a property name or value, a small popup of context-aware suggestions appears once the partial token is at least two characters long. The list filters as you keep typing.

• Property name context (after { or ;) — every CSS property StyleBop knows about, plus every --var declared in the current file.
• Value context (after :) — common values for the property under the cursor, plus var(--token) wrappers for matching custom properties.
• Selector context (outside any block) — selector hints like :root, :hover, ::before, etc.

Smart Typing

The Code tab also handles the small mechanical edits a CSS author would otherwise repeat constantly:

• Brace pairing — typing { inserts { | } with the cursor between two spaces (so .foo { color: red; } reads naturally). Pressing ⏎ while between the spaces consumes them and expands to a multi-line block: {, an inner-indented blank line, and } back at the original indent.
• Paren / bracket / quote pairing — same pattern, no inner spaces. Quote pairing skips when the cursor is inside a word (so apostrophes in CSS strings still work).
• Wrap selection — typing an opener while text is selected wraps it (select foo, type (, get (foo)).
• Skip-over closing — typing } / ) / ] / " when one is already in front of the cursor advances past it instead of inserting another.
• Auto-indent on Return — copies the previous line's leading whitespace; an extra step in after {.

All of these are skipped on multi-character paste, so dropping a snippet into the file works as expected.

Filtering / search

Press ⌘F at any time to focus the filter field. The label adapts to the current tab — Filter Rulesets, Filter Tokens, or Filter Animations — and matches against names and selectors as you type.

Adding Properties

Press ⌘K, click + 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. The set is property-aware — only relevant pickers show up:

• Color picker — color properties (e.g. color, background-color) and all custom properties (--*).
• Flex visualizer — flex-related properties (e.g. flex-direction, justify-content, align-items).
• Box-shadow editor — box-shadow, text-shadow.
• Border-radius corners — border-radius.
• Filter chain — filter, backdrop-filter.
• Gradient & image builder — background, background-image.
• Grid visualizer — grid-template-columns, grid-template-rows.
• Cubic-bezier curve — easing properties (e.g. transition-timing-function, animation-timing-function).
• Variable picker — 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.

Border Radius Editor

For border-radius, the dashed-square button opens a popover that lets you edit each corner independently with drag handles or paired numeric inputs.

• Live preview — a filled shape with the current radii applied. The four handles sit on the outline.
• Drag a corner — pull a handle inward to grow that corner's radius. Dragging past the corner clamps at zero (no climbing back up via mouse direction).
• Numeric grid — TL / TR / BL / BR fields arranged in a 2×2 grid that mirrors the visual position. Whole pixels only.
• Link all corners — toggle to keep every corner in lockstep; off lets each corner move independently.

The popover writes the most compact shorthand it can — 10px, 10px 20px, etc. — instead of always emitting four values.

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.

Grid Visualizer

On grid-template-columns and grid-template-rows, the 3×3 grid button opens a popover that edits both axes plus gap together.

• Live preview — accent-colored cells laid out in the resolved grid structure, honoring fr / auto / fixed track sizing and gap values.
• Per-track controls — kind menu (fr / auto / fixed), value field, and a unit menu (px / rem / em / % / vw / vh) for fixed tracks. Drag the handle to reorder; ⌫ to remove.
• Keyboard nudges — ↑ / ↓ step values by 1; ⇧ ×10, ⌥ ×0.1.
• Gap row — separate inputs for column-gap and row-gap; empty values remove the property.

Unrecognized track tokens (minmax(...), repeat(...), named lines) survive verbatim — the popover edits what it can and round-trips the rest.

Gradient & Image Builder

On background and background-image, the layered-rectangle button opens a popover that handles four flavors: linear, radial, conic, and url(...) images.

• Type segmented control — Linear / Radial / Conic / Image. Switching reshuffles the controls below.
• Angle slider (linear / conic) or shape selector (radial — circle / ellipse).
• Color stops — a draggable list with native color wells, hex / CSS color input, percentage position, and a × to remove. Add Stop inserts a new stop in the largest gap with a color blended from its neighbors.
• Image mode — drop an image file onto the swatch, browse via Choose Image…, or paste a URL. The preview shows the loaded image over a transparency checker.
• Layout section — background-size (Auto / Cover / Contain), a 9-cell background-position grid, and background-repeat icon strip (no-repeat / repeat / repeat-x / repeat-y / round / space). CSS-default values remove the property to keep files clean.

Filter Chain

On filter and backdrop-filter, the wand button opens a popover with a live preview swatch and one slider per active filter.

• Live preview — a colorful gradient + white shapes + "Aa" text rendered through the current chain so you can see most effects clearly.
• Filter rows — name + slider (with sane range) + numeric readout + ×. Drop one with the × button to remove it from the chain.
• Add Filter menu — picks an unused function from blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia.
• Clear — reset the chain to none.

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).

Extract to Variable

Right-click any property row in the property panel and choose Extract to Variable… to lift its current value into a CSS custom property. The naming sheet shows the literal value, suggests a sensible default name based on its shape (e.g. --color-3b82f6 for a hex, --space- for a length), and tells you how many occurrences will be rewritten.

On commit, StyleBop:

• Adds --name: value to the file's :root ruleset (creating one at the top of the file if it doesn't already exist).
• Replaces every property in the file whose value exactly matches the literal with var(--name).
• Records the whole operation as a single undo entry titled "Extract to Variable" — one ⌘Z reverses the rewrite end to end.

The menu item is hidden for empty values, mixed-selection rows, and values that are already a var(--…) reference.

Animation & Transition

One popover handles every timing-related property. The cubic-bezier curve sits at the top with draggable handles; below it the controls adapt to the property:

• animation shorthand — animation-name dropdown (lists every @keyframes in the file), duration field, easing menu (preset + Custom), and a live preview of the keyframes running on a target styled with the calling ruleset's other properties (background, border-radius, etc.). Loops with a 1-second beat between cycles.
• transition shorthand — same shape, but the dropdown lists common CSS properties (opacity, transform, color, background-color, …), and the preview ping-pongs the chosen property between the ruleset's base value and a property-specific alternate (fade for opacity, lift for transform, blend for color, etc.).
• transition-timing-function / animation-timing-function — collapses to the curve plot plus a row of preset chips (linear / ease / ease-in / ease-out / ease-in-out). The dot preview still loops so you feel the chosen curve.

Curve handles can drag into the side buffer zones for visual freedom; the emitted CSS clamps x to [0,1] so it stays spec-compliant.

Variable Usage Tracker

Each row in the Tokens tab shows a small badge after the value:

• → N — number of properties across the entire project that reference var(--name). Click the badge to open a popover listing every consumer (file · selector · property: value). Click a consumer to jump to its location in the Code tab of its file.
• unused (orange) — no references anywhere in the project. The popover suggests it's safe to delete or kept around for future use.

Counts are computed live across all loaded files, so renaming or removing a usage updates the badge immediately.

Cascade Layers

The layer row in the property panel (above media) doubles as a priority editor. Click it to open the Cascade Layers modal:

• Layer list — every layer name in the file, derived from @layer a, b, c; declarations and any block-form @layer name { … } wrappers in use.
• Drag to reorder — the list order is the cascade priority. Layers later in the list win regardless of selector specificity.
• Radio-style assignment — click a layer's name to assign the current ruleset to it; click again to unassign.
• Add layer — type a name, hit Add (or just Apply) and it joins the order, auto-selected for the current ruleset.

StyleBop maintains a single canonical @layer a, b, c; declaration near the top of the file (after any @import lines) and keeps it in sync as you edit.

Feature Queries

The supports row wraps the current ruleset in a @supports (...) block. Click to enter or edit the condition — bare features like (display: grid), negations like not (display: grid), and compound forms with and / or.

File Actions

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

External Changes

StyleBop watches the open folder for edits made elsewhere — VS Code or another IDE, git pull, a build script, a teammate's commit. Changes that don't conflict with anything you're doing are folded in silently; the rest get a digest sheet on next focus.

• Clean files (no local unsaved edits) are reloaded from disk automatically. They appear in the digest under Reloaded from disk so you can see what moved.
• Conflicts (you were editing a file that also changed on disk) get per-row Keep mine / Use disk buttons. Pick one per file; the digest dismisses when every conflict is resolved.
• The digest only appears when there's something to report. If nothing in the folder changed while StyleBop was in the background, no sheet shows.

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. The Code tab additionally maintains its own dedicated text-edit stack — typing edits don't fight structural changes (rename, reorder, etc.) in the same history, and that stack survives leaving and returning to the Code tab.

Find & Replace

StyleBop ships two scopes of find:

• Local find — ⌘F on the Code tab opens AppKit's native find bar at the top of the editor. Find + replace + case-sensitivity + regex all work out of the box. On other tabs, ⌘F focuses the canvas filter.
• Project-wide find — ⌘⌥F opens a sheet that searches every loaded file's rendered CSS as you type. Results group by file with one-line previews. Click any match to jump to that file's Code tab and reveal the line. Type a replacement and hit Replace All to run a text-level replacement across every affected file (each file is re-parsed and marked unsaved).

Editor Integrations

Free extensions for VS Code and JetBrains IDEs (IntelliJ, WebStorm, PyCharm, etc.) add an Open in StyleBop command to the right-click menu on any .css, .html, or .htm file — or any folder, to open the whole project. The cursor's line number is forwarded, and StyleBop's smart-router lands on the matching surface (Rulesets canvas, Animations, Tokens, or Fonts) instead of dropping you in the Code tab.

• VS Code — available from the command palette as StyleBop: Open in StyleBop and StyleBop: Open Folder in StyleBop, and as right-click entries on supported files and folders.
• JetBrains — right-click any supported file or folder in the Project view and pick Open in StyleBop. Requires JetBrains 2023.2 or newer.
• HTML files behave the same as in StyleBop itself: the inner <style> block and any inline style="…" attributes are editable as CSS; the surrounding markup is preserved.
• Both extensions launch StyleBop on macOS only. They install fine on Linux / Windows but the launch command is macOS-specific.

Keyboard Shortcuts

Global

View

Canvas

Property Editor

Sidebar

Cheat Sheet

Press ⌘/ any time (or use Help → Cheat Sheet) to open a reference modal listing every keyboard shortcut and canvas gesture in StyleBop, grouped into six sections: Tabs & Navigation, Find & Replace, Editing, Selection, Property Visualizers, and Reveal in Code. It's a copy of the tables above, condensed into one always-available card so you don't have to leave your work to look something up.