✍️ Puck 0.20 released: inline text editing, overlay portals & resizable sidebars
  • Docs
  • Blog
  • Introduction
  • Getting Started
    • Component Configuration
    • Root Configuration
    • Multi-column Layouts
    • Categories
    • Dynamic Props
    • Dynamic Fields
    • External Data Sources
    • React Server Components
    • Data Migration
    • Viewports
    • Feature Toggling
    • Overlay Portals
    • Composition
    • Custom Fields
    • Field Transforms
    • Internal Puck API
    • Theming
    • Plugin API
    • UI overrides
    • Components
      • <ActionBar>
      • <ActionBar.Action>
      • <ActionBar.Group>
      • <ActionBar.Label>
      • <AutoField>
      • <Drawer>
      • <Drawer.Item>
      • <DropZone>
      • <FieldLabel>
      • <Puck>
      • <Puck.Components>
      • <Puck.Fields>
      • <Puck.Outline>
      • <Puck.Preview>
      • <Render>
    • Configuration
    • Fields
    • Overrides
    • Actions
    • FieldTransforms
    • Permissions
    • Plugin
    • PuckApi
    • Theming
  • Introduction
  • Getting Started
    • Component Configuration
    • Root Configuration
    • Multi-column Layouts
    • Categories
    • Dynamic Props
    • Dynamic Fields
    • External Data Sources
    • React Server Components
    • Data Migration
    • Viewports
    • Feature Toggling
    • Overlay Portals
    • Composition
    • Custom Fields
    • Field Transforms
    • Internal Puck API
    • Theming
    • Plugin API
    • UI overrides
    • Components
      • <ActionBar>
      • <ActionBar.Action>
      • <ActionBar.Group>
      • <ActionBar.Label>
      • <AutoField>
      • <Drawer>
      • <Drawer.Item>
      • <DropZone>
      • <FieldLabel>
      • <Puck>
      • <Puck.Components>
      • <Puck.Fields>
      • <Puck.Outline>
      • <Puck.Preview>
      • <Render>
    • Configuration
    • Fields
    • Overrides
    • Actions
    • FieldTransforms
    • Permissions
    • Plugin
    • PuckApi
    • Theming
API ReferenceComponents<Puck.Outline>

<Puck.Outline>

Render an interactive outline of the current data payload when composing a custom Puck UI.

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

Props

This component doesn’t accept any props.

Previous
<Puck.Fields>
Next
<Puck.Preview>
On this page
  • Props
Resources
  • Docs
  • Live Demo
  • Blog
  • Releases
Products
  • Coming soon
Services
  • Coming soon
Social
  • GitHub
  • Discord
  • Twitter
  • Bluesky