Puck

Puck is an open-source visual editor for React that enables teams to embed rich, schema-driven content editing directly into their own applications. It provides a configurable, component-based page builder that lets developers define what can be edited, while giving non-technical users an intuitive interface for composing layouts and content. Puck’s primary purpose is to bridge the gap between rigid, developer-only UIs and inflexible off-the-shelf CMS page builders, allowing organizations to maintain control over code while still empowering editors.

At its core, Puck uses a structured configuration model where developers define blocks, props, validation rules, and layout constraints in TypeScript or JavaScript. The editor then renders these blocks in a drag-and-drop interface with real-time preview, ensuring that what editors see closely matches the final UI. It supports custom React components, responsive layouts, and content schemas, so teams can enforce design systems and guardrails while still allowing flexibility. Puck stores content as JSON, making it easy to integrate with existing backends, APIs, or headless CMSs, and to version content alongside code.