Docs
API Reference
<Render>

<Render>

Render a Data object for a given Config.

import { Render } from "@measured/puck";
 
export function Example() {
  return <Render config={config} data={data} />;
}

Props

ParamExampleTypeStatus
configconfig: { components: {} }ConfigRequired
datadata: {}DataRequired

Required props

config

An object describing the available components, fields and more. See the Config docs for a full reference.

export function Example() {
  return (
    <Render
      config={{
        components: {
          HeadingBlock: {
            fields: {
              children: {
                type: "text",
              },
            },
            render: ({ children }) => {
              return <h1>{children}</h1>;
            },
          },
        },
      }}
      // ...
    />
  );
}

data

The data to render against the provided config. See the Data docs for a full reference.

export function Example() {
  return (
    <Render
      data={{
        content: [
          {
            props: { children: "Hello, world", id: "id" },
            type: "HeadingBlock",
          },
        ],
        root: {},
      }}
      // ...
    />
  );
}