React Puck: A React Component for Creating Interactive Animations


The self-hosted, drag and drop editor for React.


Visit to try the demo.


Visit to view the full documentation.

Quick start

Install the package:

npm i @measured/puck --save # or npx create-puck-app my-app

Render the editor:

// Editor.jsx
import { Puck } from "@measured/puck";
import "@measured/puck/puck.css";

// Create Puck component config
const config = {
  components: {
    HeadingBlock: {
      fields: {
        children: {
          type: "text",
      render: ({ children }) => {
        return <h1>{children}</h1>;

// Describe the initial data
const initialData = {
  content: [],
  root: {},

// Save the data to your database
const save = (data) => {};

// Render Puck editor
export function Editor() {
  return <Puck config={config} data={initialData} onPublish={save} />;

Render the page:

// Page.jsx
import { Render } from "@measured/puck";
import "@measured/puck/puck.css";

export function Page() {
  return <Render config={config} data={data} />;


Use create-puck-app to quickly spin up a a pre-configured app based on our provided recipes:

npx create-puck-app my-app

Available recipes include:

  • next: Next.js 13 app example, using App Router and static page generation
  • remix: Remix Run v2 app example, using dynamic routes at root-level

Hire the Puck team

Puck is developed and maintained by Measured, a small group of industry veterans with decades of experience helping companies solve hard UI problems. We offer consultancy and development services for scale-ups, SMEs and enterprises.

If you need support integrating Puck or creating a beautiful component library, please reach out via our website.

Download details:

Author: measuredco

License: MIT license

#react #javascript #typescript 

React Puck: A React Component for Creating Interactive Animations
1.60 GEEK