Drupal Canvas: Drag-and-Drop Landing Pages in Seconds

The Drupal Experience Builder has officially evolved into Drupal Canvas. In this Explainer we go through the new visual editing interface that is set to redefine how we build websites with Drupal CMS. Say goodbye to complex back-end forms and hello to a true drag-and-drop experience. We explore how Single Directory Components (SDC), Props, and Slots provide the creative freedom of a modern website builder while maintaining the enterprise power of Drupal. 📘 Read the full deep-dive blog post here: https://www.drupalforge.org/blog/buil... Try it yourself in seconds! Launch the Drupal Canvas template on Drupal Forge: https://www.drupalforge.org/template/... Timestamps: 00:00 – Introduction: What is Drupal Canvas? 01:57 – Exploring the Layer Tree and UI Layout 03:13 – Understanding SDC Components and the Diamond Icon 03:21 – How "Slots" Work: Nesting components for flexible designs 04:05 – Editing Component "Props" (Titles, Images, and Styles) 04:46 – Integrating with the Drupal Media Library 05:52 – Component Management: How to duplicate and delete 08:04 – Responsive Design: Testing mobile and tablet breakpoints 12:41 – Adding New Components: The Drag-and-Drop workflow 18:49 – Advanced: Creating React & Tailwind components in the browser 25:07 – Saving Patterns: How to reuse your favorite designs 27:48 – Moving components to Global Regions (Headers & Footers) 30:02 – Final Thoughts and Bug Reporting What you’ll learn in this video: Why the rebrand from Experience Builder to Canvas matters. How to use the new visual "Canvas" to build landing pages without code. How developers can still use React and Tailwind to extend the builder. How to use Drupal Forge to test these features risk-free in a 6-hour sandbox. Connect with us: Website: https://www.drupalforge.org #drupal #drupalcanvas #experiencebuilder #webdevelopment #opensource #nocode #drupalforge #devpanel