Composition | Puck

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

Composition can be achieved by providing to the component:

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

• - A draggable list of components.
• - The fields for the currently selected item.
• - An interactive outline.
• - 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:

• - A reference list of items that can be dragged into a droppable area, normally .
• - An item that can be dragged from a .
• - A styled label for creating inputs.

• Internal Puck API
• UI overrides