DRUPAL CANVAS · LIVE PREVIEW · YOUR COMPONENTS

Edit your pages
like a designer

Drupal Canvas is Drupal's visual page builder. Decoupled.io connects it to your Next.js or Astro frontend, so editors arrange your components and see your real site as they work.

The preview is rendered by your own frontend — the same components that ship to production.

Try it free Read the docs

your-site/canvas

Live draft preview

Draft and publish

Next.js and Astro

Open source

How it works

Three ways Canvas
changes page editing

Drag. Preview. Publish. No templates, no handoffs, no re-deploys.

Drag-and-drop sections

Hero, card groups, stats, testimonials, pricing, FAQs — every component your frontend ships is in the library. Insert it, drop cards into its slots, reorder with a drag.

Your real site as the preview

Canvas loads your Next.js or Astro app in the preview frame, draft included. What an editor sees is what visitors will see — not a mockup of it.

Draft, review, publish

Every change is auto-saved as a draft. Review your changes, publish when ready, and the frontend revalidates the page. Visitors never see work in progress.

Under the hood

Your components.
Drupal's editor.

The component library comes from your frontend, so it never drifts from what your site can render. A component is a folder: a component.yml that describes its fields and slots, and the implementation next to it.

Fields become the editing form

Text, rich text, links, selects, checkboxes, numbers and images — each field type in component.yml maps to an editor control.

Slots for nested components

Cards inside a card group, tiers inside a pricing section, questions inside an accordion. Editors add as many as they need.

Media library and SEO built in

Images come from the Drupal media library, and page title, URL alias and SEO fields sit alongside the layout.

Ships with every space

Pick a starter when you create a space: Canvas is connected, the components are synced and the sample pages are imported for you.

canvas/call-to-action/component.yml

name: Call to Action
machineName: call_to_action
status: true
required:
  - title
props:
  properties:
    title:
      title: Title
      type: string
      examples:
        - Ready to get started?
    buttonText:
      title: Button text
      type: string
    buttonUrl:
      title: Button link
      type: string
      format: uri-reference
slots: {}

The editing flow

From idea to live page.
No deploy.

1
Create a space in the dashboard and pick the Next.js or Astro starter as its frontend.
2
Open Canvas from your Drupal site. Your frontend loads in the preview, with the sample pages already there.
3
Insert components from the library on the left and fill in their fields on the right. The preview updates as you type.
4
Every change is saved as a draft that only you see. Visitors still get the published page.
5
Click Review changes, then Publish. The frontend revalidates and the page is live.

FAQ

Questions, answered

Where does the content live?

In Drupal. Each page is stored as a component tree — which components, in which order, nested in which slot, with which field values. Your frontend asks Drupal’s content API for a path and renders the components it gets back.

Can I use my own components?

Yes — that’s the point. A component is a folder with a component.yml (its fields and slots) and its implementation, index.tsx in Next.js or index.astro in Astro. Canvas reads the library from your app, so a new component shows up in the editor as soon as it’s deployed.

Do visitors see my edits while I’m working?

No. Every change is auto-saved as a draft and shown in the preview only to you. Visitors keep seeing the published page until you click Publish, and then the frontend is told to revalidate.

Which frontends does it work with?

Both Decoupled.io starters ship with it wired up: Decoupled Components (Next.js) and Decoupled Components (Astro). To add it to your own project, install @drupal-canvas/headless-next or @drupal-canvas/headless-astro and follow the starters as the reference.

Which browsers can edit?

Draft preview works in Chromium-based browsers such as Chrome, Edge, Arc and Brave. It relies on a partitioned cookie inside the preview frame, which Safari 18.5 to 26.1 does not support.

Is Drupal Canvas open source?

Yes. Drupal Canvas is a Drupal project released under the GPL, like Drupal itself. Decoupled.io adds a small module that registers your frontend, syncs its components and imports the starter pages.

See it on your own site.

Create a free space, pick a starter, and open Canvas. Your components and sample pages are ready in a few minutes.

Try it free See pricing