TiloBox
Back to directory
Puck project preview

Puck

The self-hosted, visual page builder for React with clean drop-in component integration.

LicenseMIT
GitHub stars6.5k
Last commit6 days ago
Tags5 topics
React Visual EditorDrop In Page BuilderPuck Visual BuilderComponent Drag DropMarketing
Overview

Why consider Puck?

Puck is an open-source visual page editor for React developed by Measured. Puck allows developers to transform existing React component libraries into a drag-and-drop landing page editor with responsive viewport previews, dynamic props editing, and clean JSON payloads.

Guided learning

Learn Puck by building

Practical setup notes, real use cases, and copy-ready examples in one focused guide.

1 min read 2 sections
In this guide2 sections

Overview of Puck

Puck converts React design systems into visual marketing page editors with JSON data persistence.

Quickstart

bash
1npm install @measured/puck
jsx
1import { Puck } from "@measured/puck";
2import "@measured/puck/dist/index.css";
3const config = { components: { Heading: { render: ({ title }) => <h1>{title}</h1> } } };
4export function App() { return <Puck config={config} data={{}} onPublish={console.log} />; }

Puck is licensed under the permissive MIT License.

Related tools

More options with a similar category or technology profile.

Puck FAQs

Puck is listed as a Marketing tool on TiloBox. Review the overview, features, and official documentation on this page to decide whether it solves your specific workflow.

Start with the project's GitHub repository and official website for supported installation and deployment instructions. Test the setup with representative data or a small project before rolling it out more widely.

Puck is listed under the MIT license. Read the complete license text and the project's notices before using, modifying, or distributing the software.

Production readiness depends on your requirements. Review maintenance activity, security practices, documentation, backup and upgrade procedures, and compatibility with your stack; then validate it in a non-production environment.

Puck is listed as an alternative to Plasmic. Compare the core workflow, deployment model, integrations, and licensing against your must-have requirements before switching.