Bridging the gap between Drupal Canvas and React components

By Stewart Robinson

At the end of last year, Drupal released Drupal Canvas – a visual drag-and-drop web page builder that marked a huge shift in the CMS landscape, in particular for marketers and content teams. Some commentators went as far as to call it “transformational” and “a watershed moment”!

With Drupal Canvas now on version 1.2.0 as of 26 February, we’re fully behind this addition to Drupal CMS. Designed specifically for content creators and marketers, it makes site-building much more intuitive.

However, what we quickly realised was there was a large market sector that wasn’t able to take full advantage of this new way of working with Drupal. Essentially, any organisations using React components – reusable UI elements – was lacking a bridge between those components and Drupal Canvas. So our developer Dave Long (longwave) went ahead and built that bridge, which we’ve christened Drupal Canvas React.

How can I add content management to my React app?

Our recommendation is that you use Drupal CMS, which holds all your content, user permissions and workflows, plus Drupal Canvas for page layout, plus our Drupal Canvas React bridge. Using Canvas React as the third element allows anyone who's already got a set of React components to pull them into Drupal Canvas and then use them to lay out their page and build websites.

By doing this, it gives freedom to marketing teams to build specific pages by themselves, with consistent branding – for example to get a campaign up and running quickly – instead of them having to brief a developer to do it for them.

You can build components in Drupal, so what’s the big deal?

It’s true that you can build single-directory components in PHP in Drupal, but these are specific to Drupal. React is far more widely used than Drupal’s SDCs. And in any case, if you’re already using React components you don’t want to spend time and effort recreating them using SDCs: why duplicate the effort you’ve already put into creating them?

Drupal Canvas does have a tool to let you write React components. They have to be written inside Canvas to work with it, so any existing estate of components isn’t supported in this way.

The Canvas React bridge that Dave’s built allows you to both use your existing React components and keep them usable outside Canvas. With Canvas React, you can finally treat Drupal as a CMS and layout tool for the React library you already have.

What’s the ongoing licencing cost for using this Canvas React bridge?

There isn’t one. We’ve made the Canvas React Bridge open source, in keeping with the ethos of the Drupal and React ecosystem, so there’s no licence fee or monthly subscription for the package itself. That’s in contrast to many alternatives where you’ll pay an ongoing fee just to keep the service running.

You will still need some developer time to link your existing React components to Drupal Canvas as it’s not a pure plug and play product. But once that’s done, it’s free to use.

How do I keep my React setup secure when marketers can use React components with Drupal Canvas?

As with all the other content on your website, you keep your React setup secure by setting roles and permissions to control who can do what in Drupal, applying your own security policies, access controls and governance. Ideally, don’t give everyone the power to change everything – instead, let them have the permissions they need to do their jobs, such as building a specific page for an advertising campaign.

For example, you could have a page layout role for people you trust to move components and layouts, plus a separate content or editorial role for users who should only change text and images. That could be further fine-tuned to limit which page types marketers can build and which React components they can touch, such as hero blocks and promotional panels.

Doing this all through Drupal means you’re controlling access and role management in one place instead of working with multiple different companies. The Drupal Canvas React bridge doesn’t bypass security; instead, it connects Drupal’s role/permission system to your React components.

Do I need to work with an agency if I use Drupal Canvas with React components?

Yes, but the extent depends on whether the agency uses our open source Canvas React bridge. It’s possible to do this without Drupal Canvas React but why would you if it’s going to be simpler, and therefore faster, to use our new open source bridge?

We’ve been part of the Drupal ecosystem for years and our developers regularly contribute to Drupal. Canvas React is just one example of how we contribute to the wider Drupal ecosystem. And we’re really proud of it! Find it here and let us know what you think.