# Puck

> Puck is a modular, open-source visual editor for React.js. You can use Puck to build custom drag-and-drop experiences with your own application and React components. It's great for both internal page building applications or no-code page building products. Because Puck is just a React component, it plays well with all React.js environments, including Next.js. You own your data and there’s no vendor lock-in.

## Docs

- [Introduction](/docs/index.md)
- [Getting Started](/docs/getting-started.md)

### Integrating Puck
- [Component Configuration](/docs/integrating-puck/component-configuration.md)
- [Root Configuration](/docs/integrating-puck/root-configuration.md)
- [Multi-column Layouts](/docs/integrating-puck/multi-column-layouts.md)
- [Categories](/docs/integrating-puck/categories.md)
- [Rich Text Editing](/docs/integrating-puck/rich-text-editing.md)
- [Dynamic Props](/docs/integrating-puck/dynamic-props.md)
- [Dynamic Fields](/docs/integrating-puck/dynamic-fields.md)
- [External Data Sources](/docs/integrating-puck/external-data-sources.md)
- [React Server Components](/docs/integrating-puck/server-components.md)
- [Data Migration](/docs/integrating-puck/data-migration.md)
- [Viewports](/docs/integrating-puck/viewports.md)
- [Feature Toggling](/docs/integrating-puck/feature-toggling.md)
- [Overlay Portals](/docs/integrating-puck/overlay-portals.md)

### Puck AI Beta
- [Overview](/docs/ai/overview.md)
- [Getting Started](/docs/ai/getting-started.md)
- [AI Configuration](/docs/ai/ai-configuration.md)
- [Business Context](/docs/ai/business-context.md)
- [Tools](/docs/ai/tools.md)
- [Headless Generation](/docs/ai/headless-generation.md)

### Extending Puck
- [Composition](/docs/extending-puck/composition.md)
- [Custom Fields](/docs/extending-puck/custom-fields.md)
- [Field Transforms](/docs/extending-puck/field-transforms.md)
- [Internal Puck API](/docs/extending-puck/internal-puck-api.md)
- [Plugin API](/docs/extending-puck/plugins.md)
- [UI overrides](/docs/extending-puck/ui-overrides.md)

#### Theming
- [Theming](/docs/extending-puck/theming/overview.md)
- [Fonts](/docs/extending-puck/theming/fonts.md)

### API Reference
- [Components](/docs/api-reference/components.md)
- [Configuration](/docs/api-reference/configuration.md)
- [Data Model](/docs/api-reference/data-model.md)
- [Fields](/docs/api-reference/fields.md)
- [Functions](/docs/api-reference/functions.md)
- [Overrides](/docs/api-reference/overrides.md)
- [Actions](/docs/api-reference/actions.md)
- [FieldTransforms](/docs/api-reference/field-transforms.md)
- [Permissions](/docs/api-reference/permissions.md)
- [Plugin](/docs/api-reference/plugin.md)
- [PuckApi](/docs/api-reference/puck-api.md)
- [Theming](/docs/api-reference/theming.md)

#### AI

##### AI Plugin
- [Installation](/docs/api-reference/ai/ai-plugin/installation.md)
- [createAiPlugin](/docs/api-reference/ai/ai-plugin/create-ai-plugin.md)

##### Cloud Client
- [Installation](/docs/api-reference/ai/cloud-client/installation.md)
- [chat](/docs/api-reference/ai/cloud-client/chat.md)
- [generate](/docs/api-reference/ai/cloud-client/generate.md)
- [puckHandler](/docs/api-reference/ai/cloud-client/puck-handler.md)
- [tool](/docs/api-reference/ai/cloud-client/tool.md)

##### Configuration
- [Components](/docs/api-reference/ai/configuration/components.md)
- [Fields](/docs/api-reference/ai/configuration/fields.md)

#### Components
- [ActionBar](/docs/api-reference/components/action-bar.md)
- [ActionBar.Action](/docs/api-reference/components/action-bar-action.md)
- [ActionBar.Group](/docs/api-reference/components/action-bar-group.md)
- [ActionBar.Label](/docs/api-reference/components/action-bar-label.md)
- [ActionBar.Separator](/docs/api-reference/components/action-bar-separator.md)
- [AutoField](/docs/api-reference/components/auto-field.md)
- [Drawer](/docs/api-reference/components/drawer.md)
- [Drawer.Item](/docs/api-reference/components/drawer-item.md)
- [DropZone](/docs/api-reference/components/drop-zone.md)
- [FieldLabel](/docs/api-reference/components/field-label.md)
- [Puck](/docs/api-reference/components/puck.md)
- [Puck.Components](/docs/api-reference/components/puck-components.md)
- [Puck.Fields](/docs/api-reference/components/puck-fields.md)
- [Puck.Layout](/docs/api-reference/components/puck-layout.md)
- [Puck.Outline](/docs/api-reference/components/puck-outline.md)
- [Puck.Preview](/docs/api-reference/components/puck-preview.md)
- [Render](/docs/api-reference/components/render.md)
- [RichTextMenu](/docs/api-reference/components/rich-text-menu.md)
- [RichTextMenu.Group](/docs/api-reference/components/rich-text-menu-group.md)
- [RichTextMenu.Control](/docs/api-reference/components/rich-text-menu-control.md)

#### Configuration
- [Config](/docs/api-reference/configuration/config.md)
- [ComponentConfig](/docs/api-reference/configuration/component-config.md)

#### Data Model
- [AppState](/docs/api-reference/data-model/app-state.md)
- [ComponentData](/docs/api-reference/data-model/component-data.md)
- [Data](/docs/api-reference/data-model/data.md)
- [ItemSelector](/docs/api-reference/data-model/item-selector.md)
- [RootData](/docs/api-reference/data-model/root-data.md)

#### Fields
- [Base](/docs/api-reference/fields/base.md)
- [Array](/docs/api-reference/fields/array.md)
- [Custom](/docs/api-reference/fields/custom.md)
- [External](/docs/api-reference/fields/external.md)
- [Number](/docs/api-reference/fields/number.md)
- [Object](/docs/api-reference/fields/object.md)
- [Radio](/docs/api-reference/fields/radio.md)
- [Richtext](/docs/api-reference/fields/richtext.md)
- [Select](/docs/api-reference/fields/select.md)
- [Slot](/docs/api-reference/fields/slot.md)
- [Text](/docs/api-reference/fields/text.md)
- [Textarea](/docs/api-reference/fields/textarea.md)

#### Functions
- [migrate](/docs/api-reference/functions/migrate.md)
- [registerOverlayPortal](/docs/api-reference/functions/register-overlay-portal.md)
- [resolveAllData](/docs/api-reference/functions/resolve-all-data.md)
- [setDeep](/docs/api-reference/functions/set-deep.md)
- [transformProps](/docs/api-reference/functions/transform-props.md)
- [useGetPuck](/docs/api-reference/functions/use-get-puck.md)
- [usePuck](/docs/api-reference/functions/use-puck.md)
- [walkTree](/docs/api-reference/functions/walk-tree.md)

#### Overrides
- [actionBar](/docs/api-reference/overrides/action-bar.md)
- [componentItem](/docs/api-reference/overrides/component-item.md)
- [components](/docs/api-reference/overrides/components.md)
- [fieldLabel](/docs/api-reference/overrides/field-label.md)
- [fieldTypes](/docs/api-reference/overrides/field-types.md)
- [fields](/docs/api-reference/overrides/fields.md)
- [headerActions](/docs/api-reference/overrides/header-actions.md)
- [header](/docs/api-reference/overrides/header.md)
- [iframe](/docs/api-reference/overrides/iframe.md)
- [outline](/docs/api-reference/overrides/outline.md)
- [preview](/docs/api-reference/overrides/preview.md)
- [puck](/docs/api-reference/overrides/puck.md)
- [componentOverlay](/docs/api-reference/overrides/component-overlay.md)
- [drawerItem](/docs/api-reference/overrides/drawer-item.md)
- [drawer](/docs/api-reference/overrides/drawer.md)

#### Plugins
- [blocksPlugin](/docs/api-reference/plugins/blocks-plugin.md)
- [fieldsPlugin](/docs/api-reference/plugins/fields-plugin.md)
- [legacySideBarPlugin](/docs/api-reference/plugins/legacy-side-bar-plugin.md)
- [outlinePlugin](/docs/api-reference/plugins/outline-plugin.md)

### Guides

#### Migrations
- [Migrating - DropZones to Slots](/docs/guides/migrations/dropzones-to-slots.md)

## Blog

- [Advanced Layouts with Puck: Harnessing Grid and Flex Containers](/blog/advanced-layouts-with-puck-harnessing-grid-and-flex-containers.md)
- [AI Slop vs Constrained UI: Why Most Generative Interfaces Fail](/blog/ai-slop-vs-constrained-ui.md)
- [Building a plugin for a React visual editor with Puck](/blog/building-a-plugin-for-visual-editors-in-react.md)
- [Building a React Page Builder: An Introduction to Puck](/blog/building-a-react-page-builder-an-introduction-to-puck.md)
- [Building a Rich Text Editor in React](/blog/building-a-rich-text-editor-in-react.md)
- [Figma AI vs Puck AI: Design Tools vs UI Generators](/blog/figma-ai-vs-puck-ai.md)
- [How to Build a React Page Builder: Puck and Tailwind v4](/blog/how-to-build-a-react-page-builder-puck-and-tailwind-4.md)
- [Integrating a Page Builder with Contentful](/blog/integrating-a-page-builder-with-contentful.md)
- [Puck: the Open-Source Visual React Editor for Modern Content Workflows](/blog/introducing-puck.md)
- [Managing application state in Puck](/blog/managing-application-state-in-puck.md)
- [Puck 0.13: Custom UIs, object fields & DropZone restrictions](/blog/puck-013.md)
- [Puck 0.14: Viewport switching](/blog/puck-014.md)
- [Puck 0.15: Dynamic fields](/blog/puck-015.md)
- [Puck 0.16: Permissions](/blog/puck-016.md)
- [Puck 0.17: React 19 support](/blog/puck-017.md)
- [Puck 0.18: New drag-and-drop engine](/blog/puck-018.md)
- [Puck 0.19: Slots API & performance gains](/blog/puck-019.md)
- [Puck 0.20: Inline text, overlay portals & resizable sidebars](/blog/puck-020.md)
- [Puck 0.21: AI beta, rich text editing & new plugin rail](/blog/puck-021.md)
- [Puck AI 0.3: Headless page generation](/blog/puck-ai-03.md)
- [Puck AI 0.4: Follow UI stream](/blog/puck-ai-04.md)
- [Puck AI 0.5: onFinish API and switch to Puck stable](/blog/puck-ai-05.md)
- [Puck AI 0.6: Tool binding, request manipulation & more](/blog/puck-ai-06.md)
- [Puck AI: Closed Beta](/blog/puck-ai-closed-beta.md)
- [Revolutionizing Drag-and-Drop in React: Introducing Puck 0.18](/blog/revolutionizing-drag-and-drop-in-react-introducing-puck-018.md)
- [Top 5 Drag-and-Drop Libraries for React in 2026](/blog/top-5-drag-and-drop-libraries-for-react.md)
- [Top AI Libraries for React Developers in 2026](/blog/top-8-ai-libraries-for-react.md)
- [Upgrading to Puck 0.19](/blog/upgrading-to-puck-019.md)
- [Upgrading to Puck 0.20](/blog/upgrading-to-puck-020.md)
- [Upgrading to Puck 0.21](/blog/upgrading-to-puck-021.md)
- [Using CSS variables to create dynamic themes in Puck](/blog/using-css-variables-to-create-dynamic-themes-in-puck.md)