Editor.PropertiesPanel

The contextual right-side panel. Reflects the selected section's fields - layout, text, shape, layer.

Editor.PropertiesPanel is the contextual inspector. It auto-discriminates based on the selected section's type and renders the matching field set - position + size for layout, font + color for text, fill + stroke for shape, hide / lock toggles for the layer tab.

Usage

<Editor.Root>
    <Editor.PropertiesPanel />
</Editor.Root>

The panel reads from the editor context - drop it anywhere underneath Editor.Root and it lights up. With no section selected, the empty state suggests "Select a section to edit its properties."

Composition

The default panel renders all four sub-tabs. Mount sub-tabs individually for a flat (un-tabbed) inspector:

<Editor.PropertiesPanel>
    <Editor.PropertiesPanel.Layout />
    <Editor.PropertiesPanel.Text />
    <Editor.PropertiesPanel.Shape />
    <Editor.PropertiesPanel.Layer />
</Editor.PropertiesPanel>

In readOnly mode the inputs render disabled and the layer-action buttons hide.

Examples

Side-by-side with the layer list

<div className="flex flex-col border-l">
    <Editor.LayerList className="border-b" />
    <Editor.PropertiesPanel />
</div>

This is the canonical right-rail composition - outliner on top, contextual props underneath.

API Reference

Prop	Type	Default	Description
children	ReactNode	-	Optional children. When provided, the panel renders them as the body useful for custom compositions that swap sub-sections or add their own fields. When omitted, the panel falls back to the bundled default arrangement: `LayoutSection`, type-specific section (Text / Shape), then `LayerSection`. An empty selection always renders the EmptyState regardless of children.
className	string \| undefined	-	-

LayerList - outliner that pairs with the panel
Section - the source of the selection