Puck

Puck is a modular, open-source visual editor for React.js, licensed under MIT, that enables teams to ship production interfaces without engineering bottlenecks. It integrates directly into any React or Next.js application as a component, giving you full ownership of your data with no vendor lock-in. Puck Cloud extends the core editor with AI-powered page generation, a versioned page datastore, and multiplayer collaboration features. With 12,600+ GitHub stars and 400,000+ monthly downloads, it is widely adopted for standalone CMS setups, automated publishing workflows, white-label products, and no-code development tooling.

• Drag-and-drop editor — Install the @measured/puck package and render the <Puck> component with your own React components to get an intuitive drag-and-drop interface immediately.
• Component configuration — Map your existing React components to Puck by providing render functions and field definitions, keeping every experience on-brand by default.
• Inline editing — Update headlines, copy, and calls to action directly in the live preview without switching to a separate form.
• Multi-column layouts — Create nested, multi-column layouts with advanced CSS layout support out of the box.
• Dynamic props & fields — Dynamically set props or fields based on user input and mark fields as read-only for controlled editing experiences.
• External data sources — Load content from third-party CMSes or any data source to power component props.
• Server Components support — Opt-in support for React Server Components for improved performance.
• Viewports — Preview and edit content in a same-origin iframe to simulate different device viewports.
• AI copilot (Puck Cloud) — Generate full pages via the editor UI or headless API using AI constrained to your components, brand, and data.
• Puck Cloud Pages — A versioned datastore for pages that combines with AI to orchestrate content at scale (coming soon).
• Multiplayer (Puck Cloud) — Live syncing between editor sessions for real-time collaboration (coming soon).
• Feature toggling — Control which Puck features (duplication, deletion, etc.) are available via the permissions API.
• Data migration — Migrate between breaking Puck releases and your own breaking prop changes with built-in migration utilities.