Astro Headless CMS

Astro's static-first, zero-JavaScript-by-default approach makes it one of the fastest frontend frameworks for content-driven websites. But fast rendering is only half the equation. You also need a content backend that lets editors publish and update without rebuilding or redeploying manually.

Decoupled.io pairs with Astro to give you the best of both worlds: Astro's performance-optimized output with a full-featured content backend providing a type-safe TypeScript client, a visual page builder, AI content generation, and 25+ MCP tools.

Why Decoupled.io for Astro

Type-safe by default — decoupled-client generates TypeScript interfaces from your Drupal schema. Full autocomplete in .astro files, build-time error checking, zero hand-written GraphQL.
Static-first performance — Astro generates static HTML by default. The typed client fetches content at build time, so your pages ship with zero JavaScript overhead unless you explicitly add interactive islands.
Content collections compatibility — use Decoupled.io alongside Astro's content collections. Keep local markdown for some content and CMS-managed content for the rest.
Islands architecture support — when you need interactivity, Astro's islands load client-side framework components (React, Vue, Svelte) on demand. The typed client works identically in both static and interactive contexts.
Webhook-triggered rebuilds — connect Decoupled.io's webhooks to your deployment platform. When editors publish content, your Astro site rebuilds and redeploys automatically.

Quick Start

1. Install and generate types

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

2. Fetch content in an Astro component

---
// src/pages/blog/[slug].astro
import { createClient } from 'decoupled-client'
import { createTypedClient } from '../../schema/client'
import type { NodeArticle } from '../../schema/client'

const base = createClient({
  baseUrl: import.meta.env.DRUPAL_BASE_URL,
  clientId: import.meta.env.DRUPAL_CLIENT_ID,
  clientSecret: import.meta.env.DRUPAL_CLIENT_SECRET,
})

const client = createTypedClient(base)

export async function getStaticPaths() {
  const articles = await client.getEntries('NodeArticle')
  return articles.map((article) => ({
    params: { slug: article.path?.replace('/blog/', '') },
    props: { article },
  }))
}

const { article } = Astro.props as { article: NodeArticle }
---

<html lang="en">
  <head>
    <title>{article.title}</title>
    <meta name="description" content={article.body?.summary ?? ''} />
  </head>
  <body>
    <article>
      <h1>{article.title}</h1>
      {article.image && (
        <img src={article.image.url} alt={article.image.alt} />
      )}
      <div set:html={article.body?.value ?? ''} />
    </article>
  </body>
</html>

No hand-written GraphQL queries. The typed client gives you full autocomplete — article.body is typed as TextSummary (with .value and .summary), article.image is typed as Image (with .url, .alt, .width, .height). The result is a fully static HTML page with zero JavaScript shipped to the browser.

Key Features

Type-Safe TypeScript Client

decoupled-client generates interfaces that match your Drupal content model exactly. Every field autocompletes in your IDE, even inside .astro files. Text fields are { value: string }, image fields are { url, alt, width, height }. Run npx decoupled-cli schema sync after content model changes and types update automatically. Read the typed client docs.

Visual Page Builder

Decoupled.io includes Puck, a React-based visual editor. Content editors compose pages by dragging and dropping components in an intuitive interface. The structured data Puck produces can be consumed by your Astro templates, giving editors layout control without requiring code changes.

AI Content Generation

Generate articles, landing page copy, product descriptions, and SEO metadata directly inside the CMS. AI tools are built into the editorial workflow, so content teams draft and refine content in the same interface where they publish it.

MCP Tools for Agentic Workflows

Decoupled.io provides 25+ Model Context Protocol tools that let AI agents manage content programmatically. Automate content creation, media uploads, taxonomy management, and publishing through a structured API. Compatible with Claude, GPT, and any MCP-capable model.

How It Works

Astro and Decoupled.io follow a clean separation of concerns:

Decoupled.io (Drupal Backend)
  → Content modeling, editorial interface, media library
  → Schema introspection generates your typed client
  → Webhooks notify your deployment platform on publish

Astro (Frontend)
  → Typed client fetches content at build time
  → Generates static HTML with optional interactive islands
  → Deployed to Netlify, Vercel, Cloudflare Pages, or any static host

Build Pipeline
  → Content publish → webhook → rebuild → deploy
  → Updated pages live in seconds, not minutes

Astro's build process requests content from Decoupled.io via the typed client, generates optimized static pages, and deploys them to your hosting platform. When content editors publish changes, a webhook triggers a new build.

This architecture is particularly effective for content-heavy sites — blogs, documentation, marketing sites, and portfolios — where page speed and SEO matter most.

Get Started

Ready to power your Astro site with Decoupled.io?

Read the docs — set up your Decoupled.io instance and start fetching content in your Astro project.
Typed client guide — learn how decoupled-client gives you type-safe content fetching with zero GraphQL.
View pricing — choose a plan that matches your project, from personal sites to agency portfolios.

Astro gives you the fastest possible frontend. Decoupled.io gives you the content backend to match — with type-safe access, visual editing, and AI tools. Together, they deliver sites that are fast to build, fast to load, and easy for anyone to update.

Astro Headless CMS — Decoupled.io