Layers, order, and editing in place

The row above the list

The verve mark on its left goes back to the homepage. On its right are your library and, once you’re signed in, Share a link and Save, which reads Saved when everything’s stored.

Light or dark

The editor opens dark and switches with the sun or moon at the foot of the rail, or with Switch to the light theme in the command palette. The stage follows the chrome, so the component you’re animating is lit the same way everything around it is — worth reaching for when the thing you’re animating is a light interface. The choice is the same one the rest of the site uses, and it follows you there. A share link doesn’t follow it: those always open dark, because the person opening one never chose.

Document order is paint order

Later in the list paints on top. Drag the grip on a row to change it, or use Bring forward / Send backward in ⌘K. The grip only appears when there’s something to reorder against, since a single component has no z-order.

Children move with their parent

A picked child’s position on the stage comes from the markup it was picked from, so it’s never reordered on its own. Moving a component takes its children with it, and the rail and the canvas stay in agreement.

Double-click drills in

On a pasted component it arms the picker, the way double-clicking a Figma group selects what’s inside it. On text, it lets you edit the text (see below).

Edit text where you can see it

Double-click any text in a pasted component and change it in place. Enter commits, Escape reverts, and it rewrites the component’s source as one undo.

…except where it couldn’t be saved

It’s offered only where an element’s whole content is text. Mixed content, like a sentence with a bold word inside it, has no unambiguous place in the source to write the edit back to, so the edit isn’t offered.

Renaming changes the export

An element’s name becomes its exported component name and its CSS class. Double-click the name in the rail to rename it.

A picked child is found by its position inside its component, plus a fingerprint. If editing the source moves the node, the editor follows it instead of quietly animating whatever now sits at that position, and tells you when it does.