@blockforgecms/cms-react

Embedded React admin runtime for BlockForge (self-contained, no root App.tsx dependency).

Exports:

• BlockforgeAdmin
• createBlockforgeApp
• CustomBlockRendererProps
• CustomBlockRenderers

Usage:

'use client';

import dynamic from 'next/dynamic';
import '@blockforgecms/cms-react/styles.css';

const BlockforgeAdmin = dynamic(
  () => import('@blockforgecms/cms-react').then((mod) => mod.BlockforgeAdmin),
  { ssr: false },
);

Add Custom Components

1. Create a typed content contract in your host app under components/blocks/*.tsx, for example:

export type TestimonialsBlockContent = {
  title: string;
  items: { quote: string; author: string }[];
};

2. Generate contracts:

npm run cms-model:scan

3. Make sure content-models.generated.json is served at /content-models.generated.json (typically from host app /public).
4. Register a renderer on BlockforgeAdmin:

import type { CustomBlockRendererProps } from '@blockforgecms/cms-react';

const TestimonialsBlock = ({ content }: CustomBlockRendererProps<{
  title: string;
  items: { quote: string; author: string }[];
}>) => (
  <section>
    <h2>{content.title}</h2>
    {content.items.map((item, index) => (
      <blockquote key={index}>
        {item.quote} — {item.author}
      </blockquote>
    ))}
  </section>
);

<BlockforgeAdmin
  customRenderers={{
    TESTIMONIALS: TestimonialsBlock,
  }}
/>;

Keys are matched by normalized model key (for example ImageGallery => IMAGE-GALLERY).