API ReferenceComponents<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

Param	Example	Type	Status
`config`	`config: { components: {} }`	Config	Required
`data`	`data: {}`	Data	Required
`metadata`	`metadata: {}`	Metadata	-

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

`metadata`

An object containing additional data provided to each component’s render and resolveData functions.


export function Example() {
  return (
    <Render
      metadata={{ title: "Hello, world" }}
      config={{
        HeadingBlock: {
          render: ({ puck }) => {
            return <h1>{puck.metadata.title}</h1>; // "Hello, world"
          },
        },
      }}
      // ...
    />
  );
}

<Puck.Preview>

Configuration