--- title: "Build custom layouts. Right inside Craft CMS." description: "Canvas Studio is a visual page builder plugin for Craft CMS. Create custom layouts with shared design systems, responsive controls and reusable components." url: "https://canvasforcraft.com/" --- 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](https://craftcms.com/). 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. ### Now give it your design language. Your theme defines the choices behind the controls. Change a color, a heading style or a named gap. The layout you just made stays yours. ### Make a different choice for smaller screens. Keep your base design and override what needs to change. Resize the preview, then move the breakpoint to see columns stack, spacing tighten and typography adapt. ### A good section is worth using again. Save a design as a linked Component. Use it in different page compositions, with local images and content. Update the shared design once; both placements follow. 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. 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. 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. 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. 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](https://canvasforcraft.com/journal/introducing-canvas-studio/) Canvas Studio for Craft CMS ## Less setup. More room to create. Get a first look at the editor and hear when Canvas Studio launches. [Get launch updates](https://canvasforcraft.com/#signup)