Composition

Puck uses compositional patterns enable completely custom editor interfaces. See an example.

Using composition

Composition can be achieved by providing children to the <Puck> component:

import { Puck } from "@measured/puck";
 
export function Editor() {
  return (
    <Puck>
      <div
        style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gridGap: 16 }}
      >
        <div>
          {/* Render the drag-and-drop preview */}
          <Puck.Preview />
        </div>
        <div>
          {/* Render the component list */}
          <Puck.Components />
        </div>
      </div>
    </Puck>
  );
}

Compositional components

Puck exposes its core components, allowing you to compose them together to create new layouts:

• <Puck.Components> - A draggable list of components.
• <Puck.Fields> - The fields for the currently selected item.
• <Puck.Outline> - An interactive outline.
• <Puck.Preview> - A drag-and-drop preview.

The internal UI for these components can also be changed by implementing UI overrides or theming.

Helper components

Puck also exposes helper components for even deeper customization:

• <Drawer> - A reference list of items that can be dragged into a droppable area, normally <Puck.Preview>.
• <Drawer.Item> - An item that can be dragged from a <Drawer>.
• <FieldLabel> - A styled label for creating inputs.

Further reading

• Internal Puck API
• UI overrides