• Stars
    star
    5,178
  • Rank 8,001 (Top 0.2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 1 year ago
  • Updated 16 days ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

The visual editor for React

Puck

The self-hosted, drag and drop 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 = {
  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} />;
}

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 13 app example, using App Router and static page generation

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.

License

MIT © Measured Co.