Drupal as a Composable CMS: The Next Generation of Structured Content

In our latest session at DrupalCon Portland 2024, we talked about our journey through the evolution of Drupal towards a composable CMS.

This article highlights the key points of the session, focusing on the significant milestones and challenges encountered in transforming Drupal into a more modular, flexible, and user-friendly content management system.

You can watch the conference video below:

The Evolution of Drupal and the Concept of Composable CMS

To understand how we got to the concept of Drupal as a composable CMS, first, we must explain the journey that got us here.

In the last ten years, we have been helping with contributions to essential Drupal modules to enhance flexibility and improve user-friendliness significantly, such as Drupal Console (improve the DX while creating modules), Build Hooks (improve the build and deploy process for static sites), GraphQL Compose (improve the GraphQL schema generation from Drupal data structure) and Decoupled Preview Iframe (improve previewing content from your decoupled site) among others.

That said, Structuring Content in Headless Drupal has always been a balancing act between the Developer/Site Builders Experience and the Content Editor/Marketing Experience, leaving one side or the other battling around issues that traditional Drupal offers out of the box.

But as the Drupal ecosystem evolved, so did the challenges and opportunities, particularly in decoupling content from its presentation.

If you want to learn more about what is a composable CMS, read our full article on the topic here.

The Battle for Previewing Decoupled Content

One of the early solutions we tried involved using Paragraphs in combination with Layout Paragraphs. This approach allowed content editors to drag and drop paragraphs within a node, providing a more intuitive and visual way to manage content. However, rendering React components within Drupal posed challenges, such as the need to create separate React applications for each paragraph and render that via Twig.

Another approach was integrating a React application to render Paragraphs as React components. This solution aimed to enhance the live preview and drag-and-drop experience for content editors. While this improved the editorial experience, it also required significant effort to duplicate the Drupal form API capabilities within React, leading to a more complex development process. Managing revisions, previews, and the communication between Drupal and React components further complicated this approach.

The Role and Impact of Using an Iframe in Drupal's Editorial Experience

Throughout this journey, we landed on a solution that may seem simple at first glance, but it’s the most perfectly suited for the job: using an iframe to load the front-end site.

Iframes allow to provide a live preview from your front-end site. By using an iframe, developers can simplify the integration process and provide a more intuitive interface for content editors, adding clickable elements and sending signals back to Drupal making the editing experience more efficient and user-friendly by clicking elements to edit using the Drupal interface.

This solution not only makes content editing easier, and improves the experience of users who interact with CMS daily, it also enhances team workflows, allows for better distribution and discoverability of content, and makes Drupal stand out as a more enjoyable and productive tool for these personas.

In short, this approach ensures that the CMS not only meets the needs of developers but also addresses the requirements of content editors and marketers.

Embracing Composability in Drupal: 4 Pillars of Composable Content

Composability is at the heart of Drupal's next-gen content structuring approach, which entails modularity, reusability, and a clear separation of content from presentation.

This modular approach allows for greater flexibility and scalability, enabling developers to build complex, dynamic sites with ease.

There are four pillars of composable content: modularity, reusability, content variations, and content governance. These principles guide the development of systems where content can be easily reused, customized, and managed effectively.

1. Modularity: One of the core ideas of composability is to break down content into smaller components. These components can be independently managed and reused across different pages and nodes. This modularity allows for greater flexibility and efficiency.
2. Reusability: Reusability in Drupal's composable CMS allows content components to be independently managed and reused across different pages and nodes, enhancing efficiency, consistency, and scalability. By creating a single component that can be used in multiple locations, content updates are automatically reflected everywhere, saving time and ensuring uniformity.
3. Content Variations: Another key principle of composability is the clear separation of content from its presentation. By decoupling these elements, Drupal allows content to be managed independently of its visual design. This facilitates many of the tools that allow successful modern marketing efforts, like A/B testing, personalization, and performance optimization without duplicating content fields.
4. Content Governance: Composability also improves content governance. With modular components, content editors have more control over their content, making it easier to manage updates and revisions, support better content moderation, role-based access, and version control, ensuring that content remains accurate and up-to-date.

The Road Ahead

We prepared a ready-to-use repository you can try right away. Just click here to get started.

Here’s a quick overview of some of the included modules:

• Composable (this modules is still WIP): Manages structured content and separates content from presentation.
• Decoupled Previews Iframe: Uses an iframe for real-time preview and interaction between frontend and backend.
• Visual Editor: Enhances the editorial experience with intuitive editing tools and real-time previews.

Drupal as a Composable CMS offers content editors and marketers many advantages crucial to their work and goals. Here are three of the main ones:

1. Better quality control and branding oversight through multiple visualizations of content.
2. Faster and more efficient content editing to enrich and update evergreen content.
3. A more streamlined workflow empowering content editors to create and publish content from start to finish. 

These modules aim to provide a comprehensive toolkit for building modern, modular, and user-friendly Drupal sites.

Reflection on our journey to Drupal as Composable CMS

The journey from complex solutions like Paragraphs + Layouts and Paragraphs and/or a full React app to render Paragraphs as React components to the more simplified approach of using an iframe showcases the iterative nature of Drupal’s development.

The goal has always been to strike a balance between providing powerful features and maintaining a straightforward and user-friendly interface.

This proposal isn’t new and there are many offerings in the Modern CMS space and open-source projects with brilliant executions in this regard, that provide structured data, support decoupled implementations, and allow editing content directly, via a FE interaction. See what other CMSes such as Sanity, Storyblok, dotCMS, Contentful, Hygraph, among others, are doing.

As Drupal continues to evolve, the journey towards a fully composable CMS promises to bring greater flexibility, efficiency, and user satisfaction. With ongoing development and community collaboration, the future of Drupal looks bright, offering powerful solutions for modern content management needs.

Learn more about Drupal in our article on Previewing Published and Unpublished Content in a Decoupled Drupal Implementation.

Explore some of our work with Drupal in our case study on migrating from WordPress to Drupal with Gatsby JS.