Skip to content
Drupal Canvas

Headless

Build decoupled frontend apps on top of Drupal Canvas with the Headless SDK. The Canvas Headless module lets the Drupal Canvas editor embed your app, so editors preview their work — draft content included — rendered by the app itself, with the app’s components registered in Canvas.

Set up a frontend app

FAQ

Key concepts

Section titled “Key concepts”
  • Draft preview - Editors preview draft content rendered by your app, with the markers and geometry Canvas needs for selection and drag-and-drop.
  • fetchPage() - Requests page content from Drupal, returning route context, document-head data, and a Canvas component tree when Canvas renders the route.
  • fetchEntity() - Renders one specific content entity in a content template view mode, such as a teaser.
  • Component metadata endpoint - Exposes your app’s components to Canvas so editors can place them on pages.

Framework adapters

Section titled “Framework adapters”

Install the framework adapter for your stack:

Enable the canvas_headless submodule so the editor can embed your frontend app and register its components.

In this section

Section titled “In this section”
  • Setup - scaffold an app, register it with Canvas, and place your own components on a page.
  • FAQ - the errors and frontend statuses that come up most often, and what each one means.