Preview & editing
The Studio edits your page in a real preview — your website, rendered in draft mode, embedded as an iframe. A postMessage bridge connects the Studio and the preview.
#How it fits together
- The preview route (
app/editkraft/preview/[[...slug]]) renders your page in draft mode with theEditkraftPreviewclient component.initscaffolds it. - On connect, the preview reports
ek:ready; from then on selection, inline edits and live updates run over the bridge. data-ek-fieldelements become editable; the formatting toolbar, the image popover and the link editor live inside the preview.
#React context in the preview
If your blocks need context (next-intl, theme providers), wrap the preview
client component with them — otherwise the blocks render in the preview without
their providers. The preview-client.tsx that init generates is the right
place for this.
#Media by drag & drop
Images can be dragged from the media library in the sidebar straight onto an
image field in the preview to replace it. Requires a recent version of
@editkraft/react on the customer site.
The editor can only edit what it sees: elements without data-ek-field are
visible in the preview but not editable. See Blocks.
#i18n
If your project uses a locale segment (app/[locale]/…), move the render and
preview routes under that segment and pass locale to EditkraftPage. Also
exclude editkraft from your middleware matcher so the preview iframe
isn’t redirected.