@openawb/component-registry

Component definitions, inspector field schemas, and the builtin AWB library (section, text, image, embed, …) as React views.

Use this when you need to render or author builder nodes with the same components the AWB editor uses.

Install

pnpm add @openawb/component-registry @openawb/editor-core @openawb/types
pnpm add react react-dom   # peer dependencies

Import rules

import type { Page, BuilderNode } from "@openawb/types";
import { createRegistry, type ComponentRegistry } from "@openawb/component-registry";
import { componentRegistry, builtinDefinitions } from "@openawb/component-registry/library";
import { AssetCatalogContext, useAssetCatalog } from "@openawb/component-registry/AssetCatalogContext";

Builtin library

import { componentRegistry } from "@openawb/component-registry/library";

const definition = componentRegistry.get("section");
// definition.render, definition.defaultStyles, definition.inspector, …

componentRegistry is the default registry used by the AWB builder canvas and static compiler.

Custom registry

import { createRegistry } from "@openawb/component-registry";
import { builtinDefinitions } from "@openawb/component-registry/library";

const registry = createRegistry([...builtinDefinitions, myCustomDefinition]);

Asset catalog context

Wrap React trees that resolve asset: URLs:

import { AssetCatalogContext } from "@openawb/component-registry/AssetCatalogContext";

<AssetCatalogContext.Provider value={catalog}>
  {children}
</AssetCatalogContext.Provider>

Peers

• react / react-dom ^19
• @openawb/types, @openawb/editor-core

Development

pnpm --filter @openawb/component-registry typecheck
pnpm --filter @openawb/component-registry build

See Publishing.