@page-engine/renderer-adapter-react

React renderer adapter for the PageEngine declarative front-end engine.

Implements the TrustedRendererHandle ABI from @page-engine/page-runtime-browser (type-only dependency) so React components can serve as PageEngine renderers. Renderer assets produced through this adapter stay light-DOM and framework-agnostic from the engine's perspective: the engine never imports React, your bundle does.

Install

npm install @page-engine/renderer-adapter-react

React and react-dom are peer dependencies (>=18 <20, i.e. React 18 and 19). Requires Node >= 22.12 for tooling; the adapter runs in the browser. ESM only.

Minimal example

import type { ReactElement } from "react";
import { createReactRenderer, type RendererInput } from "@page-engine/renderer-adapter-react";

const render = (input: RendererInput, _dispatch: (eventName: string, detail: unknown) => void): ReactElement =>
  <section>{JSON.stringify(input.data)}</section>;

const implementation = createReactRenderer("page-hello", render);
implementation.registerElement();
const handle = implementation.createHandle();

The custom element defined by createReactRenderer stays light-DOM: the engine attaches it and calls handle.render with { config, data, viewState }; React lives entirely inside your render function. Renderer crashes collapse to nothing instead of taking the page runtime down. See the monorepo adapter tests (packages/renderer-adapter-react/test) for complete working examples.