Root component

The root is the single component that wraps every block on the canvas. Use it for:

An HTML scaffold (<main>, theme provider, layout grid).
Document-level settings (title, slug, SEO description).
Context providers that every block needs.


import type { Config } from "@useblok/core";
 
const config: Config = {
  components: { /* ... */ },
  root: {
    fields: {
      title:       { type: "text",     label: "Page title" },
      description: { type: "textarea", label: "SEO description" },
    },
    defaultProps: { title: "Untitled" },
    render: ({ children, title }) => (
      <main>
        <title>{title}</title>
        {children}
      </main>
    ),
  },
};

Shape


interface RootConfig<Props> {
  fields?: Fields<Props>;
  tabs?: TabConfig[];
  defaultProps?: Props;
  render?: ComponentType<Props & { children?: ReactNode }>;
}

render is optional — if you omit it, Blok renders the content with no wrapper.

The Config panel

The root’s fields show in the Config tab of the right rail. They edit data.root.props.


{
  "root": { "props": { "title": "Welcome", "description": "…" } },
  "content": [ /* ... */ ]
}

Using root props in blocks

Root props are not automatically passed to child blocks. Use a React context inside your root renderer if children need to read them:


const PageContext = React.createContext<RootProps>({});
 
root: {
  render: ({ children, ...rootProps }) => (
    <PageContext.Provider value={rootProps}>
      <main>{children}</main>
    </PageContext.Provider>
  ),
}
 
// In a child block:
function HeroBlock() {
  const { title } = React.useContext(PageContext);
  // ...
}

Rendering outside the editor

Your root component should work identically on your published pages — typically, you’d export a standalone <PageShell> component that both the root renderer and your preview/production pages import.