Drupal Canvas: een visuele revolutie in Drupal paginabouw
Drupal Canvas luidt een nieuwe fase in voor iedereen die dagelijks met Drupal werkt. Met deze visuele paginabouwer bouw je pagina’s rechtstreeks in de browser, precies zoals ze er voor bezoekers uitzien. Geen lange formulieren of losse velden meer, maar direct op het scherm slepen, indelen en vormgeven.
Voor redacteuren, marketeers en sitebeheerders betekent dit dat ze niet langer afhankelijk zijn van een ontwikkelaar om een pagina op te zetten. De traditionele backend maakt plaats voor een intuïtieve visuele omgeving waarin je meteen ziet wat je aan het maken bent. Elk onderdeel dat je toevoegt verschijnt direct in beeld.
Het resultaat is een veel natuurlijkere manier van werken. Je ziet meteen hoe tekst, beelden en componenten samenkomen tot een compleet ontwerp. De flexibiliteit van Drupal blijft behouden, maar het proces voelt net zo soepel als dat van moderne websitebouwers. Drupal Canvas maakt contentbeheer in Drupal niet alleen sneller, maar ook prettiger. Het geeft teams meer vrijheid, zonder de kracht van het onderliggende CMS op te offeren. In dit artikel lees je wat Canvas precies is, wat het kan en wat dit betekent voor iedereen die met Drupal werkt, van redacteur tot ontwikkelaar.
Wat is Drupal Canvas?
Drupal Canvas is de volgende stap in hoe Drupal omgaat met het bouwen van pagina’s. Tot nu toe moesten sitebeheerders en redacteuren vaak kiezen uit verschillende manieren om een pagina op te bouwen. Denk aan modules als Paragraphs, Layout Builder of aangepaste blokken. Die aanpak werkte, maar maakte Drupal ook complex en minder flexibel voor wie geen technische achtergrond heeft.
Canvas brengt hier verandering in. Het is ontwikkeld als één visueel systeem dat al die losse onderdelen samenbrengt in een overzichtelijke omgeving. Je kunt het zien als een combinatie van een layout builder en een themabouwer, direct in Drupal zelf. Het doel is simpel: pagina’s kunnen maken, aanpassen en vormgeven zonder technische kennis.
Waar Layout Builder vooral gericht was op het indelen van blokken, gaat Canvas verder. Het combineert de kracht van Drupals gestructureerde content met een moderne, visuele editor. Beheerders, marketeers en redacteuren kunnen zelf pagina’s opbouwen en opmaken, terwijl de data netjes binnen Drupals vertrouwde structuur blijft.
Canvas is bovendien volledig open source en wordt ontwikkeld door de Drupal-community. Het project begon onder de naam Experience Builder en is inmiddels uitgegroeid tot een belangrijk onderdeel van de toekomstvisie van Drupal. Tijdens DrupalCon Europe 2025 presenteerde Dries Buytaert, de oprichter van Drupal, Canvas als een van de belangrijkste pijlers binnen de Drupal Starshot-roadmap.
Die roadmap heeft één duidelijk doel: Drupal eenvoudiger maken voor niet-technische gebruikers, zonder in te leveren op flexibiliteit. Canvas speelt daarin een grote rol. Het vervangt de versnipperde aanpak van de afgelopen jaren en biedt één vaste manier om pagina’s te bouwen.
Tijdens DrupalCon Vienna 2025 werd Canvas voor het eerst officieel gedemonstreerd. De reacties waren enthousiast. Bezoekers zagen hoe je in de browser complete pagina’s kunt samenstellen met componenten, patronen en visuele tools, allemaal binnen Drupal zelf.
Belangrijkste mogelijkheden en voordelen
Drupal Canvas introduceert een nieuwe manier van werken die zowel krachtig als gebruiksvriendelijk is. Het combineert de flexibiliteit van Drupal met de eenvoud van een moderne visuele editor. Hieronder staan de belangrijkste mogelijkheden en voordelen samengevat.
Visueel bouwen met directe preview
Met Canvas bouw je pagina’s door onderdelen te slepen en neer te zetten op het scherm. Terwijl je werkt, zie je direct hoe de pagina eruitziet. Het systeem is gebouwd met React (een frontend techniek die we bij Emble ook veel inzetten voor het ontwikkelen van decoupled websites ) en werkt real time. Voeg je een afbeelding, tekst of component toe, dan verschijnt die meteen in de preview. Er is dus geen verschil meer tussen de bewerkmodus en de weergave voor bezoekers.
Herbruikbare componenten en patronen
Canvas maakt gebruik van componenten: bouwstenen zoals hero-banners, tekstblokken, call-to-actions of lijsten met items. Ontwikkelaars kunnen deze componenten vooraf definiëren, zodat redacteuren en marketeers ze eenvoudig kunnen gebruiken en combineren. Daarnaast zijn er patronen, combinaties van meerdere componenten die samen een complete sectie vormen, zoals een header met beeld en tekst of een kolommenoverzicht. Met één klik kun je zo’n patroon toevoegen en aanpassen aan de eigen inhoud. Dat versnelt het werk en zorgt voor een consistente uitstraling op alle pagina’s.
Flexibel uitbreiden met codecomponenten
Hoewel Canvas bedoeld is voor no-code gebruik, biedt het ook ruimte voor maatwerk. Ontwikkelaars kunnen binnen de interface eigen componenten schrijven met HTML, CSS en JSX (de taal die React gebruikt). Zo kan een team bijvoorbeeld een interactieve slideshow of een dynamische lijst toevoegen zonder dat daar een apart ontwikkeltraject voor nodig is. Canvas ondersteunt daarnaast Single Directory Components (SDC’s). Dit zijn componenten die in het thema of in een module worden opgeslagen, compleet met Twig-sjabloon, configuratiebestand en optioneel script of stijl. Deze methode sluit aan op de bestaande Drupal-thema’s en maakt het eenvoudig om een herbruikbare bibliotheek van design-elementen te beheren. Het mooie is dat beide werelden samenkomen. Ontwikkelaars hebben controle over de techniek, terwijl redacteuren de componenten eenvoudig kunnen gebruiken en combineren.
Volledige integratie met Drupal
Canvas werkt niet los van Drupal, maar bouwt juist voort op de bestaande structuur. Content die via Canvas wordt aangemaakt blijft onderdeel van Drupal. Je kunt nog steeds gebruikmaken van velden, inhoudstypen en weergaven. Zo kun je bijvoorbeeld een lijst van nieuwsartikelen als component opnemen in een Canvas-pagina. Ook de rechtenstructuur en workflows van Drupal blijven van kracht. Teams kunnen bepalen wie met Canvas mag werken, wie wijzigingen mag goedkeuren en wanneer content wordt gepubliceerd. Zo behoudt een organisatie grip op kwaliteit en consistentie, terwijl het werkproces veel flexibeler wordt.
Minder afhankelijk van developers
Door de visuele aard van Canvas kunnen teams sneller werken. Een marketeer kan zelfstandig een campagnepagina opzetten zonder dat daar eerst een ontwikkelaar aan te pas komt. Dit verkort de doorlooptijd enorm. Voor site-eigenaren betekent dit dat ze sneller kunnen inspelen op nieuwe campagnes of veranderingen in hun organisatie. Ontwikkelaars kunnen zich ondertussen richten op structurele verbeteringen, terwijl contentteams zelf aan de slag gaan.
Slimme AI-ondersteuning
Canvas bevat optionele AI-functies die het werk nog verder kunnen versnellen. De AI kan helpen bij het genereren van lay-outs, het vertalen van ontwerpen uit tools als Figma of zelfs het schrijven van tekst en het maken van componenten op basis van een korte beschrijving. Daarnaast kun je een eigen toon en schrijfstijl instellen in het Context Control Center. Alle AI-suggesties houden daar rekening mee, zodat teksten altijd aansluiten bij de merkidentiteit van de organisatie. Voor redacteuren en marketeers betekent dit dat ze sneller pagina’s kunnen opbouwen, teksten kunnen laten herschrijven of ideeën kunnen laten visualiseren, zonder dat ze daarvoor externe tools hoeven te gebruiken.
Technische impact en implementatie
Drupal Canvas is nog in ontwikkeling, maar inmiddels ver genoeg om te testen en zelfs in te zetten op bestaande Drupal 11-sites. De module bevindt zich nu in de release candidate-fase (RC3) en de eerste stabiele versie wordt eind 2025 verwacht. Naar alle waarschijnlijkheid wordt Canvas standaard onderdeel van Drupal 12, de volgende grote release die gepland staat voor begin 2026.
Voor organisaties met een bestaande Drupal-site betekent dit dat Canvas niet vanzelf alle huidige pagina’s overneemt. Het is geen automatische vervanging van bestaande modules zoals Paragraphs of Layout Builder. Canvas introduceert een nieuw contenttype, vaak aangeduid als Canvas Pages, waarop de visuele editor van toepassing is. Bestaande inhoud blijft dus gewoon werken zoals voorheen.
Wie Canvas wil gebruiken, kan ervoor kiezen om het stapsgewijs in te voeren. Een slimme aanpak is om te beginnen met nieuwe onderdelen, zoals landingspagina’s of campagnesecties. Zo kunnen redacteuren en marketeers ervaring opdoen, terwijl het development team werkt aan een bibliotheek van herbruikbare componenten.
Werk voor developers: de componentenbibliotheek
Hoewel Canvas gericht is op selfservice voor redacteuren, vraagt de implementatie wel voorbereiding door ontwikkelaars. Het belangrijkste onderdeel is het opzetten van een componentenbibliotheek: een verzameling van herbruikbare elementen die passen bij de huisstijl en contentbehoeften van de organisatie.
Er zijn twee manieren om die componenten te maken:
Single Directory Components (SDC’s)
SDC’s worden door developers vastgelegd in de code van de site, binnen het thema of in een module. Elke component bestaat uit een Twig-template, een YAML-bestand met instellingen en eventueel extra scripts of stijlen. Zo’n component kan bijvoorbeeld een kaart, knop of hero-blok zijn dat precies aansluit op de huisstijl.
Codecomponenten in Canvas zelf
Ontwikkelaars kunnen ook direct in de Canvas-interface componenten schrijven met HTML, CSS en JSX. Canvas gebruikt hiervoor een ingebouwde editor die lijkt op moderne front-end tools. Dit maakt het mogelijk om snel kleine uitbreidingen of variaties te maken zonder dat er een hele ontwikkelcyclus nodig is.
In de praktijk worden beide manieren vaak gecombineerd. De basiscomponenten worden vastgelegd in SDC’s, terwijl kleinere aanpassingen of tijdelijke elementen in Canvas worden aangemaakt. Het kost wat tijd om de bibliotheek op te zetten, maar daarna levert het veel tijdwinst op.
Canvas in Drupal 12
Drupal Canvas staat op het punt een vast onderdeel van Drupal te worden. Volgens de huidige planning verschijnt de eerste stabiele versie eind 2025. Begin 2026 wordt Canvas standaard opgenomen in Drupal 12, dat ook bekendstaat als Drupal CMS 2.0. Deze release markeert een belangrijk moment: Drupal wordt niet alleen krachtig en flexibel, maar ook gebruiksvriendelijk voor iedereen die met content werkt. Canvas vormt samen met een aantal andere initiatieven het hart van deze nieuwe generatie Drupal. Naast Canvas worden namelijk ook Site Templates en Recipes geïntroduceerd.
Conclusie
Drupal Canvas markeert het begin van een nieuw tijdperk voor iedereen die met Drupal werkt. Waar het CMS vroeger vooral bekendstond om zijn kracht en technische mogelijkheden, laat Canvas zien dat gebruiksvriendelijkheid daar perfect naast kan bestaan.
Met Canvas wordt het bouwen en beheren van pagina’s een visuele ervaring. Redacteuren en marketeers kunnen zelfstandig werken, direct zien wat ze maken en binnen enkele minuten een complete pagina opzetten. Ontwikkelaars blijven belangrijk voor het neerzetten van de basis en het bouwen van componenten, maar het dagelijkse werk verschuift naar de mensen die de inhoud creëren.
De voordelen zijn duidelijk: meer snelheid, minder afhankelijkheid, lagere onderhoudslast en een website die eenvoudiger kan meegroeien met nieuwe ideeën of campagnes. Canvas zorgt bovendien voor een betere samenwerking tussen teams. Content en design komen dichter bij elkaar, en dat levert consistentere en aantrekkelijkere websites op.
Natuurlijk vraagt deze nieuwe manier van werken om voorbereiding. Teams moeten nadenken over componenten, huisstijlrichtlijnen en publicatieprocessen. Maar de beloning is groot: een toekomstbestendig Drupal-platform dat krachtig blijft, terwijl het werken ermee flexibeler en intuïtiever wordt.
Heb je vragen over Drupal Canvas? Stel ze gerust in het reactie gedeelte onderaan deze pagina. Ik beantwoord je vragen graag. En zoek je meer persoonlijk advies voor jouw Drupal project of applicatie? Dan kun je contact opnemen met ons via sales@emble.nl
Bronnen:
- Drupal.org – Canvas projectpagina
- Dries Buytaert – State of Drupal presentatie, oktober 2025
- The Drop Times – Visual building with Canvas en roadmap naar Drupal 12
- Rollin.org – Official recap of Canvas release candidate launch and AI-powered capabilities
- WebWash.net – Drupal CMS v2 alpha release en Canvas introductie
-1980x1112.webp&w=2048&q=75)
