LivePreviewPanel
LivePreviewPanel(
props):Element
Defined in: packages/react/src/livePreview/LivePreviewPanel.tsx:218
The live-preview surface rendered beside (desktop, inside a ResizablePanel)
or inside LivePreviewMobileOverlay’s bottom sheet (mobile, isMobile) a
collection or global edit form. Renders an iframe pointed at the resolved
preview URL and syncs the form’s values into it via useLivePreviewSync.
The header’s “Preview” link opens the same URL in a new tab. That tab is
reached over BroadcastChannel rather than postMessage — a
rel="noreferrer" link leaves no window reference behind — and its mount
handshake pulls the current values immediately.
Parameters
Section titled “Parameters”breakpoints
Section titled “breakpoints”Toggle-able simulated widths —
collection.admin.livePreview.breakpoints ?? config.admin.livePreview.breakpoints,
resolved by the caller. The toggle row is not rendered when isMobile.
collectionSlug
Section titled “collectionSlug”string
The collection or global slug being previewed.
debounceMs?
Section titled “debounceMs?”number
Forwarded to useLivePreviewSync.
documentId?
Section titled “documentId?”string
The saved document id, once it exists.
AnyFormApi
The edit view’s form instance, forwarded to useLivePreviewSync.
isMobile?
Section titled “isMobile?”boolean
Hides the desktop-only breakpoint toggle row and
shows a close button in its place — set by LivePreviewMobileOverlay,
which supplies the surrounding fixed/overlay chrome (and its own
backdrop, focus trap, Esc-to-close, scroll lock). Requires onClose.
onClose?
Section titled “onClose?”() => void
Required when isMobile — called by the close button.
previewUrl
Section titled “previewUrl”string
The resolved URL for the CURRENT form values.
tempId?
Section titled “tempId?”string
The client-generated temp id, before the first save.
Returns
Section titled “Returns”Element
The preview surface: toolbar, breakpoint row, and scaled iframe.