<Render>

Render a Data object for a given Config.

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

Props

Param	Example	Type	Status
`config`	`config: { components: {} }`	Config	Required
`data`	`data: { content: [], root: {} }`	Data	Required

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: {},
      }}
      // ...
    />
  );
}

<Puck.Preview>Configuration