Metadata Configuration

Metadata holds per-page values, like the page title and description. Metadata values:

1. Are edited in the Page panel of the editor.
2. Are stored per page as a flat object in data.metadata.
3. Are not rendered. Your app reads them, for example to populate the document <head>.

Configuring metadata is similar to configuring components, without a render function.

Adding fields

Use the metadata parameter to define the fields for each page, using any Fields via the fields parameter:

const config = {
  components: {
    HeadingBlock: {
      render: () => {
        return <h1>Hello, world</h1>;
      },
    },
  },
  metadata: {
    fields: {
      title: { type: "text" },
      description: { type: "textarea" },
    },
  },
};

When the user modifies the inputs, the editor will produce a data payload like this:

{
  "content": [
    // ...
  ],
  "metadata": {
    "title": "Hello, world",
    "description": "Lorem ipsum"
  }
}

Metadata also supports the label, permissions, resolveData, resolveFields, resolvePermissions and context parameters.

TypeScript

Generic types can be passed to the Config type to strictly type your metadata configuration:

import type { Config } from "@reacteditor/core";
 
type MetadataProps = {
  title: string;
  description: string;
};
 
const config: Config<{ components: {}; metadata: MetadataProps }> = {
  // ...
};

Setting default props

Provide the values in the default parameter to configure defaults for the metadata fields:

const config = {
  // ...
  metadata: {
    fields: {
      title: { type: "text" },
      description: { type: "textarea" },
    },
    default: {
      title: "Hello, world",
      description: "Lorem ipsum",
    },
  },
};

default has the same flat shape as data.metadata. Unlike a component’s default, it doesn’t wrap the values in props. Values in the page’s data.metadata take precedence over the defaults.

Unlike default parameters, default props are stored in the data payload and will populate the React Editor fields.

Reading metadata in your app

Metadata values aren’t rendered by <Render>. Read them from the page data in your framework’s head API.

Next.js

export async function generateMetadata({ params }) {
  const data = await getPage(params.slug);
 
  return {
    title: data.metadata.title,
    description: data.metadata.description,
  };
}

TanStack Start

export const Route = createFileRoute("/$slug")({
  loader: async ({ params }) => ({ page: await getPage(params.slug) }),
  head: ({ loaderData }) => ({
    meta: [{ title: loaderData.page.metadata.title }],
  }),
  // ...
});

Wrappers, providers and themes

Metadata has no render function. Shared page structure, such as wrappers, providers, themes, headers and footers, belongs in a layout: a single component that receives the page as its children. A page that needs a different look uses a different layout.