Advanced Site Building with Drupal Canvas

From blank page to fully translated site, no code required — a live masterclass in Drupal Canvas, the visual builder changing how Drupal sites get made.

Ted Bowman’s session from DrupalCon Rotterdam 2026, recorded Wednesday 30 September 2026, Drupal CMS track.

 

About this session

Ted Bowman, Principal Software Engineer on the Drupal Acceleration Team at Acquia and a veteran of core initiatives like Automatic Updates and Layout Builder, opens with a deliberate constraint: no AI in this session. This is site building the hands-on way — “learn how to do it before you ask the AI to do it.” His demo site pulls shows, episodes and cast members from the TVmaze API, connected by entity references, and he starts by assembling a home page from drag-and-drop hero components: configuring props, dropping headings and buttons into slots, copying whole components, and publishing through Canvas’s review workflow, where nothing touches the live site until changes are published.

The heart of the session is content templates — Canvas taking over node view modes like full content and teaser, so a show’s page is designed visually rather than through Manage Display. Bowman links component properties directly to entity fields, including fields on referenced entities like a show’s network, and shows how Canvas enforces matching on field type, required status and cardinality. When a date field won’t fit a text property, he demonstrates the fix: a component with a static label and an open slot, so a type-specific date component drops inside. He then turns his home-page hero into a reusable pattern, rebuilds the show teaser from it, and wires up Views blocks with contextual filters so each show’s page automatically lists its own episodes and cast — including a cast-member teaser built from a designer-made, fully opinionated SDC that only needs its fields linked.

The final stretch covers page templates, where Canvas replaces the theme’s block layout entirely: Bowman imports his theme’s regions, edits them visually, then creates per-page templates including a stripped-back home page with no theme chrome at all. He closes with translation — Canvas currently supports symmetric translation, with the Canvas Translate module as a simpler alternative to TMGMT, and linked fields picking up each entity’s own translations automatically. A lively Q&A covers conditional display, per-component permissions for editors, deploying Canvas work as ordinary config and content, headless support via JSON:API, right-to-left languages, and what’s next on the roadmap: workspaces and asymmetric translation.

“So if you know Views pretty well, Canvas can be pretty powerful.”

Key takeaways

  • Canvas content templates can take over node view modes (full content, teaser) and link component props to entity fields, including fields on referenced entities, as long as field type, required status, and cardinality match.
  • An SDC with a static label and a slot avoids building a separate component for every value type, since a type-specific component (such as a date) can be placed in the slot.
  • Views blocks with contextual filters can be placed in Canvas templates; Views outside Canvas only sees Canvas-controlled view modes after the template is published.
  • Patterns are copies, not links; page templates replace the theme’s page-level template, and individual pages can select different page templates.
  • Canvas currently supports symmetric translation; the Canvas Translate module offers a simpler alternative to TMGMT, and linked field values pick up the entity’s own translation.

Chapters

  • [0:00] Introduction
  • [2:06] What Drupal Canvas does
  • [3:24] Single-directory components
  • [4:48] The TV Maze demo site
  • [5:34] Building the home page
  • [9:48] Adding a view to the home page
  • [11:10] Content templates
  • [13:15] Linking component props to fields
  • [20:21] Teaser template from a pattern
  • [23:31] How patterns work
  • [25:49] Episode templates and views with contextual filters
  • [30:00] Cast member teasers with a prebuilt SDC
  • [35:11] Page templates
  • [39:47] Per-page templates and a bare home page
  • [42:19] Translating pages and templates
  • [44:57] Q&A

Transcript

Introduction

Ted Bowman [0:04]

All right. Thank you for coming.

Speaker B (unidentified) [0:07]

Woo!

Ted Bowman [0:07]

I think there's— This is Drupal Canvas Advanced Site Building, and so welcome to my TED Talk. I'm Ted Bowman. I work at Acquia on the Drupal Applications team. tedbow on drupal.org, and I suppose other social media, though that's probably not much activity there. I'm a backend developer, site builder. Previously worked on Automatic Updates, Layout Builder, REST, Settings Tray, which maybe got removed from core recently. I'm currently working on Canvas, and I'm helping with Acquia Source internally at Acquia. I'm going to go back a little bit. So these are some other Canvas-related sessions later today. Matt has a session right after this. And then Mike has a session a little bit later. So I am not going to be talking about AI in this session. And there are obviously— I used AI to help me with my slides. But this is sort of a site building, learn how to do it before you ask the AI to do it. So you kind of know what the AI is doing.

Speaker B (unidentified) [1:15]

And so if it—

Ted Bowman [1:17]

I guess know what to ask it. Anyways, my slides are here on my GitHub, and it has the theme that I'm using, and then it has a demo, links to a demo module where you can pull in all the content. For this version of the talk, I think I actually have— there's a module that will enable the migration, and then there's a recipe inside it that then can bring in all of the finished config, though it might not be as finished as a couple days ago. I probably tweaked it, but basically you can see what I built afterwards. You can see how— you can try to rebuild it yourself or just use the recipe to just see it already built.

What Drupal Canvas does

So Drupal Canvas, a lot of people— it's more known now. So basically, it's a visual site builder, page building, AI assistant, content templater. Now we have a page templater, and now it's translatable. So pages are a new content type that Canvas provides. It's not fieldable through the UI, and you can really just start building without configuration. So usually a lot of content types, you'll start to add fields and do other configuration. And Canvas is sort of meant to be— at least the Pages part— you sort of just build straight out of the box. And the Code Component Editor, I'm not going to really go over that. There are some sessions— I'm not sure if they've already passed— about that. But you can write code in the browser, see a preview. Content templating, you can design the look of nodes. Right now you can do all the view modes for nodes, but you can't do other content types or entity types like user or terms yet. There is a module that allows you to do it for other ones, but I haven't actually tested that myself. So you could template terms and other stuff.

Single-directory components

So we're going to be using single-directory components in this one. They're a thing that was already introduced for Drupal long before Canvas. So I'm just going to give a little overview. So in this case— so all the stuff we'll see, it's pretty much the same for if it was Canvas, if it was SDCs, or code components. From the site builder perspective, it's not really that much different. You just drag stuff on and you configure it. So— so an SDC use case, you can have properties and slots. And an example SDC is like, with no props, would be like a company logo or just a static picture of a capybara. So the very simplest SDC would be like a number. You have 3 files, a YAML file, a CSS file, and Twig. This is the YAML file. And this is the Twig and the CSS. OK. So Java— for our purposes, yeah, SDCs and JavaScript components. Since we're not making the SDCs, I have a theme that already has them in there. I could have made it all in code components, and the demo that I'm going through wouldn't really have changed at all. So mostly it's going to be core and Canvas. I do introduce one contrib module at the end.

The TV Maze demo site

The demo site is going to use, like I said, my sort of theme, my module that is a TV Maze— uses the TV Maze API. This is a great API for demos, and we're going to have shows, episodes, and casts. And so basically, I want to show how you can pull in related content via Canvas. So we have the TV show, we have a person that's a cast member, and then we have an entity reference for the person to the TV show, and then we have an episode which also has an entity reference to the show. And then the TV show also has a term reference to TV genre and TV network.

Building the home page

All right. So we're going to start in creating the home page. So for this session, I have a bunch of videos with no audio. And I'm going to sort of just talk over them as we go. All right. So we're starting out with my blank TV BB site. And we're going to go to Pages inside Canvas, create a new page. And we just have a completely empty canvas. Change the title. And now we're going to just start to drag and drop components. So this theme— so let me pause it real quick. The theme came with— I added one SDC, a few SDCs. And the first one is a hero SDC. Let's drag that in again. It was really exciting. OK, great. So we have an image and basically a content area, a slot where we can drag other things. So I'm going to grab the image. And then there's a bunch of props for this SDC that we can configure on the right. One of the things I configured was I changed the image instead of being image left to be image background. And then you can see here I'm dragging a heading onto a slot. That is in the SDC. So the SDC would provide a slot that I can drag stuff onto. It doesn't work in full screen. Oh, not the full screen thing again. Okay. How did I jump so many slides? Okay. Okay. So we're editing the props of this SDC. And we're going to insert now another text component into the slot. And then we're going to drag on a button. And then we're going to change the label. So basically, for every SDC, Canvas is automatically going to look at the props and make a form for the props that you can change. So we're going to grab another hero. And again, we're gonna switch, do another image. This is the same SDC, but the— the background image of the— the background property for the image will make it either be left, right, or in the background. So we're gonna again just go through and start adding components and filling them out. And then after we have this one, we're going to actually copy the whole component as it is. So you can either do copy and paste or right-click and copy and paste. And we're going to go down to the second one. And so now we have a duplicate of that hero that we can start to tweak to make it a little bit different. I'll switch the image and I'll switch the text for all the properties. So copying and pasting inside Canvas, you can do it basically any container that you have, you can copy it and paste it other— somewhere else. And it creates duplicates of all of the components inside there. And so after we do that, I'm going to add a button to the first hero again. And I'm just going to copy that button onto the last one. And I can do Control-V or paste it in here. And so basically, we have a simple home page at this point with 3 heroes referencing media images. And then I can set it as the home page. And then nothing affects the home page— nothing affects the site outside of Canvas until I go to review my changes. And it's going to show me that I have—

Speaker B (unidentified) [9:20]

Yes.

Ted Bowman [9:21]

The video controls don't work in full screen. Sorry about that. Okay. So we're going to publish the changes, select all, and then now we're going to go to our homepage and we'll see, voilĂ , we have a sort of our first Canvas page. All right, I like whoever said that. Okay, so let's go on to the next slide, F.

Adding a view to the home page

Okay, so now we're going to add a view to our homepage. So you can sort of mix the new sort of Canvas site building with sort of old Views site building. So if you know Views pretty well, Canvas can be pretty powerful. So let's add a view to our homepage. So we're going back into Canvas and we're going to go over to the Add Components section and we're gonna look for a view called Show Teasers. And so this is a very simple view that basically just brings in the shows and shows their teasers. So right now the teasers are kind of ugly. They're not controlled by Canvas, but we're going to fix that in a second. So this is the view. It's basically no more than just the very first Views wizard where I want to say, OK, I want to show shows, and then I want to show them in the teasers. And the teaser right now is just a Manage Display teaser where it's just showing the image. So it's not great, but we're going to fix it in a second with Canvas.

Content templates

So content templates. So usually displaying nodes, either full content and teaser, you're going to do it— if you're not having another contrib module, you're going to do it on the Manage Display page. And then you can add other view modes, and you can say, OK, I want different displays for different view modes in core. And then you can add new view modes. So one thing that's really powerful with Canvas is the ability to add more view modes into— in core and then control them by Canvas. All right. So we're going to look at Canvas templates to override view modes, full, teaser, et cetera. So right now, this is the TV show full view without Canvas. It's just basically listing fields. All right, so let's make the show template. Oh, sorry, jumped ahead in the video. OK. All right, so we're going to go to the section over on the left called Templates. And it shows all of our content types. We click Add New Template. We're going to select Show, and then full content. And we're gonna start with a blank slate. And adding stuff to a template is as simple as adding to a page. We're going to add an image. And as soon as we add the image, we could upload an image, but we also have a little linker on the top here where for any field it can link to a particular field on your content type, it'll let you select that. So it won't— it knows about all the fields on show, and then any entity reference that we say the term reference, if the network had its own image, I could also reference that.

Speaker B (unidentified) [13:14]

OK.

Linking component props to fields

Ted Bowman [13:15]

So we can now switch the preview to see that, OK, yeah, for all the different TV shows, it's going to bring in the appropriate image for that TV show. And we're going to just scale it up a little bit. These are properties of the SDC. See how it looks for different shows. And now we're going to add, I think, a text area. So we'll drag the text area on there. It's going to have some sort of dummy text to start off with. And then if we look again, we can link here and we can select the summary of the show, or we can actually select the network description. So it basically knows about any references that can pull in. And it will only pull in, like, matching properties. So for a text, it's not going to bring you in a number. This SDC asks for formatted text so it knows it has the body field on the show, and then it also has the network for the show and the network's description. All right, so for linking properties, you see here on the image there was only one option because I only have one image on the show, but for the rich text for the show, I either have the show summary or I can go to the network and then go to the network term and then the term description. So I think it only goes like 2 levels deep if you're going to link fields on a content template right now. So it must match the field type, whether it's required. So basically, if the SDC says, I have a required text property here, you can't pull an optional text property from your content type. And then cardinality. If it's a multi-value field on your content type, you can't pull it into a single-value field in your SDC or code component. So right now for the shows, these are our fields. We have like date for ended, when the show ended, genre, network, official site, premiere, rating. And so we have different field types over on the right that we're going to have to match. If we want to match them, Canvas is going to look at the SDC type and then the field types here and only let us match those types of fields. OK. So we're going to add more components to our Show Full Content template. So we're going to add a button. And the button here has the option to have a link in this SDC. And here I'm going to have actually a static value, not linked to the field, official site. So they will all say official site. But for the link, I'm going to link it to a field that is actually on the show, which is the link to the official site for the show.

Speaker B (unidentified) [16:08]

And—

Ted Bowman [16:09]

went black for a second. It's a mystery. OK. OK, so now we're going to add some other stuff down here at the bottom. I think we're going to add columns so it looks a little bit better. Ah, yes, I was right. OK, so we're going to add a 2-column thing here. And then we can start to just sort of drag and drop our components onto the page— onto the columns. So now we have the button over on the left and the text on the right. And we're going to add some more stuff on the left. So I want to show the date the show premiered. And then I think the genre. So I have the genre here. And this is a— this is basically an SDC where I have 2 values, the label and the actual value that I'm going to display. So one of the— the label, I'm just going to have static be—

Speaker B (unidentified) [17:06]

Genre.

Ted Bowman [17:07]

I'm going to have my glasses, sorry, I won't be able to see you for a second. So the premiere date, and then the value I'm going to link to— and here I run into a problem. So basically what I'm finding here is that I can't actually link the value for this SDC to what I want to link it to. I want to link it to a date, but the SDC says it's a text.

Speaker B (unidentified) [17:32]

So—

Ted Bowman [17:33]

I sort of ran into a problem. Let's see how I solve it. All right, so I have another component here that is actually just a label and a slot. So I'm going to again put Premiere. And then I have a component that I can drag in there that's actually specific for dates. So I could put this date one anywhere. So I'm going to drag it into the slot that this SDC comes with. And now since this one has a date, I can link it to a particular date, or I'm gonna go the premiere date for this particular show. So having that SDC with the label, which is a static value, and then a slot means I can put anything inside there. So that sort of avoids me having to do an SDC for every particular type of thing I might want to put in that for the value there. Okay, so I'm going to make it— yeah, so I think I'm just going to add a few more things here. Again, this is the label value, but this time since it's actually a text, I'm going to say network, and then I'm going to link it to the network taxonomy term. Name. Oh, no, the network text— yeah, the network name, which is HBO in this case. And I'm gonna link that to the network official site. So I'm gonna link here. So I'm going sort of one level deep, not linking to the show itself. I'm linking to something on the network and the link on the network taxonomy term. So I'm just gonna switch here to see that, okay, yeah, when I switch between shows, it actually pulls in all the dynamic content for each individual show. OK. So we have to publish the template. So if we look at the node— I'm going to look at the node before the template. OK, nothing has changed because everything's in the autosave. And then I'm going to go over here. I'm going to go to Publish. My Review 1 change. And it's going to say you have a content template that needs to be published. And then go back here, refresh, and voilà. I have a better looking, I think, show than Manage Display. OK. So I'm going to just look at different shows and make sure everything's dynamic, nothing's static that shouldn't be static. All right. So voilà. That's content templating, and we're going to go— That's it. In a second get back to the fixing the homepage by taking over the teaser.

Teaser template from a pattern

So if you remember before when we had the homepage and we added the teasers for the shows, it was just sort of title and image and it didn't look really great. So let's fix that. Okay. So we want to fix this part here at the bottom. So we're not going to fix it on this page, but we're going to go back to templates. And we're going to add a new template for show. And we're going to take over the teaser this time. And again, we come with just sort of a blank canvas. And we can add— yeah. So what I'm doing here is I like this pattern here. So I'm going to make a pattern out of that thing on my home page with the hero. So I want the teasers for the show to kind of look like my homepage hero there. So I've created a pattern. And now when I go back to the template, I can go to Add. Instead of Components, I'm going to say Patterns. And I have my hero left pattern that I just made. And now I can start to make this stuff dynamic. So one important thing about patterns is they're not linked. Once you add them, if I edit the pattern here, it's not going to edit it on my homepage. It's sort of a copy, sort of a starting place. Okay, so I'm going to start to link these. So on the homepage, this was all static content, but now I dragged it in here. I want it to be for the show, all of these fields, I want it to be dynamic. So that for each show it's different. So I'm going to see here. I'm looking at the— the Diplomat? Oh, yeah. The Diplomat is the name of the show. It's been a while. Okay. So now I have the heading, the text, and the button. The button will have a static label, but the actual link will go to the show. I click the link. There's a lot of links I could choose from. I'm going to choose the relative URL for the show. I think I reference a— yeah. I'm also linking the image, I guess. Yeah. Okay. So now I'm going to go back to the homepage. And even though this is not published on the site, anywhere inside Canvas will pick up this template automatically. So now I can see the home page now looks a little bit better with the teasers down there. I'm going to publish my teasers— or the— why did I not publish? OK. I'm going to publish the teasers. This was not actually Claude doing it. This was me. OK, so I'm going to go back to the home page. So on the bottom of the home page now, I have the shows and a teaser. So looks better, right?

Speaker B (unidentified) [23:31]

Yeah.

How patterns work

Ted Bowman [23:31]

We're getting there. OK. Oh. All right, so patterns are a group of components. You can reuse them across pages, templates, and page templates. And it's a copy, not a link. There is a contrib module called, I think, Reusable Patterns, that allows— that actually will turn a pattern into a block so that you can place that block multiple places, and then the pattern becomes really linked, or the block that you place is actually linked to the pattern. So that's sort of a good option if you actually want something when you edit the pattern in one place, you want it to sort of propagate across the whole site. That contrib module is a good idea. They're now editable. It used to be you just had to restart the pattern, but now you can edit the pattern. And again, it doesn't edit— it's not linked to the places you placed it, but if now you want to— now if you have an improvement to that pattern, you can— you don't have to rebuild it from scratch. I didn't— OK. This bug is gone. OK. It used to show the— it used to basically show the outside regions for the other view modes. It doesn't do that. But I forgot to delete this slide. So progress. OK. So let's just take a look at our site so far. We have the home page. And we have the teasers here for each show. And if I look at the show, it's dynamic. Each show is different. And then also, if I look at the network, this is just a regular taxonomy term page in Drupal. Because the taxonomy term is just going to list the nodes that use that term, it automatically picks up the teasers that we've controlled inside Canvas. And then— because this is the official site and I stopped the recording. Before we had copyright infringement issues.

Episode templates and views with contextual filters

Okay. So let's now look at templates. We're going to do the episode templates. But we're going to do it on super speed because basically this is the same thing. So basically we want episodes for the full content. We want to control it. We're going to do a similar pattern to the show. And again, we link to the episode. We're looking at the fields. And so this is basically— you just repeat the pattern for all the different content types. And we have more information here for the episode, but we're pretty much doing the exact same thing. That's sort of why I did it in super speed. And same thing. This is the teasers view mode for the episodes. So you get the idea. But now we're gonna sort of incorporate those with Views. We're gonna add an episode view to the homepage— to the show page. Okay, so we're gonna make a view. And this is going to be the episode list. Or episodes for show. And we're going to make a block. So we're showing the newest episode. So we're not creating a page, because blocks are basically really easy to integrate into Canvas. Episodes for show. And then instead of the titles, we're going to have the view show teasers, which of course we have already shown that we control within Canvas. So we're going to save. For some reason, I want to change the title. Latest shows for— latest episode for shows. OK. So the important part here for linking inside Canvas is we're going to have to create a contextual filter. So this is basically— we want to get something from the URL that's going to tell us which show do we want to show episodes for. So the contextual filter is what we're looking for is the TV show on the episodes content type. And the key part here is we want to provide a default value and say basically whatever show is in the URL. And if we— and we're just going to validate it to say make sure this is an actual show. So this is not Canvas-specific, but this makes it so that when you place a show in a template for the full content, it will pick the right show. All right. So we're going to go back to Drupal Canvas. And we're going to go back to our full content for a show, which right now just has show-specific stuff. Now we're going to look for that Episodes for Show that we just had. We're going to drag it on. And now we have the 2. So the other thing about dragging views into Canvas is it doesn't actually show the title of the block for the view. So we're just going to add a sort of static heading and change this to Latest Shows. Put it in the right place. So change this to Latest Shows here. Latest Episodes. OK. So we can see we're using the teasers. We're using a view which shows teasers, which is then controlled by— the teasers themselves are showed by Canvas. We'll publish this. And we'll go back and look at—

Speaker B (unidentified) [29:38]

6.

Ted Bowman [29:38]

The home page. So we get from the home page the show teaser. And then we go to the show full content. And at the bottom, we show the teasers of the episodes. And then now if you link from the episodes, then we see the full content of the episodes. OK.

Cast member teasers with a prebuilt SDC

Okay. So this— we're going to do the teasers for the cast members, but we're going to be— do them a little bit differently. Basically, we're going to have the teaser be a full SDC that we don't drag and configure. Basically, the idea is that we ask some designer to make us an SDC completely. And this would be sort of the same thing if we did code components, we could actually ask a front-end developer to make a full code component for showing cast members so we don't— so the site builder doesn't have to do all the work themselves. And it's definitely not an excuse to pull my dog into the presentation. OK, so let's go. So we're going back to templates. We're going to add a teaser template for the cast member. And then we're going to our library, and now we have a cast member SDC. So basically, this is something where it's like out of the box, this is how we want it to work from a designer that made the SDC. But we can link it now to the fields on the cast and switch it from Gracie as Lassie to Jeremy Strong as— I forget his name. Anybody? Kendall Roy? Yeah, Kendall Roy. OK. And so basically, this sort of gives you sort of 2 options. Either make things and tweak them inside Canvas or come with sort of premade SDCs or premade code components that sort of have a look that you want. So in this case, I think often you're going to do something like this where the SDC is already really opinionated, or the code component. All right, so we're going to add a cast member view. So it's very similar to what we just did. So we're going to create a view. And this is going to be cast members for show. And then— we are going to do Cast Members and then create a block again. And then we're going to do, instead of Title, Teasers. And again, we've already taken over the teaser inside Canvas. And I'm going to show 6. OK. So again, we need to go and add the contextual filter. So we need to just basically connect the cast member to the show that they're on. So a cast member has a show ID also. So we'll select that. See, it's on TV episode and cast member. And then we're going to provide a default argument, which is from the URL. It's a pull. And so we can preview it here. So I remembered a node ID. So I'm going to enter a node ID of the show. And we see here this is actually not formatted right now. So basically inside Canvas it would pick it up automatically. But because Views is outside of Canvas, we actually need to publish the teaser before Views is going to see it. So let's just publish the teaser. And you go back to Views, update the preview. And then now we get the teasers controlled by Canvas. Obviously, if Views was inside Canvas, this wouldn't be a problem. But for other things where you're picking up view modes outside of Canvas, then you need to have that published. Once we have workspaces, though, this could actually— you would do it inside a workspace. OK, so now we see the preview for the show. Or we're going to add our view to the Show page. And it doesn't look exactly like we want it. We're going to go back to the view. And instead of showing them one at a time, we're going to show them in a grid or a responsive grid. And so as soon as we save the view, then Canvas will pick up our changes. Since they're 2 different systems, they do have to— you do have to have them saved for one to be aware of the other. So we're just going to test how this looks inside Views. We'll save it. We'll go back to Canvas. And we'll reload this page. And now we have the view of the cast members at the bottom. So basically, we have 2— 2 views showing 2 different types of teasers. Both teasers are controlled by Canvas. And in the episode case, we made the teaser specifically inside Canvas component by component. But in the cast member case, we came with an SDC that had exactly what we wanted for a cast member. And we just had to link the fields.

Page templates

All right. Page templates. OK. So basically, page templates are a new thing inside Canvas as of maybe a couple releases ago. So it used to be that you would actually just control individual regions. And now we have a page template, which when you enable it, is going to mock what your theme regions will look like. But it's not connected after the fact. So basically instead of replacing— instead of using the page.html.twig, we'll only use html.html.twig and then everything else will be Canvas. So let's see a quick demo of that. All right, I'm going to show the video because I think that's more informative than the slides. OK. So right now we can look and we have block layout. And this is what is enforced on the site. We haven't turned on Canvas to take over the page templates yet. So we're going to go into settings and we're going to say, "Hey, let Drupal Canvas do the page template for this." And if I go into Drupal Canvas and I click Ted Bow theme demo theme, so it basically— it looked at my theme and it's going to make a version of that but inside Canvas with all the regions. And it's going to basically take all the blocks that were in the block layout and transfer them onto the page template as a starting point, which I can then change. Okay, so we're going to go and look at the site. And voilà, the site really looks no different. But it's being rendered by Canvas now. Now that we can edit it, it's sort of in the UI. I mean, if you love the block layout page, this might be a downer. This is a— some people say this is a bit better. OK. Oh, it also wasn't changed because I hadn't published it. But it still looks the same after I publish it. I was just seeing who was awake still. OK. All right, let's go to the next slide. So let's edit our page template a little bit more. OK. So we're going to look at shows here. We're just seeing that everything sort of looks the same. All right. So let's go back into Canvas. Go to our page templates. We only have one page template at this point. And I want to add something. I want a list of the latest episodes for any show on the bottom of every page. So I just took a view that I had made, and this doesn't use a contextual filter. This is just the latest. This is actually random because the pit had just number— name— hours as titles, and it was boring. So, and then I grab a heading. So this is basically just a view, and then whoops, I don't want them to be side by side. I want them to be stacked, but my theme does it this way. So I'm kind of like, how am I going to solve this? And so what I'm going to do is even though it copied my theme, I'm going to use a container inside Canvas. I guess a column, probably. I'm going to look at this and like, why is this left and right here? And I can see in the layers, it shows me sort of how it's rendering. So I'm going to go back. I'm going to look for a column. If I spell it correctly. Column. OK, I'm going to put a one-column container inside one of the regions. And now it's still stacked this way. And I want it this way. But I drag everything into the column. And then voilà, this is the way I want it. So if I was starting from scratch inside Canvas with the page template, I wouldn't run into this. But I'm sort of like still— it's still connected to the theme and from the CSS sense. All right, let's publish it. And let's go to the home page and make sure everything looks good.

Per-page templates and a bare home page

OK, so I'm going to do the next video on Superfast because we're running out of time. Playback speed only— only— OK. So basically, in this case, I'm going to copy this. And I want a version of the template just for my home page, where I don't want to show everything from the bottom and the top. So I'm creating a new one. And I go into that one. And I'm going to say, well, I'm just going to start deleting stuff from this page template. And by default, no page will use this page template. It's not connected automatically, because I called it the home page template. And so I just delete everything that I don't want. I'm gonna jump ahead. And now I'm gonna go to the actual homepage. I'm still deleting. Okay. So, OK, so we go to the home page. And— all right, here. And so for each page, I can select a different template. So for my home page, I select the home page template. I publish it. Now when I go to my home page, it should look better, or more how I would like it to look. So— but actually, I want it to be full screen here. So I'm going to create another template that actually doesn't have any of the stuff my theme. I'm adding the navigation at the bottom because I realized like, oh, I took everything away. So I don't exactly like how that looks. So this is a bare homepage theme. And so since I didn't copy this, this has sort of no relation to my theme at this point. This just has page content. I'm going to add my links to other parts here and then I'm going to go and just select it on my homepage. And voilà. So the only other thing I'm gonna skip through is you can do the same thing on a— I can take the page template for a show and have it use that same bare template. So I'll just give you an idea what it looks like. The show itself also has nothing extra here. Because I want to get to translations in my last few minutes.

Translating pages and templates

OK. So now Canvas is translatable. You can translate all the things we just looked at. And then right now we're only supporting symmetric translation. It means the layout for each different language doesn't change. But the translatable properties, which are strings, are translatable. And then I recommend Canvas Translate. So without Canvas Translate, you have to use TMGMT for Canvas, which is a super powerful translation system. But if you don't need all the power of that, then Canvas Translate is much simpler. So let's just look at how that works. And I am going to, unfortunately, have to speed us up. OK. So I just set the page entity type as translatable. I go into Canvas, and there's a new extension on the left that's a translate symbol. And then I basically go through— I'm given a page that doesn't have all the properties for a particular page, but it has all the string properties basically that are marked as translatable. And then Canvas Translate has a little side preview here where I can see my translations in effect. And again, I have to publish. And then if I go back to my homepage, I should be able to switch to the Dutch version. And now, unfortunately, I put some text in an image, which is not going to be translated. The other thing I can do is I can preview inside Canvas all the languages that I have. And then I can also delete translations. All right. You can also translate templates. The only thing that's sort of important here is I'm translating the show. I think the show teaser. And you're going to see on the show here, there's a bunch of stuff. There's the text for the show, the title. But when I actually go to translate the teaser, the only thing I'm going to see, because these are linked, is the actual View Show link at the bottom. Because everything else is not from inside Canvas. It's a linked field from the content type. So it'll pick up the correct translation for that show, say, for the show description and the show title. So I only have View Show here. All right. OK. So that is the main presentation. I'm at time, but I have time for questions.

Q&A

Speaker B (unidentified) [44:57]

Thank you.

Ted Bowman [45:08]

Yeah? Oh, I don't know where the mics are.

Speaker B (unidentified) [45:09]

Is there any support for conditional behavior? For instance, one field is empty, so show a different field instead. Or if this Boolean field is like this, then do this or do that.

Ted Bowman [45:21]

No, though Martin did make— what is your field component module? Canvas Field Component. Could you use field conditional modules that would then integrate with that? There's a field component module that actually just lets you render fields inside Canvas. Maybe you could use that with a contrib module that does conditional fields. But out of the box, no. There's no functionality for that. Any other questions? Yep. Go to the mic. Yeah, thanks.

Audience member (unidentified)

Is it possible to use tokens in the labels, like—

Ted Bowman

No, not yet.

Speaker B (unidentified) [46:07]

Not yet.

Ted Bowman [46:07]

Yep, sorry. Definitely something we looked at.

Audience member (unidentified)

Question about deployments, how it happens, because many of that in database, and if I want to have full sync, to this pipeline?

Speaker B (unidentified) [46:23]

Yeah.

Audience member (unidentified) [46:24]

Like, for example, multilingual translations.

Ted Bowman

Yeah. So right now, like, the simple case is you just have the autosave, and it's in its special place, and then you publish it. If you're doing on multiple environments, like, content templates are config, page templates are config. So most of the stuff you saw is config. Individual pages are obviously a content— a content entity type. So basically, if you were doing it on separate environments, you would basically just publish it all through Canvas in the publish sense. Then everything would be config and content. And then you would deploy it like you would any other content or config if doing between different environments. But Canvas itself doesn't have any special case for that. Yeah? So if you're doing a— Yep.

Audience member (unidentified)

Is it in the plans to be asynchronous or asymmetric translation?

Ted Bowman

Yep. That is something that people are asking for. I don't— there's a Canvas— I'm not going to load it up now, but there's drupal-canvas.com, which is the roadmap, and you can see what things are coming. That is something that people are asking for, but I don't know that it's specifically on the— but when we added the symmetric translations, went through a lot of work to make sure we were not making that impossible. Yeah.

Audience member (unidentified)

What's still to be done?

Ted Bowman

What's still to be done? So much. The next thing I'm going to be working on is workspaces. There's the other Canvas sessions will have sort of more code component what's coming. Symmetric— asymmetric translations and workspaces is the thing that I'm really working on, gonna be working on soon on our team. Yeah. Questions?

Speaker B (unidentified) [48:19]

If you want to use an SDC to control how a list looks like, for instance, in a view, the space between the items, like the separator lines or something like this, or to have it as a grid, is this also something you can easily just switch out a different SDC? Is there some mechanism for that?

Ted Bowman [48:34]

SDC integration into Views?

Speaker B (unidentified) [48:38]

Yeah, as a view, not for each item, but for the way the items are together.

Ted Bowman [48:44]

I would not be surprised, but that's sort of like a Views thing, not a Canvas thing. You'd have to find a Views SDC contrib module.

Speaker B (unidentified) [48:55]

Yep.

Audience member (unidentified) [48:56]

So I know the headless stuff just dropped.

Speaker B (unidentified) [48:59]

Yeah.

Audience member (unidentified) [48:59]

Would you do anything different in the demo you just did if it was going to a headless site instead of a traditional site?

Ted Bowman

Probably. But it's— yeah. This is more like a site-building-focused one. So yeah, I mean, you wouldn't be using all the content templates. And so a lot of it you just wouldn't be using. There is JSON:API support for pages. I mean, there is for the config for the templates too, but I'm not sure that would be very useful. But the pages, we did do a lot of effort to make sure that the pages actually— the component tree is returnable via JSON:API, but it would be a lot of work on the frontend to actually use it. But yeah, you'd probably use more code components if you were doing that. Any other questions?

Speaker B (unidentified) [49:54]

Yeah?

Audience member (unidentified) [49:55]

This looks very interesting for site builders. What about if you want to give editors, content editors, possibility to use Canvas and using some components but not all?

Ted Bowman

Right now there's not permissions for individual components. There's permissions for the content templates, page templates. There may be a contrib module that does that, but the sort of page editor which you might give a content editor— there is not the ability to sort of per component.

Speaker B (unidentified) [50:30]

Yeah.

Audience member (unidentified) [50:30]

Since direction is sort of in the Canvas layout builder, how would you deal with translation of right-to-left languages?

Ted Bowman

I think the actual layout— the layout itself is not going to change, but I mean, the— I think the individual component strings, or the individual strings, will go right to left, but the whole layout is not going to flip as far as I know.

Speaker B (unidentified) [50:58]

It might?

Ted Bowman [50:58]

It might, it depends on your CSS. Yeah, it depends on your CSS. I mean, your CSS could flip it if it's from the theme, but the— like, the individual rendering of components will work with strings. But the whole page without work from your theme is not going to flip.

Speaker B (unidentified) [51:16]

Thanks.

Ted Bowman [51:17]

Yeah. All right. Since we're over time, thank you. There's a survey.

This transcript was generated from the session recording and corrected for names and Drupal terminology. Timestamps link to the moment in the video. Spotted an error? Suggest a correction on drupal.org.

Session page template for DrupalCon Rotterdam 2026. Video and transcript published by the Drupal Association.