Docs
API Reference
<Puck.Preview>

<Puck.Preview>

Render a drag-and-drop preview for the current data when composing a custom Puck UI.

Interactive Demo
Hello, world
import { Puck } from "@measured/puck";
 
export function Editor() {
  return (
    <Puck>
      <Puck.Preview />
    </Puck>
  );
}

Props

ParamExampleTypeStatus
idid: "my-preview-content"String-

Optional props

id

A unique identifier for the preview frame. Default: puck-preview.

import { Puck } from "@measured/puck";
 
export function Editor() {
  return (
    <Puck>
      <Puck.Preview id="my-frame" />
    </Puck>
  );
}