Style Editor

The Style Editor is for the changes you'd rather see than describe: a bit more padding, a heavier weight, a different text color. You click an element in the Preview, adjust it with visual controls, watch the result on the live app, and then save it to your code as a real edit in your own files.

Selecting an element

Open the Style Editor tab (or press Y), then click the element you want in the Preview. ⌘E turns selection on from anywhere in the Workspace. The top of the panel names the element and its component, with Select parent for when you clicked something nested inside what you meant, and View code to jump to where it's defined.

Selecting nested elements

What you click isn't always what you meant: a click can land on the text inside a button rather than the button, or on a card's padding rather than the card. The layers icon at the top left of the Style Editor (Inspect layers) opens the selected element's place in the page as a tree. Hover a layer to highlight it in the Preview, expand a layer to see what's inside it, and click one to select it instead. It's the quickest way to reach an element that's wrapped in others, or hidden under something larger.

What you can change

The Design tab groups the controls into sections:

• Typography: typeface, size, weight, line height, letter spacing, text color, alignment and decoration.
• Style: background.
• Layout: flex or grid flow, width and height, row and column gap, padding and margin.
• Appearance: opacity and corner radius.

The CSS tab shows the same element's styles as CSS, for reading rather than editing.

Where your design system has a token for a value, the color, spacing, font and weight pickers offer your tokens, so an edit uses --color-primary or your spacing scale instead of a hard-coded number. That is what keeps a visual edit consistent with the rest of your app. To change what a token is, rather than which token an element uses, edit it in the Design System panel, and every component that uses it changes with it.

⌘Z and ⌘⇧Z undo and redo while the panel is open.

Saving to code

Edits show up in the Preview straight away, but they aren't in your code yet. A pill at the bottom of the Preview counts your pending changes, with Apply and Discard. Apply writes them to the source files that define the element. When an edit can't be placed with a direct change to a file, Soffi makes it instead.

If you try to leave with edits still pending, Soffi asks whether to apply or discard them first, so nothing is lost by switching layouts or shipping too early.

Sometimes Soffi can't find where an element is defined, for instance when it comes from a CMS. You'll see a message saying so. Selecting a more specific element usually fixes it, or you can describe the change to Soffi.

Several elements at once

Select more than one element, up to ten, and send them to Soffi from the toolbar next to your selection, with a note about what matters. This is the quickest way to ask for one change across several places, like "make these three cards the same height."