@openawb/renderer

React primitives for rendering an AWB page document outside the full editor chrome: node tree, responsive CSS, and SEO head sync.

Install

pnpm add @openawb/renderer @openawb/component-registry @openawb/editor-core @openawb/types
pnpm add react react-dom

Components

| Export | Role | | --- | --- | | DocumentRenderer | Renders a Page tree via a ComponentRegistry | | PageMediaStyles | Injects compiled responsive CSS for the page | | PageSeoHead | Syncs document SEO tags into document.head (client) |

Example

import type { Page } from "@openawb/types";
import { DocumentRenderer, PageMediaStyles, PageSeoHead } from "@openawb/renderer";
import { componentRegistry } from "@openawb/component-registry/library";
import { AssetCatalogContext } from "@openawb/component-registry/AssetCatalogContext";

export function PageView({ page, catalog }: { page: Page; catalog: Map<string, { url: string }> }) {
  return (
    <AssetCatalogContext.Provider value={catalog}>
      <PageSeoHead page={page} />
      <PageMediaStyles page={page} />
      <DocumentRenderer page={page} registry={componentRegistry} />
    </AssetCatalogContext.Provider>
  );
}

Import rules

• Types (Page, BuilderNode) → @openawb/types
• Registry / views → @openawb/component-registry
• This package → layout/rendering only

Peers

• react / react-dom ^19

Development

pnpm --filter @openawb/renderer typecheck
pnpm --filter @openawb/renderer build

See Publishing.