Skip to content

Drupal 11 · Canvas · Tailwind v4 · GPL

Drupal your editors will actually love

A project template that pairs Canvas page building with a Tailwind design system — 24 schema-guarded components your team composes in the CMS. One command lands a complete five-page demo site.

Get started on GitHubHow it works
# a working Drupal site, three commands
$ git clone https://github.com/nextagencyio/drupalx-project.git
$ cd drupalx-project && ddev start
$ ddev install
# → five-page demo site · admin / admin

24

Canvas-ready components

5

demo pages on install

0

CDN dependencies

GPL

open source, like Drupal

The DrupalX demo homepage — split hero with photo card and stat chip

Why DrupalX

Not a blank theme. A working system.

The Canvas editor: component layers, the live page, and a settings form

Editors compose real pages in Canvas

Drupal's Experience Builder, loaded with a component library that was designed for it. Drag from the library, edit props as plain form fields, nest cards into grids — the developer round-trip is gone.

Aa

A real design system

Fraunces display + Inter body, a full brand scale, two wayfinding color families — all Tailwind v4 tokens in one file.

CDN dependencies

Self-hosted variable fonts, Lucide icons inlined as SVG at build time, width-stepped WebP images via dx_image. Fast is the default.

Guardrails for editors

Schema-validated props: enums become selects, images use the media library, repeatable content is real nested components. On-brand is the only option.

$ npm run dev # :5050, live reload

Design without Drupal running

The same Twig renders in a Twing static workbench — iterate on components in milliseconds, then drush cr puts them in the editor.

The component library

24 components, all Canvas-ready

Read the component reference
  • Hero — glass / split / darkPage heroStat bandStatCard gridCardNews cardEvent cardSplitCall to actionQuoteRich text
  • GalleryAccordionAccordion itemAlert bannerDocument listDocument itemButtonHeadingIconImageDividerSpacer

components/button/button.component.yml

props:
  label:
    type: string
    title: Label
  url:
    format: uri-reference
  variant:
    enum: [primary, accent, ghost, glass]
  icon:
    enum: [none, arrow-right, …]
The same Button component in the Canvas editor: Label and URL fields, a Style variant select showing 'Glass (over photo)', Size and Trailing icon selects
…becomes the edit form

The theming system

Rebrand in one file

Every brand decision is a token. These are the same components — the starter palette and a cedar-green city brand, one CSS block apart.

/* global.css — the whole brand */
@theme {
  --color-primary-500: #106efd;
  --color-accent-500:  #41e2f8;
  --font-display: 'Fraunces Variable';
  /* + sky & clay wayfinding families */
}
The DrupalX demo homepage in the default blue starter brand
The starter
The same components rebranded as a cedar-green municipal site
One token block later

The workflow

Install to editing in minutes

  1. Install

    One command builds Drupal 11 + Canvas and imports the five-page demo — pages, media, menus, the lot.

    $ ddev install
    ✓ 5 pages · 10 media · main menu — ~4 min

  2. Compose

    Open any page in the Canvas editor. Drag components from the library, edit props as form fields, nest cards into grids.

    # no code from here on
    Library → Card grid → drop → Publish

  3. Extend

    New component = one folder: a schema + a Twig file. Preview it in the live-reload workbench, then clear caches.

    $ mkdir components/team_card
    $ ddev drush cr # it's in the editor

The editing experience

What your editors see

The Drupal Canvas editor showing the DrupalX demo homepage with the component layers panel and a Button component's settings form open

↖ Every component, a layer

Enums become selects →

The live page, mid-edit

FAQ

Frequently asked questions

The short version: it's a template you own, editors can't break it, and Node is optional.

More in the README
Is DrupalX a Drupal distribution?
No — it's a Composer project template. You clone it and own the code: the theme, the components, and the recipe live in your repository, so there's no distribution lock-in and nothing upstream can break your site.
What is Canvas?
Canvas is Drupal's Experience Builder — the visual page-building initiative for Drupal core. Editors compose pages from components: drag from the library, edit props as form fields, nest components into slots. DrupalX ships a component library designed for it.
Do I need Node.js to run the site?
No. The theme's compiled assets are committed, so Drupal renders with zero Node builds. You only need Node when changing the theme (Tailwind rebuild) or using the static preview workbench.
Can editors break the design?
Not really — components expose schema-validated props, not free-form HTML. Enums render as selects, images go through the media library, and repeatable content is real nested components. The design system is enforced by the schemas.
How do I rebrand it?
Recolor one token block in the theme's global.css (a primary scale, an accent scale, two wayfinding families), swap the font packages and logo, and rebuild. The whole site re-skins.
What's the license?
GPL-2.0-or-later, the same as Drupal. Free for any use, including client work.

Free & open source · GPL, like Drupal

Your next Drupal site is three commands away

$ git clone https://github.com/nextagencyio/drupalx-project.git
$ cd drupalx-project && ddev start
$ ddev install  # → five-page demo · admin / admin

Walk through the five-page demo with your team. Rebrand it Monday.

Clone the templateRead the quick start

GPL-2.0-or-later · free for client work · no lock-in