Canvas Studio
Get notified
Menu

A visual page builder for Craft CMS

Build custom layouts.
Right inside Craft CMS.

Canvas Studio is a visual page builder plugin for Craft CMS (opens in a new tab). Compose with visual building blocks and make them your own with a shared design system. Give every page the freedom it needs, without building a new page builder for every project.

Start with a section. Keep building.

Try the controls below. Your changes appear live.

Start with the layout.

Sections, rows, columns and modules give you the building blocks. Change the layout, reorder the content, adjust proportions or add another section. The design comes from how you put the pieces together.

Your section / Image + Text + Button

Base layout · 12-column grid
formaArchitecture with intention
Repeating concrete arches beneath a blue sky
Space to be yourself

Spaces for a slower life.

Thoughtful spaces. Natural rhythms. A little more room for what matters.

Explore our approach
Considered spaces. Lasting impressions.01 / 06

An image and text share one row. Try changing their order, proportions or spacing.

A simplified demonstration, not the actual editor. Your choices carry between steps.

The system behind the canvas

Your choices.
A common language.

Define the foundations once, then compose with them across your pages. A theme gives the whole site a shared vocabulary while leaving each layout open to your ideas.

01 / Colors & type

Give every choice
your signature.

Build a palette around your brand. Bring in your fonts. Define heading and paragraph defaults, then create named text styles for the moments that need their own voice.

Titles, captions and supporting text can each start from a choice you’ve already considered.

Theme / Identity

Illustrative preview

Brand palette

Ink
Paper
Accent

Display / Heading style

Distinctly
your own.

Body / Paragraph default

A shared visual language, with room for every page to have its own character.

Explore the collection

Ink, Paper and Accent give this composition a common palette.

02 / Spacing & shape

Set the rhythm.
Keep the freedom.

Start with a spacing base and define density presets. Give gaps and corner radii useful names, so the details feel related even when the layouts are different.

Try a more generous density, then soften the corners. The same content takes on a different feel.

Theme / Dimensions

Illustrative preview

Concrete facade in warm light

Form & feeling

Room to breathe.

A few thoughtful details can change the whole composition.

View the project
4 px base × 1 densitySpacing unit 4 px

Padding uses 6 spacing units; the image-to-text gap uses 4. Named gaps and radii are separate theme definitions.

03 / Grid & breakpoints

Your grid.
Your turning points.

Choose a theme grid from 1–24 columns. Name your breakpoints and define their widths in px, rem or em. Adjust the layout and container padding where the design needs it.

The grid stays consistent. Your composition can change: side by side on a wide screen, stacked with closer edges on a compact one.

Theme / Layout

Illustrative preview

Concrete arches repeating into the distance

Designed to adapt

A place for
every idea.

One grid. Different arrangements.

Wide / Base layout

12-column theme grid. Each item spans 6 columns; container padding is 32 px. Preview scaled to fit.

04 / Reusable compositions

Keep it connected.
Or make it your own.

Save a composition as a linked Component when its design should stay shared. Use a Static block when you want an independent copy to reshape for the page.

Linked placements can keep local content and images. Their structure and design belong to the master. A Static copy can go its own way.

Library / Reuse

Illustrative preview

Component master

Featured story

Design 01

Linked Component

Spaces for living.

Local headline.
Shared design.

Static block

A fresh perspective.

Independent content.
Independent design.

Both begin with the same design. Update the master to see which stays connected.

Made to belong in Craft

A canvas in your entry.
A place in your workflow.

Canvas handles the visual composition. Craft continues to manage your entries, assets, sites and publishing.

Your content, close at hand.
Use Craft Assets, image transforms and native links as you compose. Keep visual content within your entries and their draft and revision workflow.
Layouts that travel across sites.
Choose shared layouts with local content overrides and site-specific visibility where needed.
Reusable beyond the canvas.
Render a composition field in Twig, or use a saved Component on a custom template, including a shared header.

Works with your templates.

Render a Canvas field{{ craft.canvasStudio.render(entry.pageCanvas) }}
Render a saved Component{{ craft.canvasStudio.component(componentUid) }}

Use your own Canvas field handle and saved Component UID.

Planned additions

More ways
to get started.

A growing library is planned to bring more starting points to your canvas.

Templates to make your own.
A continually expanding collection, with dedicated header and footer sections.
Components connected to entries.
Choose an entry and use its content in a Component, such as a product card with its title and image.

Behind the canvas

Why we’re building
Canvas Studio.

How shared design definitions, responsive layouts and reusable components can change the work of building pages in Craft CMS.

Read the introduction

Canvas Studio for Craft CMS

Less setup.
More room to create.

Get a first look at the editor and hear when Canvas Studio launches.