Builder + Preview

BuilderPreviewComponent. Replaces two live JS components in Publisher edit that had no visual feedback: the Navigation tree-builder (nested category pills, no preview of the actual rendered menu) and the Homepage Modules drag-and-drop editor (gray column-width boxes, no preview of the actual homepage). Both get a shared pattern instead: a plain-language builder on the left, and an illustrative, non-interactive mockup of the real storefront surface on the right. The preview always carries an "Illustrative only" badge and shows structure only (nav hierarchy, module layout/row count), never live inventory, pricing, or seasonal state. When the builder side has multiple distinct sections, it composes Accordion rather than reinventing a collapse pattern.

Builder

Section A

Form rows, add/remove, drag handles go here.

Section B

Collapsed by default; opening it closes Section A.

Live preview Illustrative only

example.com

Scaled mockup of the real storefront surface renders here, updating to reflect the builder's current state.

This preview shows structure only, not real inventory, pricing, or seasonal state.

Usage guidance

Use this pattern whenever a builder edits something visual (layout, hierarchy, placement) that the underlying form fields alone don't make obvious. The builder side should stay in plain form controls (inputs, selects, simple add/remove/reorder rows). Resist the urge to make the builder itself a rich drag-and-drop canvas; the preview is what shows the result, so the builder can stay simple and accessible.

When the builder has multiple distinct sections (like Navigation, Hero banner, and Page modules in flows/publisher-edit/homepage.html), group them with Accordion rather than showing every section expanded at once, which pushed later sections far down the page in an earlier version of this flow.

Below the shell's ~900px breakpoint, the preview column is dropped entirely (display: none) rather than made collapsible: it's secondary to the builder on an already content-heavy page, and a second collapse/expand affordance stacked on top of the builder's own accordion would add more UI than it's worth on a phone-width screen.