<Puck.Preview>

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

Interactive Demo

HeadingBlock

Hello, world

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

Props

Param	Example	Type	Status
`id`	`id: "my-preview-content"`	String	-

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>
  );
}