First-class React: your components, your design system, your render path

Marketers still compose visually. Developers still get JSON, environment tokens, and a published key. The difference is how far the host app can go: React is where RuleCMS already acts as a design-system CMS, not only a card renderer.

• Register a team-scoped custom component library so your React components appear in the composer palette with attribute editing, lazy loading, and SSR.
• Server-render with fetchRuleCMSWidget plus mode="pre-fetched", or skip widget JavaScript entirely with RuleCMSWidgetServer on React Server Components.
• Preview live Development drafts with a dev. token — no publish step. See development integration.
• Pass host-app click handlers and extra props by column id. See custom props and click handlers.
• Register a component from your app by name so a Custom slot can render it. See mount your own components.
• Open a published widget in the editor from your live site with the Chrome edit-links extension.

Staging and production use a plain token plus a published key shaped like environmentId---widget-…. Development uses a dev. token and a draft widget key so the composer can stream the current draft into your app. Keep tokens in server-only environment variables whenever you fetch on the server — never NEXT_PUBLIC_* for a production token.

Full walkthrough: projects, environments, and tokens.

Prefetch on the server, then hydrate in the browser. This works on Next.js App Router, Pages Router, Remix / React Router, and any React SSR host where you own the fetch:

1import { fetchRuleCMSWidget } from "@rulecms/widget-react/server";2import { RuleCMSWidget } from "@rulecms/widget-react";34export default async function Page() {5  const data = await fetchRuleCMSWidget({6    publishedKey: process.env.RULECMS_PUBLISHED_KEY!,7    token: process.env.RULECMS_TOKEN!,8    fetchOptions: { next: { revalidate: 60 } },9  });1011  return (12    <RuleCMSWidget13      mode="pre-fetched"14      publishedKey={process.env.RULECMS_PUBLISHED_KEY!}15      initialData={data}16    />17  );18}

On React Server Components, RuleCMSWidgetServer fetches and renders on the server. No widget JavaScript ships to the browser. If the CMS is down, the component logs and shows errorFallback — a content outage does not take your page with it.

1import { RuleCMSWidgetServer } from "@rulecms/widget-react/server";23export default function Page() {4  return (5    <RuleCMSWidgetServer6      publishedKey={process.env.RULECMS_PUBLISHED_KEY!}7      token={process.env.RULECMS_TOKEN!}8      fetchOptions={{ next: { revalidate: 60 } }}9      errorFallback={<p>Content is temporarily unavailable.</p>}10    />11  );12}

The default cards cover a long customer journey on their own: heroes, FAQs, media, and calls to action. When your brand already lives in a React design system, register that library on the team. Editors drag your components. Published widgets render those same components in the host app, including SSR.

That is why React is first-class. Angular, Vue, Svelte, Flutter, and React Native still get official SDKs and the default card set — enough to buy, compose, publish, and ship. When you need the composer to speak your component library, React is the path that is already built.

Read the component libraries guide. For a live customer using a custom React library, see the ATL Fluid Art case study.

A published widget should not own your checkout drawer or your router. Pass an onClick — or any extra prop — to one instance. A bare id matches every copy of a repeated collection. A / path of enclosing collection columns targets one embedding. Longest match wins. In development, a key that addresses no column prints once so typos show up while you build.

1import { RuleCMSWidget } from "@rulecms/widget-react";23export function HomepageHero() {4  return (5    <RuleCMSWidget6      publishedKey="your-widget-key"7      componentProps={{8        "b721c4e2-…": { onClick: handleCta },9        "holder-a/inner-col": { onClick: openBookingDrawer },10      }}11    />12  );13}

Need the product docs for tokens, widgets, or the headless API? Start at Getting started, then environments and tokens and the API reference.