Skip to content

measuredco/puck

Folders and files

NameName
Last commit message
Last commit date
May 31, 2024
Jan 30, 2025
Jan 30, 2025
Jan 2, 2025
Jan 9, 2025
Dec 12, 2023
Sep 6, 2023
Jun 1, 2023
Sep 14, 2023
Sep 14, 2023
Jul 3, 2023
Jan 24, 2025
Oct 20, 2023
Oct 20, 2023
Dec 18, 2023
Jan 23, 2025
Jan 24, 2025
Jan 24, 2025
Dec 16, 2024
Jan 30, 2025

Repository files navigation

Puck

The visual editor for React.

Demo

Visit https://demo.puckeditor.com/edit to try the demo.

Documentation

Visit https://puckeditor.com 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 = {};

// 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} />;
}

Recipes

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 example, using App Router and static page generation
  • remix: Remix Run v2 example, using dynamic routes at root-level

Community

Get support

If you have any questions about Puck, please open a GitHub issue or join us on Discord.

Or book a discovery call for hands-on support and consultancy.

License

MIT © Measured Corporation Ltd