React Headless CMS

React powers the majority of modern web frontends, and every React application eventually needs structured content that non-developers can manage. Whether you are building with Next.js, Remix, Gatsby, or plain Vite, a headless CMS separates your content from your code — so editors can publish without pull requests and developers can build without being bottlenecked by content changes.

Decoupled.io provides a content backend built for React teams: a type-safe TypeScript client with auto-generated types, a visual page builder that renders React components, AI content generation, and 25+ MCP tools for automation.

Why Decoupled.io for React

Framework-agnostic, React-native — works with Next.js, Remix, Gatsby, Vite, Astro, or any React setup. Your framework choice does not lock you in.
Type-safe by default — decoupled-client generates TypeScript interfaces from your Drupal schema. Full autocomplete, build-time error checking, no hand-written GraphQL required.
Component-based visual editing — Puck, the visual page builder, is built with React. Editors compose pages from your component library using drag and drop. What they see is what your React app renders.
GraphQL under the hood — the typed client handles queries for you, but you can always drop down to raw GraphQL when you need full control. JSON:API is also available for simpler use cases.
Schema sync in seconds — run npx decoupled-cli schema sync after content model changes and your TypeScript types update automatically. No manual type maintenance.

Quick Start

1. Install and generate types

npm install decoupled-client
npx decoupled-cli@latest schema sync

2. Create a typed client

// src/lib/drupal-client.ts
import { createClient } from 'decoupled-client'
import { createTypedClient } from '@/schema/client'

const base = createClient({
  baseUrl: import.meta.env.VITE_DRUPAL_BASE_URL,
  clientId: import.meta.env.VITE_DRUPAL_CLIENT_ID,
  clientSecret: import.meta.env.VITE_DRUPAL_CLIENT_SECRET,
})

export const client = createTypedClient(base)

3. Use in your components

// src/components/ArticleList.tsx
import { useEffect, useState } from 'react'
import { client } from '../lib/drupal-client'
import type { NodeArticle } from '@/schema/client'

export function ArticleList() {
  const [articles, setArticles] = useState<NodeArticle[]>([])

  useEffect(() => {
    client.getEntries('NodeArticle', { first: 10 })
      .then(setArticles)
  }, [])

  return (
    <ul>
      {articles.map((article) => (
        <li key={article.id}>
          <a href={article.path}>
            <h2>{article.title}</h2>
            <p>{article.body?.summary}</p>
          </a>
        </li>
      ))}
    </ul>
  )
}

Every field autocompletes — article.body is typed as TextSummary (with .value and .summary), article.image is typed as Image (with .url, .alt, .width, .height). TypeScript catches bugs at build time, not in production.

This pattern works identically in Vite, Remix, Gatsby, or any React environment. The typed client is framework-agnostic — it just needs fetch.

Key Features

Type-Safe TypeScript Client

decoupled-client auto-generates interfaces that match your Drupal content model exactly. Text fields are { value: string }, not mystery strings. Image fields are { url, alt, width, height }. Union types for paragraph components narrow correctly. Run schema sync once — get full IDE support everywhere. Read the typed client docs.

Visual Page Builder

Puck is a React-based visual editor included with Decoupled.io. Content editors build pages by dragging and dropping components — and those components are your actual React components. There is no separate template language to learn. What editors compose in the visual builder is what renders in your application.

AI Content Generation

Decoupled.io integrates AI content tools directly into the editorial workflow. Content teams can generate draft articles, product descriptions, meta tags, and landing page copy without leaving the CMS. AI assists the process; editors control the output.

MCP Tools for Automation

With 25+ Model Context Protocol tools, AI agents can create and manage content programmatically. Build agentic workflows that draft content, upload media, configure content types, and publish — all through a structured, tool-based API compatible with Claude, GPT, and other MCP-capable models.

How It Works

Decoupled.io follows the decoupled architecture pattern that React applications are built for:

Decoupled.io (Drupal Backend)
  → Content modeling with flexible field types
  → Editorial UI for content teams
  → Schema introspection generates your typed client

React (Frontend)
  → Fetches content via typed client — full autocomplete
  → Renders with your component library and styling
  → Deployed anywhere: Vercel, Netlify, Cloudflare, S3

Webhooks + Cache Invalidation
  → Content changes trigger frontend rebuilds or cache purges
  → Users always see fresh content

Content editors work in a dedicated editorial interface designed for managing structured content. Developers work in React with type-safe access to every content field. The typed client is the contract between the two.

Get Started

Ready to add a content backend to your React application?

Read the docs — create your Decoupled.io instance and connect your React app in under 10 minutes.
Typed client guide — learn how decoupled-client gives you type-safe content fetching with zero GraphQL.
View pricing — plans for solo developers, agencies, and enterprise teams.

Stop hardcoding content in your React components. Decoupled.io gives your application structured content, type-safe access, visual editing, and AI-powered tools — with an API that works the way React developers expect.

React Headless CMS — Decoupled.io