@magfur-alam/react

The lightweight, production-safe React renderer: <PageRenderer /> and <NodeRenderer />. No editor chrome, no drag/drop, no selection state — just walking a PageDocument and rendering whatever component each node's type was registered with via registerElement() (@magfur-alam/core).

Part of the Next.js Database-Backed Visual Page Builder monorepo — see the root README for the full architecture.

Install

npm install @magfur-alam/react @magfur-alam/core

Usage

// A React Server Component — <PageRenderer> has no client-only concerns
// (no hooks, no browser APIs), so it renders fine on the server.
import { PageRenderer } from "@magfur-alam/react";

export default function Page({ page, globalComponents }: { page: PageDocument; globalComponents: Record<string, BuilderNode> }) {
  return <PageRenderer page={page} globalComponents={globalComponents} />;
}

@magfur-alam/next's getPageBySlug() returns a PageDocument shaped for exactly this — see that package's README for the full server-side fetch + render flow, including how globalComponents gets resolved for anonymous visitors.

<NodeRenderer> is also exported directly — @magfur-alam/editor reuses it (not its own reimplementation) for the read-only preview shown inside a "global component" reference on the canvas.