For Developers

Headless API, React SDK, and your own components

RuleCMS gives developers JSON editing, environment-scoped API tokens, SSR-compatible delivery, and custom React component libraries — while marketers use the visual composer.

Getting started guide →

Developer capabilities

Technically accurate integrations — this audience will check.

Direct JSON editing

Drop from visual composer to raw JSON on any widget. Power users and developers work in the format they prefer.

Environment-scoped API tokens

Three environments per project — Development, Staging, Production — each with its own API tokens for safe integration.

Custom component libraries

Register your React design system. Your components appear in the composer palette with full attribute editing, lazy loading, and SSR support.

SSR-compatible rendering

Custom components support SSR through the widget-react rendering pipeline. Server-render published content on first load.

Three integration paths

Embed your first widget

5-minute quick start with @rulecms/widget-react

HomepageHero.tsxTSX
import { RuleCMSWidget } from "@rulecms/widget-react";export function HomepageHero() {  return (    <RuleCMSWidget      publishedKey="your-widget-key"      ...    />  );}

Headless fetch via the content API

fetch-widget.jsJS
// Fetch published widget content via the headless APIconst widget = await fetchPublishedWidget({  publishedKey: "your-widget-key",  token: "your-environment-token",});// Returns published JSON ready to render in any framework

Example integrations exist for popular JavaScript frameworks. The headless content API is the universal path when you are not using the React SDK — no proprietary stack required on your side. For React-specific craft, see our engineering notes on derived state vs useEffect and JavaScript design patterns.

Bring your design system into the CMS. Read about custom component libraries and environment tokens. For host-app hardening, see our note on CSP nonces in Next.js. For copy-ready motion and surface patterns, browse the reusable CSS effects gallery. New to productized models? Start with building your first AI-backed UI.

Explore RuleCMS

Dive deeper into what makes RuleCMS different.

Start building with RuleCMS

Provision three environments and API tokens in one sign-up step.