Structured content for any front end. Open source, end to end.

Drupal CMS is the content backend: content types, workflow, permissions, revisions, and translation, ready on day one. You build the components. Editors build the pages with them in Drupal Canvas, and see every draft in your real front end.

Get started

my-site: drupal cms

$ ddev composer create-project drupal/cms$ ddev composer require drupal/simple_oauth \    drupal/custom_elements$ ddev drush pm:install canvas_headless→ https://my-site.ddev.site

my-app: next.js

$ npx @drupal-canvas/create my-app \    --template nextjs \    --site-url https://my-site.ddev.site$ cd my-app && npm run dev→ http://localhost:3000$

Pick your front end

Headless with Canvas

Your app renders the pages from the same content. Editors still compose them in Canvas from your components and preview drafts in your app. One scaffold command per framework.

Rendered by Drupal Drupal serves the finished pages, themed with Twig and single-directory components.No separate front end to build, host, or deploy.

Either way, editors work in Drupal and nothing reaches visitors until it is published. Choose your front end compares the two in depth.

Framework native

Adapters for Next.js, Astro, Nuxt, TanStack Start, and Angular. One call fetches a page, and your own components render it.

Visual editing in your app

Editors compose pages in Drupal Canvas and preview drafts rendered by your front end, with no API key stored in the app.

Content model in git

Content types, fields, permissions, and workflows export to YAML and ship through pull requests. Recipes package them for reuse.

Open source, all of it

Workflow, revisions, permissions, translation, and visual page building are part of the project, not a paid tier. Host it anywhere.

Choose your path

Pick the track that matches what you want to build. Every track starts from a working Drupal 11 site and ends with something you can ship.

Set up a local environment with DDEV and Composer, learn the anatomy of a Drupal project, and build something in your first hour, no code required.Render Drupal content in Next.js, Astro, Nuxt, or TanStack Start. Editors build pages from your components in Drupal Canvas and preview drafts in your app.Back-end PHP development: routes, forms, plugins, entities, services, and a seven-part tutorial that takes you from scaffold to tested, shippable module.Front end the Drupal way: Twig templates, single-directory components, asset libraries, and JavaScript behaviors, taught through building a real theme.The guide for editors and site owners: content, page building, workflow, search optimization, and updates. It applies whether Drupal or your own front end renders the site.

Looking for API reference? → api.drupal.orgThis site covers tutorials, how-to guides, and concepts. Class, function, hook, and service reference lives on api.drupal.org, and we deep-link to it everywhere.

What’s on this site

Core ConceptsRequest lifecycle, entities and fields, plugins, services, hooks and events, render and caching, configuration, and access.

Automate & DistributeRecipes, config actions, configuration management workflows, default content, and code generation with Drush.

Deploy & OperateHosting, deployment workflow, performance and caching, security checklist, and keeping sites up to date.

ReferenceQuick lookups: annotations and attributes, common services, render array properties, and the cheat sheets you reach for mid-task.

Build with AI AgentsBuild Drupal with AI coding agents: project setup, prompting patterns, and the verification loop that keeps their output correct.

From a fresh Drupal CMS site to editors building pages in your Next.js app.

Start the quickstart

Drupal is a registered trademark of Dries Buytaert.