The Editor

The editor has three parts: a slim icon rail, a left sidebar, and the iframe preview filling the rest. The sidebar swaps between two views — the page's sections, and the settings for whichever section you've selected — so the preview keeps the whole width either way. Pinned at the top and bottom of the section list are edit entries for the site-wide regions — header above the page sections, footer below — which open the same editor scoped to that region.

The editor workspace — icon rail, section list, and the live iframe preview.

Topbar

The editor topbar.

• Page / Site dropdowns — switch templates of the current site, or jump to a sibling site owned by the same tenant (multi-site / multi-store setups). Locales are handled by the separate locale switcher below.
• Settings (cog) — a slide-over that manages pages and stores without leaving the editor (see below).
• Command palette (magnifier, or ⌘K) — jump to any page, store, or action by name.
• URL pill — shows the live URL of the current page; click-through opens it in a new tab. The home icon on the left toggles "set as homepage."
• Device switcher — desktop / tablet / mobile widths. Mobile and tablet render the preview inside a device frame:

The mobile preview, rendered inside a phone frame — the same draft state, reflowed to a narrow viewport.

The same page at tablet width. Widths come from filamentcraft.editor.devices, so you can point them at your own breakpoints.

• Locale switcher — on multi-locale sites, a dropdown showing every site locale with a translation-status heading ("2 of 3 translated"), an Empty tag on locales with no content yet, an RTL badge on right-to-left locales, and a Copy content from… action that clones another locale's sections into the current one. Switching away with unsaved changes asks for confirmation first. See Localization.
• Sidebar toggle — show or hide the sidebar, keeping the topbar in place.
• Focus mode — collapses both rails to maximize the canvas.
• Save / Publish / Discard — Save writes a draft revision; Publish promotes it to public; Discard rolls back to the published state.
• Autosave toggle — per user per template, on by default; an opt-out is remembered for 30 days. When on, edits are saved to the draft after the filamentcraft.editor.autosave_ms debounce (default 1500 ms).
• Undo / Redo — ring buffer per user per template, 50 steps by default (configurable via filamentcraft.editor.undo_depth), cache-persisted for 8 hours so a refresh doesn't lose it.
• Light / dark editor — the sun/moon toggle at the bottom of the icon rail switches the editor chrome between light and dark, independent of the page being edited. The choice is remembered (same storage Filament's own theme switcher uses).

Adding & arranging sections

• Add-section modal — the rail's add button (or the / shortcut) opens the section catalog. Picking a type inserts it and selects it immediately.
• Preset picker — when a section type ships presets, the modal hands off to a preset picker instead of inserting a blank: one click drops a fully designed variant. Built-in sections ship one preset per family — Modern, Editorial, Bold, Elegant. The same picker can restyle an existing section in place.
• Drag to reorder — grab a row's drag handle in the section rail (SortableJS) to reorder; the preview updates without a reload.

Canvas hover toolbar

Hovering a section in the preview draws an outline and a floating toolbar, so sections can be managed directly on the canvas without the sidebar:

• A name chip plus edit, move up / down, duplicate, hide, and delete buttons.
• Move buttons disable at the first/last position.
• Locked sections (data-fc-section-locked) expose only the name and edit.
• The selected section keeps a persistent outline and toolbar.
• Hidden sections don't render in the canvas — their sidebar row keeps an always-visible "show" toggle as the way back.

Preview link navigation

Storefront links inside the preview are live. Click a product card, a category tile, or a Shop / Cart / Checkout button and the editor jumps to the page that renders it — so you edit the product page by clicking a product, not by hunting for it in the page dropdown. The topbar's page dropdown re-syncs to wherever you land.

Which page a link opens is worked out from the sections a page contains: the page holding a Product Detail section is the product page, a Cart section the cart page, and a Product Listing section covers both the shop and category links. There's nothing to configure — it follows how your pages are actually built. If a store has no page for a link (no cart page, say), the editor tells you instead of navigating.

Product and category links also carry the clicked record, so the destination previews that exact product or collection; with no record — e.g. opening the product page from the page dropdown — it falls back to the first item in the catalog. This is editor-only: on the published site the same links stay ordinary storefront links.

In-editor page & store management

The editor is self-contained: you can create, rename, duplicate, and delete pages — and edit store settings — without ever opening the Pages or Stores resources.

The topbar Settings slide-over — create, edit, duplicate, and delete pages and edit store settings in place.

The topbar's Settings cog opens a slide-over with two groups.

Page — everything scoped to the page you're editing:

• Page settings — edit the current page's name, slug, type, and status. Change the slug and it offers to leave a 301 behind (see SEO).
• SEO — the per-page search and social metadata, with a live SERP preview.
• New page — a modal for the page name, slug (auto-filled from the name), and type, then drops you straight into the new page. Slugs are validated unique per store.
• Duplicate page — copy the page and its content into a new draft.
• Delete page — remove the page. The action refuses to delete a store's last page, reassigns the homepage pointer if you delete the homepage, and redirects you to a sibling page so the editor never lands in an empty state.

Store — everything scoped to the whole site:

• All pages — a list of every page in the store, to jump between them.
• Store settings — a slide-over mirroring the full store form (name, slug, theme, languages, status, domain, subdomain, homepage). Saving flushes the site cache and refreshes the page/locale switchers in place.
• AI & GEO — the AI-crawler policy, llms.txt, and IndexNow toggles.
• Change theme — swap the site's theme.
• New store — create another store, seeded with a starter home page, and open it.

Every action runs through the same tenancy guard as the resources (TenancyResolver + the Site/Template scopes), so an operator can only ever act on stores they own.

Live preview behaviour

• Section-level refresh from the server's draft state — no full reload.
• Debounced settings so typing doesn't fire a round-trip per keystroke.
• Autosave-to-draft after the autosave_ms debounce (default 1500 ms), when the per-user autosave toggle is on.
• Undo / redo with a ring buffer (undo_depth, default 50 steps).

See Live Preview for how setting changes patch the iframe.

Keyboard shortcuts

Shortcuts (other than ⌘K) are inert while an input, textarea, select, or contenteditable is focused.

Shortcut	Action
⌘K / Ctrl+K	Command palette
⌘S / Ctrl+S	Save draft
⌘⇧P / Ctrl+Shift+P	Publish
⌘Z / Ctrl+Z	Undo
⌘⇧Z / Ctrl+Shift+Z	Redo
/	Add section
?	Keyboard-shortcuts overlay
Esc	Close the overlay / deselect the section — also exits focus mode and closes the mobile rail

Configuration

The editor block in config/filamentcraft.php:

'editor' => [
    'enabled' => env('FILAMENTCRAFT_EDITOR_ENABLED', true),
    'autosave_ms' => 1500,
    'undo_depth' => 50,
    'control_size' => 'comfortable',
    'devices' => [
        'desktop' => ['width' => 1440, 'height' => 900],
        'tablet' => ['width' => 820, 'height' => 1180],
        'mobile' => ['width' => 390, 'height' => 844],
    ],
],

• enabled — master switch; false hides the editor page entirely (useful per environment via FILAMENTCRAFT_EDITOR_ENABLED).
• autosave_ms — debounce (ms) before an edit is auto-saved to the draft.
• undo_depth — undo steps retained per template in the ring buffer.
• control_size — density of the settings-panel enum/toggle controls: compact, comfortable (default), or spacious.
• devices — preview viewport dimensions (px) per device shell.

Next steps

• Regions: Header & Footer — the pinned site-wide section groups and how to configure which ones exist.
• Editor Internals — the post-message bus, the auto-scroll retry/ack protocol, the morph-safe sidebar resize, and where the editor's .ts code lives.