All docs

Toolbar

The settings sidebar — every property panel for the selected node. Lives in packages/sdk/src/chrome/toolbar/.

The settings sidebar — every property panel for the selected node. Lives in packages/sdk/src/chrome/toolbar/.

The structure is static: tabs, sections, accordions render once and never unmount. Only the content inside each section reacts to the selected node via CraftJS hooks (useNode, useEditor). Switching nodes does NOT rebuild the tree — hidden sections return null content but stay at stable key positions.

Key files

Composition

Toolbar (left/right dock)
└── ToolbarWrapper
    ├── TabStrip (InspectorTab — Style / Layout / Animation / Settings)
    │   └── DarkModeToggle (EditModifiersAtom.dark)
    ├── SearchBar (SettingsSearchAtom)
    └── Section content (per active tab)
        └── PropertySection / ToolbarSection
            └── PropertyRenderer / ToolbarItem
                └── BreakpointChip (per-field, silent-when-clean)

The viewport switcher in the canvas header is now the scope picker — switching to MD canvas means writes go to md:. There is no longer a separate breakpoint picker in the tab bar. See responsive-editor.md.

Tabs

The tabs are defined in inspector/properties/sectionDefs.ts. Each property def belongs to a section, each section to a tab.

Search

Triggered by Cmd/Ctrl+F or the search icon. Backed by SettingsSearchAtom + searchProperties() from the registry — fuzzy-matches property labels and section titles, then scrolls to and highlights matches.

Related