Drupal Page Builders—Part 3: Other Alternative Solutions
These solutions are alternatives to Paragraphs or Layout Builder. Most of the solutions shared in this part of the series use server-side rendered page generation solutions. In other words, Drupal performs the work of displaying the page. Some Javascript functionality is still sprinkled in. That runs in the browser but is limited to helping autocomplete fields and other such tasks. There are many use cases in which this is exactly the correct solution, especially when it’s not feasible to spend money on the larger team often required by hybrid and fully-decoupled solutions (these are when a front-end Javascript framework such as React supplies extensive functionality).
It’s also common that hybrid and decoupled solutions don’t provide as much integrated functionality as native Drupal does; there are many stories of teams having to recreate in their Javascript framework what Drupal provides natively. Be rigorous when assessing front-end frameworks so that you aren’t surprised.
READ: Drupal Page Builders—Part 1: Paragraph-Based Solutions | ALSO READ: Drupal Page Builders—Part 2: Layout Builder-Based Solutions
However, when a hybrid or fully decoupled solution makes sense, you are now faced with choosing which one. That’s not easy because Javascript frameworks often have their moment of popularity and then lose favor. (Native React probably won’t experience this fate due to its massive market acceptance.) Watch this video for an overview of many of the Javascript frameworks available.
It’s also worth noting that a few solutions, like the 1xINTERNET CMS that will be discussed in Part 4 of the series, employ W3C-standard web components. For those teams looking to adhere to established web standards and avoid the Javascript framework roller-coaster, investigate if web components are the correct choice for you. Learn more about web components with The Story of Web Components (a 7-minute video).
Indeed, components haven’t taken over the web development world yet, but because they are a W3C web standard, a site built with web components may require less maintenance over time. For details on this point of view, read Web Components Will Outlive Your JavaScript Framework by Jake Lazaroff. Learn about the latest features available with this system using this introduction to Lit 3.0 (which makes working with web components easier).
Some of the solutions below will be best for the content area of the page (the way Paragraphs is) while others are good for the entire page (the way Layout Builder is)—so keep that in mind as you make your selection.
Component Builder
Similar to the very popular Entity/Inline Entity Form combination that became popular in Drupal 7, the relatively new Component Builder module provides improved drag-and-drop editing using Entities instead of Paragraphs or Layout Builder; it includes 60 components, which can jump-start any site build. Watch an introduction video here.
DXPR Page Builder
The DXPR Page Builder module is a complete page layout tool coupled with a full set of ready-to-use modules that provide additional functionality. Although there is a free version available, any site more than a blog will want to sign up for the higher-tier paid plans to obtain more functionality and technical support. The interface is intuitive and functional. The company also provides a starter kit for Drupal 10+ sites.
Drupal Site Studio
Formerly called Cohesion, Acquia purchased the product in 2019, maintains it, and is the only source for it.
Site Studio provides two UI kits that can be used in new builds and a slick mechanism for laying out pages that combine Paragraphs and Layout Builder. A demo is available on their site.
Gutenberg
The Gutenberg module derives from the primary page layout mechanism used by Wordpress. The project maintainers suggest that Gutenberg should be considered to be similar to CKEditor, HAX or even Layout Builder as a tool that is useful across many underlying CMSs. See a demonstration video here.
IO Builder
The IO Builder module provides a front-end for Paragraphs but can be extended to all fieldable entities, such as Media and Taxonomy. The maintainers say that they “took a lot of inspiration from the Divi and Elementor plugins in Wordpress.” See a demo here.
HAX
HAX is an acronym for Headless Authoring Experience. The HAX module provides about 100 components out of the box and the ability to add your own.
When the use case is to provide components across dozens or hundreds of sites—especially including systems other than Drupal like WordPress—consider using HAX because it uses the W3C-standard web components.
The web components standard was released in 2011 and has been maturing since then. Web components let you create custom UI elements with HTML and JavaScript that browsers can directly understand. In other words, no extra libraries like React.js are needed. Read an introduction here. The open-wc.org website provides more detailed tutorials on implementing web components. There is a library that helps build web components called Lit, and version 3.0 has several important new features described by the Lit team here.
Click here to learn more about how RedHat and other large sites use web components to streamline component creation across the organization.
Page Manager
Formerly part of the CTools module in Drupal 7, the Page Manager module provides an alternative page layout mechanism that still includes the innovative “page variant” system it developed. Page Manager was a critical part of the Panels ecosystem in Drupal 7; in the latest version of Drupal it’s available on its own. It usually does not make sense to use Page Manager over Layout Builder or even Paragraphs.
Panels/Panelizer
The Panels and Panelizer modules gained a huge following in Drupal 7 because they provide a way to lay out pages and a way to control how pages appear according to user roles and other customizable criteria. Some of the features they provide are available in Layout Builder by adding multiple modules together. Be aware that the project maintainers advise users to switch to Layout Builder if upgrading from Drupal 7.
Conclusion
Although Paragraphs and Layout Builder are capable solutions, there are many others worth investigating—especially if you want more polished solutions with libraries of pre-made components.
In the first three parts of this series, the modules discussed can be added to any site, even if work has begun on building it. This offers great flexibility. The drawback, however, is that configuring a site can take a lot of time and skill. In the final part of this series, we will look at some Drupal distributions that make starting a new Drupal site very fast.
Note: The vision of this web portal is to help promote news and stories around the Drupal community and promote and celebrate the people and organizations in the community. We strive to create and distribute our content based on these content policy. If you see any omission/variation on this please let us know in the comments below and we will try to address the issue as best we can.
Related People
Related Organizations
Comments
You may also like
