Canvas Studio

Canvas Studio builds on the Drupal Canvas foundation to deliver a complete, Drupal-native page editor. It pairs an advanced component library (today through Tailwind CSS, with other frameworks to follow) with professional design controls, so site builders can create polished, production-quality pages with no developer work. The goal is a visual page-building experience on par with the best paid editors, fully native to Drupal, open source, and free of the lock-in that comes from writing framework classes into your content.

this project works in combination with Canvas Studio Tailwind module for now to deliver the components and classes for Tailwind-based themes like Byte Theme.

Every major web platform now has a powerful visual page editor. WordPress has Gutenberg and Elementor; hosted platforms like Webflow, Wix, and Squarespace were built around visual page building. These tools let people design and ship professional pages without writing code, and they have set the expectation for what modern content teams want.

Drupal now has an excellent native foundation for this in Drupal Canvas. On its own, Canvas is a strong baseline: a native visual canvas to build on, but not yet a complete page-building experience with a professional component set and rich design controls.

Canvas Studio reaches that goal through one architectural choice: content stores framework-neutral design tokens, not CSS classes. The meaning of a component ("primary background", "large gap", "rounded corners") lives in your content, while the CSS framework that renders it stays a swappable layer. The result is a professional authoring experience for site builders and a clean, testable architecture for developers.

The Canvas Studio prop panel: grouped, professional design controls inside the Canvas editor.

Why Canvas Studio

Canvas Studio is built to make professional, developer-free page building the standard on Drupal Canvas:

• Professional pages without code. A rich prop panel and an advanced component library let site builders produce polished, responsive pages that would otherwise need custom development.
• Framework-neutral storage. Components persist neutral tokens, never framework classes. Change or replace your CSS framework without migrating a single piece of content.
• Extensible by design. Add your own framework bundle or editor skin as an independent project. Nothing is hard-coded to one CSS framework or one look.
• Deploy and versioning tooling. A Drush command suite reconciles component versions, gates deployments, and audits content data-quality, so upgrades and refactors cannot silently break stored content.
• Production-grade quality. Static analysis at PHPStan level 6 with no baseline, a Kernel and JavaScript test suite, continuous integration, a sanitizer deny-list, and accessibility and right-to-left awareness throughout.

The four-layer architecture

Canvas Studio separates meaning from presentation across four layers:

• L1, neutral tokens. The vocabulary stored in content (for example primary, md, flex). Defined as JSON Schema definitions.
• L2, token-to-class mappings. A per-framework preset that translates tokens into CSS classes at render time. Discovered, not hard-coded.
• L3, editor skin. The look of the prop panel, themed with its own tokens and independent of any front-end framework.
• L4, SDC components. Single-directory components that carry the framework markup and pull their editable properties from the token vocabulary.

The invariant that ties it together: stored component data holds L1 tokens only. L2, L3, and L4 are all replaceable around that stable core.

The four layers across two projects: the base ships L1 tokens and the L3 skin, a framework bundle ships L2 mappings and the L4 components. Content stores L1 tokens; L2 maps them to classes at render time.

A real design-system editor

The prop panel gives site builders the kind of control that usually requires a developer, directly in the Canvas editor:

• Per-breakpoint responsive controls with an explicit "inherit" option, so authors set a value once and refine it per screen size.
• Purpose-built controls: dimension, color picker with theme swatches, sizing categories, a position grid, and a gradient editor.
• Reusable patterns and a curated component library, so teams compose pages from a consistent kit.

Built-in tooling

Canvas Studio ships the operational tooling a design system needs in production, as Drush commands:

• drush cs-sync, reconcile stored component-version pins after component definitions change.
• drush cs:cv, a version-integrity gate that fails a deployment if any orphaned version pin remains.
• drush cs:audit, a read-only content data-quality audit (schema validity, rendered-class analysis, responsive defaults, version orphans).
• drush cs:gen-bundle, scaffold a new framework bundle.
• drush cs:doctor, an upgrade pre-flight that checks the Canvas integration seam.

Extensible by design

A framework bundle is just a mappings preset plus an SDC component library, so supporting a new CSS framework is data and components, not a fork. A Tailwind bundle is available today (Canvas Studio Tailwind); other frameworks and additional editor skins can be added as their own projects without changing the base.

Quality and security

• PHPStan level 6 with no baseline, plus a Kernel and JavaScript test suite and continuous integration.
• A centralized sanitizer with a protocol deny-list for all link and style output.
• Accessibility built in (accessible names for interactive regions) and logical CSS properties for correct right-to-left rendering.

Getting started

Requirements: Drupal core ^11, drupal/canvas ^1.9, PHP 8.3+.

composer require drupal/canvas_studio drupal/canvas_studio_tailwind
drush en canvas_studio canvas_studio_tailwind

Install this base together with a framework bundle (Tailwind is the reference bundle). The base module provides the engine, the prop system, and the default editor skin.

Project family

• Canvas Studio Tailwind, the reference Tailwind framework bundle.
• More framework bundles and editor skins are on the roadmap and can be built by the community.

Status and roadmap

Canvas Studio is in beta and moving toward a stable 1.0.0, with the goal of becoming the standard way to build professional, design-system-driven pages on Drupal Canvas. It is feature-complete with a validated upgrade path; APIs may still change before 1.0.0, and only stable releases are covered by Drupal's security advisory policy. Feedback and issues are welcome in the issue queue.