StyleBop

Your CSS, laid out visually

Plataforma

Mac

macOS

null o posterior

Tamaño

22.2 MB

Versión

2.0.3

Idiomas

español, alemán, chino... (11)

Visión general

StyleBop is a visual workspace for your CSS. Every ruleset becomes a draggable node on a canvas, so you can see how your stylesheet actually connects instead of scrolling a wall of text. Edit custom properties, keyframe animations, media queries, and grid layouts with real visual editors, then drop back into code whenever you need to.

Browse stylesheets as node diagrams
Edit CSS variables in one place
Build @keyframes animations visually
Visualize grid & media query layouts

Características de StyleBop

Rulesets Canvas

Every ruleset in your stylesheet becomes a draggable node on a canvas, with descendant selectors auto-indented beneath their parents. Instead of scrolling through hundreds of lines trying to hold the structure in your head, you can see it — move things around, spot the relationships, and work with your CSS the way it actually behaves.

Tokens Panel

Every custom property your stylesheet defines, grouped by the ruleset it lives in, with live color swatches next to anything color-related. Change a value and it updates everywhere it's used. No more hunting through the file for every --brand-primary reference — they're all in one place, ready to edit.

Animations tab

See every @keyframes block as an editable visual sequence, with each step laid out so you can adjust timing and values without counting percentages in your head. Jump straight to every selector that uses a given animation. Building and tweaking keyframes stops feeling like archaeology.

Media Queries, Visualized

Wrap any ruleset in a responsive variant with one click and see exactly which rules apply at which breakpoints. No more mentally toggling between screen sizes to figure out what overrides what. The responsive layer of your stylesheet finally has a shape you can look at.

Visual Popovers

Click into a box-shadow and get a drag grid. Click border-radius and pull the corners directly. Click a transition timing function and reshape the cubic-bezier curve live. Every property that's hard to write blind gets a popover that makes it tactile — no more iterating through guessed values.

Grid Visualizer

Edit grid-template-columns and grid-template-rows as draggable tracks and watch the layout update as you move them. Defining a grid by staring at repeat(3, 1fr) is fine until it isn't — StyleBop makes it something you can see and adjust without leaving the editor.

Conseguir StyleBop