Headless & Integrations

Core includes the JSON:API module: install it, and every content entity type on the site is readable over HTTP. This section helps you decide whether decoupling is right for your project, connect a JavaScript front end with Canvas Headless so editors keep visual page building and draft preview, and work through JSON:API, authentication, and CORS.

Choose your front endDrupal-rendered, progressively decoupled, or headless with Canvas: what each gives you, what it costs, and how to choose.

Canvas Headless quickstartConnect a Next.js, Astro, Nuxt, or TanStack Start app to Drupal CMS so editors place your components and preview drafts in your front end.

How Canvas Headless preview worksThe per-editor preview credential and the component tree your app renders, so you can predict and debug what a preview shows.

Components in a Canvas Headless appMake app components placeable in Canvas, control their identity and status in component.yml, and keep them in sync.

Next.js on Drupal quickstartStand up a Next.js front end against a Drupal 11 backend: fetch content, render pages, and handle paths.

JSON:API basicsFetch, filter, sort, and paginate the resources Drupal exposes, with sparse fieldsets to keep responses lean.

JSON:API relationships and writesFollow relationships with includes, and create, update, and delete resources over the API.

Authentication and CORSOAuth2 for tokens, cookies for same-domain apps, CORS configuration, and choosing the right approach per consumer.