Canvas Studio turns Drupal Canvas into a visual design-system editor: style components — layout, spacing, colour, borders, effects and responsive breakpoints — from a clean settings panel, without writing CSS.

Site builders get Figma-like control over how Canvas components look, while the rendered output stays clean, framework-native CSS.

Structure — the four layers

Canvas Studio is organised as four layers, packaged as two projects, so you install only what you need:

L1 · Value vocabularies — the neutral design tokens (spacing, primary, md, flex…). This project.
L2 · Output mappings — token → CSS-class presets, one set per CSS framework. A framework bundle.
L3 · Editor control skin — the look of the prop panel; swappable. This project (canvas_studio_skin_default).
L4 · Component library — the SDC components that render the markup. A framework bundle.

The key idea: a component stores only L1 tokens — never framework classes. L2 turns those tokens into classes and L4 renders the markup at request time, so the framework, its component library and the editor skin can each be swapped without touching your content.

This project (canvas_studio) is the framework-agnostic base — L1, the editing engine, and the default L3 skin. A framework bundle adds L2 + L4. (now the Canvas Studio Tailwind module that is compatible with Byte theme

Features

Visual prop editor — per-component controls for Layout (flex/grid, justify, align, gap), Spacing, Sizing, Background (colour, image, overlay, gradient), Borders, Effects, Position, Typography and Visibility.
Responsive by breakpoint — set mobile, tablet and desktop independently, inheriting from smaller sizes up.
Swappable control skin — the panel's look is a separate, framework-agnostic skin you can restyle or replace.
Framework-pluggable — the same editor drives any CSS framework; ship Tailwind today, add Bootstrap or your own later.
Reusable prop bundles — shared groups of props are declared once and discovered automatically, with no per-component boilerplate.

Reach for it when you want site builders to compose and style pages inside Drupal Canvas without hand-written CSS, backed by a consistent, token-driven design system.

Post-Installation

Canvas Studio has no front-end of its own — it enhances the Drupal Canvas editor. With this project, a framework bundle and a skin enabled:

Open a page in the Canvas editor and select a component.
The right-hand Settings panel shows the prop groups (Layout, Background, Borders, …) and a breakpoint switcher for responsive values.
Changes preview live and are stored on the component — no new content type or field setup.

Optionally, administrators can override the CSS class emitted for any token at Configuration → Canvas Studio → Prop Class Mappings (/admin/config/canvas-studio/prop-classes).

Additional Requirements

Drupal Canvas (^1.9) and Drupal core ^11.
A framework bundle (L2 + L4) — the base renders nothing on its own. Install one, e.g. Canvas Studio Tailwind.

Canvas Studio Tailwind runs on the Byte theme — it uses Byte's Tailwind build and its icon / branding partials. When you enable it, disable or delete the Canvas components that ship with the Byte theme so they don't duplicate the bundle's own components.

Recommended modules/libraries

Canvas Studio Tailwind — the reference framework bundle (Tailwind mappings + component library), unless you are building your own.

Similar projects

Canvas Studio builds on Drupal Canvas rather than replacing it. Unlike styling by hand-editing component Twig, or via Layout Builder, it gives a visual, per-property editor with responsive controls and a swappable editor skin.

Supporting this Module

Contributions are welcome — please file issues and open merge requests in the project's issue queue.

Community Documentation

Developer and user docs ship with the module: docs/architecture.md (the layers and extension contracts), docs/adding-a-framework.md (build a Bootstrap or custom bundle) and docs/user-manual.md (using the prop panel).

Canvas Studio