• Docs
  • Blog
Join AI waiting listLogin
CTRL K
  • 9.9k
LoginJoin AI waiting list
CTRL K
  • 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
    • Overview
    • Getting Started
    • AI Configuration
    • Business Context
    • Headless Generation
    • Tools
    • Beta Pricing
    • 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
    • Overview
    • Getting Started
    • AI Configuration
    • Business Context
    • Headless Generation
    • Tools
    • Beta Pricing
    • 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
Puck AI closed beta
Read docs
API ReferenceComponents<Puck.Outline>

<Puck.Outline>

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

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