From early days, "views" has been the killer feature of Drupal. Views is a powerful querying tool built into Drupal that allows dynamic lists and displays of content to be created without writing custom code. Content can be filtered, sorted, and grouped based on almost any criteria — including taxonomy terms, tags, content types, dates, and more.
But the new Drupal Canvas flips site building in Drupal on its head -- and not all of the power of Drupal has caught up just yet.
While you can drop a view onto a canvas page, at the moment you're limited to "block" views, and you cannot pass any configuration beyond the number of rows to show. This puts you back into old-school Drupal site building -- which kind of defeats the whole point of Canvas, making it easy to lay out your content as you go, and see it as you create.
This is a notable gap for editors and developers who rely on argument-driven Views to build flexible, content-rich pages.
Our solution -- for now
The building blocks of canvas are components. A view itself is sort of a combination of nested components -- and that isn't easy to map into Canvas. But that's not our only option.
Canvas provides an entirely new way to create components. Called "Code components", these new components are built in Javascript, and Canvas provides some helpful libraries to allow you to fetch content from Drupal, from the front end.
Another new technology that recently shipped in Drupal 11, is a server-side Javascript library called HTMX -- this allows you to simply add HTML elements with special attributes to a page, and HTMX makes them appear -- outside the normal page rendering process.
So I thought I would take these two new capabilities, and mash them up to use in Canvas, and skip using views entirely. And... this is the result!
Canvas + HTMX - Dynamic content collections in Drupal Canvas
This video tells the story, and shows how to build out this functionality using a code component, along with the contributed HTMX module:
Getting the component
You can run this yourself, if you can start with the following:
- Drupal 11.2.x+ with Canvas 1.2+
- htmx contrib module (provides /htmx/node/{nid}/{viewMode} endpoint)
- A theme from Dripyard - or adjust the CSS and HTML to work with your theme's component system.
Files
To make this work, you'll need to enable both the jsonapi and the contributed htmx module, along with the configuration manager. Once you've done that, you can import this configuration in the Admin -> Configuration -> Development -> Configuration Synchronization -- from there, go to the Import tab, and Single item, and then select "Code Component" as the type of configuration, and past the contents of the file into the text area. Then clear the cache, and the code component will be available in canvas.
To see the actual Javascript, download this file:
... and here's the CSS to go along with a Dripyard theme:
Questions?
This component was built as part of exploring what's possible with Canvas today. If you run into issues or build something interesting with it, let us know!
Add new comment