Use the selection-aware floating inspector in Focus mode for common design controls, searchable CSS properties, sibling order, visibility and lock state, plus advanced component, class, variable, and accessibility settings.
Where: Canvas → select an element (in Focus mode) — The bar floats above the selection
Key ideas
- Starter pills: Layout, Text, Fill, Border, Effects, Visibility, Transform, Media — each opens a popover mirroring the full section. Only relevant pills show.
- Add property (+): Fuzzy-search any CSS property to add; or “Ask AI” to describe the change.
- Reorder / hide / lock: Move the element among siblings and toggle visibility/lock right from the bar.
Steps
- Switch to Focus mode.
- Select an element — the property bar floats above it.
- Click a pill to edit that group, or “+” to add a property.
- Use the ⋯ overflow for advanced/uncatalogued properties.
What appears in the bar
- Starter pills: Layout, Text, Fill, Border, Effects, Visibility, Transform, and Media.
- +: fuzzy-search known CSS properties, show common properties before typing, or send a plain-language request to AI.
- Directional buttons: reorder within free, row, column, block, or grid layout.
- Eye and Lock: control editor visibility/selection behavior.
- ⋯: uncatalogued properties, component authoring, video Effects, custom fields, Variables/custom CSS, Alignment, Classes, and Accessibility.
Editing a pill value
A pill opens the property-specific editor. Reset removes the local value. When the value comes from var(), Detach replaces it with the currently resolved literal for this element.
Positioning behavior
The bar anchors above or below the selection, freezes while its popover or text editing is active, and hides during canvas pan/zoom.
Tips
- Use variables for shared design decisions and Detach only for intentional exceptions.
- Use the deep customization guide when you need to diagnose missing pills, inherited lock state, or layout-aware reorder behavior.
Troubleshooting
The expected pill is missing
Some pills are selection-specific. Search the property with +; uncommon properties are placed in ⋯ after insertion.
A child cannot be unlocked
Check for a locked ancestor. The child cannot override inherited editor lock state.