KEYNOTE: Drupal CMS Spotlights

This conference talk focuses on the evolving features of Drupal, particularly highlighting the new Canvas component system and AI integrations to enhance site management. The speaker, Tim Lennon, introduces the Drupal CMS spotlight, showcasing contributions from key members of the community. Mike Hershel discusses the strengths and weaknesses of Drupal's page building tools, advocating for improvements like beautiful designs and ease of use. Other speakers, including Scott Faulner and Jim Bur, emphasize the importance of AI in managing live sites while maintaining trust and governance within the platform. The talk also touches on the introduction of JavaScript components in Drupal Canvas, aiming to simplify development processes.

Good afternoon, Drupalcon. How is everybody doing? >> All right. Not too tired after lunch. Not too tired after the gala. I gotta say, uh, that keynote was a good way to wake up after a long night. Oh my gosh. But really exciting, really inspirational. Um, a really cool way to get things kicked off. Um, I'm giving a little welcome message before the keynote. Uh, my name is

Tim Lennon. the CTO of the Drupal Association, the nonprofit foundation that supports the Drupal community globally and runs this event. So to all of the Ripple makers in the audience, parts of our individual member program, thank you so much. We really appreciate your support and everything you do to support us and even just the kind words, the hugops, hashtags whenever there's something going on on drupal.org, it's

really a big help. Um the keynote you're here for today here for today is the Drupal CMS spotlights. Um, Gabbor is going to be uh running the MC for the show and it will be with key Drupal CMS contributors showing off some really, really amazing things. Uh, before that, a few quick reminders. Um, again, we would love for you to join us at Drupalcon Roderdam. It's going

to be extremely exciting. 28th of September to the 1st of October, incredible content. They also do a beautiful Splash Awards event. So, if you liked the fancy style of the gala, join the Splash Awards event in Rotterdam. It will be really great. Um, we would also love to invite folks to the Drupal AI Summit in Paris, especially those of you in Europe. Uh, please check the QR

code for more information as well as the Drupal AI Summit in New York in May. So, please check all of those things out. Um, continue the conversation about this rapidly evolving technological future that we're a part of. We also announced the Drupal conference being organized collectively across the Canadian community. It's something that's still coming together, but we're really excited to have that offered in parallel to Drupalcon

coming up next year. Uh, in particular for folks who may not be able to travel to the US or need an alternative. It's going to be a really um exciting opportunity. Um, with that, please do mark your calendars because Drupalcon Orlando in 2027 is going to be amazing from the 22nd to 25th of March. Um, hosted in a very, very cool resort location. Um it's going to

be a lot of fun. Uh we're gonna have a really good time together. So please, yeah, scan that QR code, get it ready. Um another reminder that contribution is the best part of Drupal Con. And for those of you who came for this session, I think um you probably already know that or you're about to learn it. So contribution is where we build Drupal together. Um so

general contribution has been going on all week. It's right next door. You can sneak through these side doors if you want to go right over there after this. Um there's workshops in the morning tomorrow or a full day workshop really for first-time contributors mentored contribution and then you can join topic tables for for specific subjects. When you're doing your contribution, tag all your issues to Chicago 2026

so we can see all of the amazing things that have happened during the event. You've already found them by now, but there have been birds of a feather sessions going um both days. These are the unconference style roundt conversations between like-minded people or sometimes not like-minded people um who are uh uh figuring things out about the future of Drupal about their local communities about particular initiatives. It's

always really really exciting and a cool part cool thing to be a part of. Um, some thank yous as well to our Drupal Con sponsors in particular. Without these organizations, um, who all also contribute to the code, who are also all the employers of many of the people who come up here on stage, we wouldn't be able to run this event. And it's a similar story for

the Drupal certified partners. The Drupal certified partners all have to qualify for the program with a number of contributions to Drupal, which means that working with a Drupal certified partner means that you are working with someone who has built the software, who knows it intimately. um and they're uh absolutely a wonderful choice. So, we'll thank our organization members as well of the legacy program that is evolving

into the DCP program and all of these organizations that are hopefully joining us at that level as well. And again, thank you very much for being here. Thank you for being so engaged throughout the conference so far. And thank you for all of those contributions you're about to make tomorrow. Uh really appreciate it. Uh, with that, I would like to invite up Kevin Shiveley from our presenting

sponsor, Pantheon, to give a brief message before the keynote begins. >> Thanks, Tim. Thanks, everybody. I'm Kevin Shiveley from Pantheon, uh, where we make the web work for your mission critical websites, giving you the freedom and the framework that you need to build the sites that matter most to your business. I'm also on day three of the conference and starting to lose my voice, so bear with

me a little bit. Um, part of my job is leading our own web team at Pantheon, which is a ton of fun, but I'm not a technical marketer. So, one of my favorite things about Pantheon is that we build tools that anyone can use, that I can use, that your faculty can use if you work in higher ed, etc. going to show you a quick video about

how some of those tools work and then introduce you to our uh keynote panel or I'm not your team already works in Google Docs. With Pantheon Content Publisher, they can publish directly to the web. No new tools or training required. See how your content will look before it's live. Share a responsive real-time preview so teammates can view updates as they happen right alongside the document. Transform static

tables into responsive layouts, style quotes, by lines, and info boxes to fit your site's design system, all without leaving Google Docs. What makes Content Publisher different from other Google Docs tools is its clear separation between content and presentation. It filters out design elements from Google Docs, so what goes live on your site always aligns with your brand and design system. From creation to publication, Content Publisher gives

your team one connected workflow and one source of truth for everything you publish. Pantheon Content Publisher, where editorial freedom meets publishing control. Start for free now. >> All right. Thank you. So, quick aside before I intro the panel today. This is my second Drupal Con. Last year was my first day with Pantheon, first day in the Drupal community. And one of the things that I really loved

coming back this year is seeing so many faces that I already knew just from being involved in in so many different programs over the past year and how welcoming and passionate and exciting excited everybody is about building the future of the internet. uh and the panel of amazing contributors that is about to join to talk about the Drupal CMS are just as passionate about that future and

excited about uh where things are going within Drupal. So without any further ado, please join me in welcoming loudly cheering loudly the Drupal CMS spotlight. All right, welcome everybody. Hi, I am Gabber Hoy. I my madeup title is full stack community organizer which means a lot of things. I work on events, I work on tools, I work on social media, I work on marketing, developer marketing, a

bunch of stuff. And one of one of the things that I work on in is this session because I think it's great that this Dre uh does the keynote and you can see all of those product innovations, but we also want to see what's under them. Who's doing these things? Who can you connect to and who can you talk to at the contribution room if you want

to get something done with them? And also it would be nice to see where these products went like what are the success stories of how people use these things. So those are topics uh that we have uh on today and first up is a topic about I'm not pointing at you Mike yet. So, first up is a topic about how canvas is being adopted and Mike is

a founder of one of the founders of dripyard and they built both premium themes on Drupal and the first premium site template for Drupal CMS and so they have a lot of experience on how to do this very well and they have very deep experience of what canvas means in this world. So with that I will give it up for Mike. Hey everybody. So this is canvas

components and the dragons in between. There's a dragon. Hope you all like that. So uh my name is Mike Hershel. I've been involved with Drupal for almost 20 years which is pretty crazy. I am the primary developer behind the veroa theme. Um which is Drupal's default theme. Yeah. Um I help bring single directory components into core. I uh am a subsystem maintainer for Drupal core for Olive

Arrow and and CSS, founder of dripyard, which is a big deal. So all of us know Drupal's strengths, right? That's content modeling like field UI views and stuff like that and and with low code site building tools. But I would like to argue that Drupal strengths allowed us to ignore our weaknesses for far too long. So going back to our strengths, we have things like content modeling

and we can you can click together just through V's UI or through Drupal's UI a very complex content architecture. We're really great at integrations. We are phenomenal at security. And our biggest strength of course is the community. Everyone in this room, everyone at home, everyone all of our friends here that that we come back to this. But traditionally our weaknesses have really been things like page building.

And that's not for lack of trying. You know, we have done things like layout builder, paragraphs, layout, par paragraphs, display suite, yada yada yada. Um, our designs are not great for for the segment that we're in. It's a running joke that Drupal's been difficult to get get started with, you know, and in the meantime, we have our competitors. We have we have systems like WordPress, AEM, Squarespace,

um Shopify, and hundreds of others. And all of our weaknesses are their strengths. Like if you go and use their their page building tools, they're phenomenal. They're it's really easy to assemble. Their designs are absolutely gorgeous and they're really really great at onboarding new people. But like what if these could be our strengths? What if Drupal had really great page building? What if Drupal if we had

gorgeous designs? And and what if it was easy to get started with Drupal? And so I believe this is where we're going. And and and and in some cases, this is where we're at. So canvas is is g is so amazing at page building. It beats the pants off of Gutenberg in my opinion. Site templates can include gorgeous designs and Drupal CMS makes it really really straightforward

to get started. So about a year and a half ago um a friend of mine, Andy Giles, we started this company called Dripyard and we wanted to capitalize on on everything that's changing. And there's this new theming paradigm with Drupal where instead of shipping a traditional theme, you can now ship a huge component library and you can tie all these components in through like a flexible beautiful

design system. And furthermore, you can even like ship patterns in your site templates and patterns in your recipes that enable your end users to like easily assemble your pages. And it it's it's amazing when you put this all together, like the end result is absolutely gorgeous. So like in this video right here, like obviously it's sped up, but I assembled a whole skeleton of a page in

about a minute and a half. This is something that you could not do with Drupal, but it's not always easy. Sometimes there are dragons. And so we started very early back when Canvas was still called Experience Builder and we would run into these errors and and and to be honest that we still get occasional errors. Canvas is a very young piece of software but it's also also

very amazing. So like uh when when Gabbor reached out to me he was saying you have to be you have to be honest. You have to tell people where this is going and sometimes it can be like a little scary and there's a heck of a lot to do with canvas. There's things like it doesn't do multilingual yet. It doesn't, you know, if you throw components in

global regions, it kind of lose you don't have visibility rules. You don't have it lose it can use lose template suggestions. You know, there's only basic prop types are supported. You can't restrict slots to certain components and vice versa. There's a couple there's a couple little things and it can feel like a little scary, but we have an amazing group of people. And it's not only these

people. I also hope that you appreciate that animation right there because I worked really hard on it. But um we have these amazing folks in there that like we bring these issues to and they fix them and they're so nice and helpful and they make me feel like so warm and fuzzy inside. and and this this comes back to Drupal's greatest strength which is community and the

smart people who are in the rooms with us. Um I am super super excited about Drupal's marketplace. So traditionally people would not even think about Drupal for for projects that are less than $100,000 right and those projects they're not going to go anywhere. There's still going to be large Drupal projects, but now we have this opportunity to do Drupal projects for, I don't know, $50,000, $30,000, maybe

less than $10,000. You can you'll be able to go to the marketplace and you can purchase a site template that maybe gets you 80 to 90% of the way there. And with the power of Drupal, you know, this is not some, you know, halfbaked distribution. This is fullon Drupal that works. So you can download it, you can install it, be up and running in in a uh

in an hour or so and then you can use things like views and start tweaking the views. You can use your content types and stuff like that. I believe this is going to grow our community. We're going to have so many more people in here and that makes me super super excited. um with our traditional strengths such as content modeling, integrations, security, community and if you combine

that with like these upcoming strengths like page building designs and getting started like I as I said earlier I have been in Drupal for almost 20 years and I can say like without a doubt and I'm not making I'm not like pulling this out of my butt here. This is the most exciting time that I have ever been in Drupal. Thank you, Mike. So, I think that

was a good testimonial to where Canvas is and where it's going. Uh, anybody in the audience now that Mike introduced the marketplace if you haven't heard about it before? Anybody wondering how could they build something for the marketplace? Hands up. It's quite a few. Okay. Anybody wondering why the why on earth you would build anything for the marketplace? Like what's the point? Okay, a few. Okay, great.

So, those two questions are the questions that I gave to Jim who's the builder of one of the first marketplace uh site templates um from Canopy Studios and he will talk about that. >> Thank you everybody. I'm Jim Bur from Canopy Studios and together with my team over here, we created the healthc care site template. Uh the healthcare site template is an open-source uh site template designed

for medical clinics and hospital networks. Uh it provides a complete starter site with preconfigured content types, default content, and a medical focused theme. We built this to help organizations build patient confidence and community trust, support accessibility and compliance standards, improve findability of services and care providers, and allow them to scale with organizational growth and strengthen brand credibility. We did this for the marketplace. Uh it's new ground.

Uh Drupal CMS ships with a catalog now of vertical site templates. Um clients can pick one and then agencies can customize it. You know, think Squarespace or Web Flow Marketplace. Uh but opensource and enterprisegrade. Uh why healthcare? It's one of Canopy's leading verticals. Uh the numbers speak for themselves. It's a huge market, a high digital need, and patients expect a modern web experience. There's over 6,000 US

hospitals, a thousand in Canada, uh 50,000 clinics and uh in the US and 250,000 in Canada. Uh and healthcare sites aren't generic. Uh they need provider directories, location finders, service lines, and news and resource from uh for patients. Building from scratch is expensive, and a template changes that and gets people What it also needs is rigorous accessibility standards. We built sites that have an accessible foundation and

don't treat it as a checkbox. Uh we've always used WCAG 2.1A as our base and now we're working with clients towards 2.2. Um and we've even built a few 3.0 websites. uh with any code or before any code, we mapped out who the site was for and what they're going to need to do. Uh patients need to find a doctor, caregivers finding a location. The site map

became our foundation on everything. So, you know, before we went into any code development, we really wanted to map out that architecture. Um building the site template, don't start from scratch. Adam's created an amazing tool called Drupal CMS site template starter kit. It just rolls off the tongue. Um it allows you to build out your site in a site building way. You don't even have to make

any code and then you can export your site template as a monolith. Uh for our content model uh we created six content types all of them defined by the wireframes. um provider profiles for provider search, locations for location search. You know, the content model itself is the site map expressed in Drupal. For the content, we didn't want to ship just Lauraum. Uh we had fun with it

and we used AI to actually generate the content. I created a a small fictitious island called Salt Mush Island off of the coast of Cape Cod and we created a cannon with an agent and skills and we actually, you know, used that to create all the content for the site. for design. Uh we created a uh mood board that we got approved for the template uh designed

by Nicole over there and we uh created wireframes and then due to the timeline we actually designed inside of the browser. So as we were putting to things together in canvas we just clicked it all together. Um for our AI efficiencies uh we used it as an accelerant. Uh we used it for demo content, uh CSS, accessibility pre-checks before we had our accessibility specialist check it. Uh

documentation, every suggestion got a human review. And the key is knowing where AI helps and where to have a human step in. Uh with anything like this, QA is not optional. Patients and clinics rely on this information. So we worked on extensive QA before we called it done, and we're still working on that. healthcare content errors can harm people. You know, we needed to bake in quality

as part of the product. And we built this open source from day one. Uh Mike's building excellent premium themes, but we wanted to build something to give back to the community that we've been able to uh make our living on. Um and we hope that, you know, a a rising tide raises all ships. you know that in the future, you know, we will be able to rely

on the community to help us make this healthcare template better and better. And this wasn't for charity. The business case is concrete. Uh, you know, there's faster discovery with clients now, lower setup costs, and we've created a reusable asset that we can start with for any of our healthcare client. We hope that it investment pays off, you know, in the first few engagements. The marketplace will add

a new avenue of discovery for agencies and developers. When a hospital searches for a health care template, they find ours and Canopy's name on it. You know, that's inbound marketing built directly into the marketplace and the template that we've made. And you know, Canopy has always said the day you launch your website is the first day of its life. you know, we want to support that website

for the life of its website. So, you know, the template opens the door and we hope to have a continued relationship with people that use the templates and, you know, support them as they move on from there. And the template is a portfolio piece that sells itself. Um, I hope to be the first case study on drupal.org that is just about a site template, not a client.

um you know when we say we built the official Drupal healthcare template in Drupal CMS you know I hope the conversation shifts from can you do this to when do we start uh and through this process we've also gained internal expertise um so through strategy and creative we were able to abstract uh an actual hospital template from an existing client site or one we're going to work

on our team's been able to learn canvas and the dragons there be uh and what we can do about that. Um, and then we've even documented a lot of things and will help people use the template moving forward. So, I came here to hope to encourage you all to build the next generation of the open web. You know, what of your clients uh, you know, products or

sites or organizations, your vertical like how can you abstract that to help many organizations? And with that, I will pass it back to Go. >> Thank you. Thank you. Uh I don't know if you noticed but you you could see the patterns of how maybe they are coming from two different business models but both of them really put in uh strengthened all the underlying foundations and layers

that there are for all of our benefits. So I really wish super success to both of you. Uh, next we're going to turn a bit to AI. And you may have been to the AI keynote today and may have um got reminded of a lot of potential problems that could happen if you use AI without thinking how you use AI. And that's one of Scott's uh favorite

questions of how we can scale AI in a way that's safe and why Drupal is an ideal platform for that. So that's what Scott Falconer will talk about. Hi, I'm Scott Faulner. I lead applied AI and agent success at Aquia and I help lead the Drupal AI initiative. Yesterday in the Dre note, you saw us use Lovable to build a site using Drupal CMS from the ground

up. I want to start where that story gets interesting. The day after we launch. So, say the site is now live and I ask, "Make it more welcoming for first-time attendees. In minutes, the agent can touch on the hero, a start here page, registration, frequently asked questions, and metadata. That is no longer just authoring. That is site management at scale." And this wasn't a toy demo. For

the Dreote, we use AI assisted tools to build a real Drupal CMS site under a real deadline. Which is why the interesting question isn't can AI build it? You saw that yesterday. It is what happens once the site goes live. That's why the scarce resource isn't generation. It's trust. review is just where that scarcity becomes visible on a live site, in a moderation queue, and in an

issue queue. We're not running out of output. We're running out of trusted attention. So for Drupal, the harder question isn't can an agent build a site. Yesterday you saw that the harder question is really what happens after launch. How do we let agents help manage a live site without losing that trust? That is a governance problem. So take the site you saw yesterday. It's live. Now ask

the agent, make it more welcoming for attendees. In practice, that really means a start here page, a stronger homepage message, clearer registration, and clearer metadata. What we found in practice is that voice is the easy part. The agent could give us better options quickly. Clearer headlines, friendlier button text, better firsttime attendee language. That sped up iteration immediately. But the real question is authority. The agent can propose

those changes and save the revisions. It should not publish them, change unrelated sections or start rewriting taxonomy just because it can generate plausible content. Your voice can travel but your authority needs to stay bounded and attribution has to stay visible, requested by me, drafted by this agent, reviewed by this editor. There should be no secret agents. If delegated work is happening in Drupal, the platform still has

to tell the truth about who asked, who acted, and who approved. That's what governance is for. The right model is not the agent is me. It's the agent prepares work and hands it off at the right gate. Drafting can be delegated. Final responsibility still needs clear checkpoints. And this is where the work gets real. That one request didn't stay on one page. It spread across the homepage,

the start here page, the CTA blocks, the frequently asked questions. A simple ask became a coordinated live site change. And at that point, the old style of doing things breaks down. Nobody should be opening eight tabs and checking them by hand. The practical shift is that the team reviews one bundle of related changes instead of manually stitching the site Then comes the moment that it matters. The

agent tries to go one step too far. Publish all of these changes and Drupal says no. It routes the changes into moderation. That's not a failure. That is the platform protecting trust at exactly the right moment. Now the reviewer starts from a much better place. Approve these six changes. Tweak one headline. Send one answer back. That's the win. It's less clerical assembly, faster decision- making, and more

time spent on the judgment calls that truly matter. And after launch, the pattern keeps paying off. The agent can help spot stale copy, weak call to actions, thin metadata, broken links, and missing alt text, and prepare the next round of improvements instead of waiting for a human to hunt them all down. So, site management starts to look different. The benefit is not more AI. It's shorter iteration

loops, less manual coordination across pages, and safer changes on a live site. That is operational value teams can actually start to feel. So for me, that's the real business outcome, not autonomous publishing, not infinite content, faster decisions, clearer reviews, and more confidence making changes after launch. The agent does more preparation and the team, the humans behind it spend more time deciding. That leads to the operating principle

underneath all of this. Protect human judgment. Let agents do the preparation work, the assembly, the first pass. Keep humans on message, risk, approval, and ownership. The places where the trust is actually created. And the nice part is these improvements help even without AI. Clearer workflow, stronger moderation, better attribution, and cleaner review services. That is just a better Drupal CMS for the humans that are already doing the

work in the So the opportunity in front of us is not just to use agents to build sites. It's to use Drupal CMS to manage life sites safely after launch in partnership with AI with faster iteration, safer changes, and better outcome without any of us losing trust in the system. All right. So, next up is Kristen and she will get to a practical application of this principle

I think with context control center. She was instrumental in bringing all the stuff that Dre demoed to life with a team of uh people and she will give us a deep dive about that. Thank you. Thank you. All right. So, hello everyone. I'm Kristen Paul and I am in charge of uh context control center. Uh I'm also a program manager uh for the Drupal AI initiative. Um

and our motto is we want no AI slop. And I think that resonates with the Dre note that we just saw yesterday. Uh it's a key message. So the Drupal AAI initiative has a rolled out a one-year roadmap for this year in February. We have a bunch of amazing partners that are working together, 31 organizations with over 50 contributors and we welcome more. So see me after

this and I'll sign you up. All right. So the road map has a number of capabilities, eight of them uh as our focus areas for this year, including page generation and background agents and discovery and governance and all this great stuff. And I'm focused specifically today on talking about context management, which we did see a little bit in the Dre note yesterday. So why does context matter?

If you have no context or bad context and give that to AI, you're going to get generic guessy garbage. love that. No, don't love that. We don't want that. But if you get good context from your human brains and your team and give that to the agent, you're going to get accurate, authentic, aligned outputs. So, it's very important that you're focusing on the people and your team

and the knowledge that they have in their heads that you can extract out and get into context so that you don't get AI slop. And that's we're going to need a little sticker. No AI slop. use Drupal instead. So you can have lots of different types of context. You could have outwardly facing context that's for your branding and your messaging and your marketing, but you can also

have context that's about your business processes and your team structure and things for automation inside your organization as well. So it's very flexible and you use whatever makes sense for your organization. So we've seen things like in the dream not dre note you know we got brand guidelines and um you know things like that but you could have service cataloges FAQs SEO guidelines accessibility guidelines that sort

of thing right so it's basically it's infinite basically what you could provide as context within the system so because there's a lot of ways that you could have context a lot of types of context the whole goal of context control center is to try to bring some sort of order to that and provide a very easy interface to enter it for non-technical users and to configure it

for your site builders and your developers behind the scenes as well. So the key features at a high level for context control center is you know context management which seems obvious. We also have a way of scoping context based on certain criteria. We can have subcontext which is useful in some cases and then we have a lot of logic behind the scenes to be able to map

that context with agents. So for context management, all the standard things that you would expect for Drupal. We've got moderation, revision, scheduling, multilingual, yay. And uh we have a easy to use Wizzywig markdown editor because AI kind of likes markdown and JSON. So these are some of the key features. Uh this concept of scope is very flexible. This is actually a plug-in system. You can have global

context. You could have certain use cases that you're supporting. You can scope it based on specific languages, even sections of the site based on paths if you'd like. So, it's a very flexible system to be able to categorize your context. And this concept of subcontext, we actually have two kind types subcontext. One is required, which is good for organizational and kind of breaking your context into sub

kind of little chunks, and then also conditional, which is a little more interesting where there's some magic behind the scenes that picks the right context depending on the use case. on the agent collect uh the selection rules for agents. Uh there's a lot of different rules. I won't go into all of those, but basically if you're giving a agent a prompt, there's behind the scenes is trying

to find the best context for that. It uses all of this different criteria to see what's the most relevant for the particular task at hand. And if you're a developer in the house, there are ways of extending context control center by making a contrib module or a custom module, adding use cases, creating these scope plugins, modifying context behind the scenes before it gets to the agent Almost

there. There we go. All right. So, as we heard a couple nights ago from my hotel room live in Chicago, I did tag a beta release which was super exciting. Woohoo. All right. Uh, we want beta testers. So, if you're going to be around for contribution day, come sit next to me and we will have some fun. So, yeah, looking for bug fixes and all that good

stuff. So, the whole goal of the context control center is to be that source of truth for context connecting Drupal and external systems and AI all in one place. So, it's that hub, that sort of knowledge base that you can ground your AI in. and come and see. Oh, and CCC is flexible. So, we talked about being able to, you know, uh, extend it with scope plugins

and and modify it, you know, use cases and that sort of thing. But you can make context however you like, right? We're not prescribing a specific way that you do context. We give you tools. You could do subcontext. You don't have to do subcontext and all that. So, the road map, we've got a 1.0 0 that we're slating for early May and that's going to have all

the things we just talked about, maybe a little bit more. We'll we'll see what we can figure out on uh tomorrow, but also uh 1.1 coming up hopefully late summer and ex including things like dynamic context coming from external systems. So, I want to shout out to all of the top contributors for uh Context Control Center, Salsa, Foster Interactive, Aqua, Freely Give, 1X Internet, Itch for Web,

and the University of Edinburgh. These were all folks that had um and organizations that had at least 10 issues that they helped out and I really and there were there's a lot more as well. So, I want to thank you. And also, uh if you want a longer version of this, Aiden Foster and I gave one yesterday that will be recorded. If you missed it, feel free

to reach out at any of these uh contact places, Drupal, Slack, come see me in the uh contribution room tomorrow and we'll start making it >> I mean, it's super impressive. And if you've seen how many companies were involved in this relatively tiny part of the AI initiative, and there's a lot of other stuff that the AI initiative does, it's mind-blowing, I think. Um, so finally, we're

going to turn back to canvas from AI, although it's going to be a little AI as well. And we're going to talk about JavaScript components. And this is another area that Drupal has been historically not very good at to welcome uh people that have experience in this area and make it very easy for them to work with Drupal. And so Balent is gonna talk about that now.

Thank you Gabbor. Hi everyone. My name is Balin Clei Balin Brews on the internet. Check out my website. I sometimes write about the stuff that I'm talking about today. I lead JavaScript code components in Drupal canvas and I want to show you some code. Is is that okay? It's JavaScript. I don't know if that helps or not, but you'll see. So, quick refresher. Uh in canvas, we

provide the following component sources. We have single directory components allowing you to write Twick templates and uh we have blocks to execute arbitrary PHP code. And a new way to produce front-end markup is via JavaScript code component. And for that we provide an in browser experience, a built-in code editor, built-in preview, some UI to define the metadata. And you can do all the work in the browser.

Everything is compiled. It requires no setup. You don't have to leave the browser unless you want to. in which case we want to provide the best developer experience there is both for you and for your coding agent and we want to make sure you have access to the best JavaScript tooling that is possible. We want to make sure it's very easy to scaffold a codebase and that's

where we want to start now. So in order to get started, the easiest way is to run the Drupal canvas create tool which will ask you to name your codebase and pick a template. After you pick the template, a code base is being created and even sim links are created for your coding agent. So it points at the agents folder and once you're done, this is how

the codebase looks like. It's just a standard React codebase with Tailwind CSS and React components, some JavaScript tools that you would expect. And this allows you to fully compartmentalize your UI development workflow if you want to. Let's take a look at how one of these component looks like. This is a hero component with a component. file similar to SDC's. And then there's a TypeScript file. Yes, type

TypeScript is now supported. There are some built-in imports at the top and then the rest is just idiomatic React with Tailwind CSS. Nothing really special about it. Now, how do we preview our work locally? This is a new tool we named canvas workbench. We released it last Friday and this allows you to preview all your components with this locally running development app. This is our alternative to

storybook built specifically for Drupal canvas and it requires no setup. You can just run one single command in your codebase and you get these previews which also includes fully built out pages described as simple JSON schema. And that allows you to preview everything locally before you synchronize things with Drupal canvas which you can do with a simple command. You just fire up your terminal and you run

npx canvas push which will push all the components and in the future pages to your running Drupal instance. And once that's done, you can even switch back over to Drupal canvas and just continue your work there. And for example, you can just drag on this hero component and start editing your code. Sorry, continue editing your code that you already prepared locally. For example, I can do some

quick image optimization with pulling in the image component from the Drupal canvas package and just replacing this image tag with the image component and gives us nicely optimized images. Or I can use the built-in JSON API client which is preconfigured in canvas and you can do your work that way. You can fetch the data that way in code components and there is even a preview of the

data that you're getting built into the code editor. So it's really convenient. But what happens next? I can also pull these changes back to my local codebase. I just run canvas pull and all my components are getting synchronized back to my local repository. And you can see that the changes that I made in the browser, they show up here in the code. So it's as easy as

that. Now I also want to use coding agents when I work locally. And for that I want to extend their capabilities using agentic skills. We published a few skills on skills.sh which is this big skill repository done by Versel and you can install the canvas skills with this one command. They are also pre-installed in the templates that we provide but you can also install them in any

codebase and once you do you can prompt a coding agent like this to do some basic refactoring. I'm just creating a new button component here, extracting some markup that's duplicated, and my agent is using the relevant skills. And then it is using the CLI tool to push it back to Drupal canvas. A new feature that we introduced in the push command is support for thirdparty dependencies. You

can finally install any package from npm in your local codebase. All you need to do is importing it in in one of your components and you do a canvas push. And the third party dependency will work in canvas. This means chaten UI or any other packages you want. Another idea I want to explore here is building a decoupled front end where all you need for a rendered

content, rendered piece of content to show up is a component library and a component tree which contains instances of the component library. Now it turns out in a front-end app that's exactly the same thing. You need a component library and you need a component tree. Now you have seen how I can keep the component library synchronized between canvas and a local codebase and I can fetch the

component tree via JSON API or GraphQL. That's a solved problem in the decoupled world. What's coming for code components are pages, global regions, and content templates with local agentic workflows. You'll be able to preview all of those in canvas workbench. We are also introducing a dedicated font API and a way to reference entity data and tap into entity data from your code component. And if you want

to learn more, you can head over to the documentation page. This I know this link is long, but it's linked from the drupal.org project page or you can talk to us on on on Drupal Slack. But frankly, I think it's the best way to just start playing with this one command and scaffold the codebase locally and start seeing everything yourself. Thank >> All right. There's so much

going on in Drupal now. It was hard to pick these topics, but I thought it will be important to see how real life experiences with Drupal canvas. Uh, and then how you build site templates and why you would build site templates and then why Drupal is the ideal platform for safe and scalable AI. how you can use AI very well with uh context and generate really good

content and what's the future and what's the actually present as well of JavaScript code components that we can uh broaden our horizons with. So hopefully you like this session. Please give us feedback on this forum. Tell us uh what we did well, what we should improve, what other topics we should include next time. And with that our time is up. So, we'll be around for a few

questions and we'll let you go for your break. Thank you. You want to