Drupal is a registered trademark of Dries Buytaert
drupal 11.3.7 — Update released for Drupal core (11.3.7)! drupal 11.2.11 — Update released for Drupal core (11.2.11)! drupal 10.6.7 — Update released for Drupal core (10.6.7)! drupal 10.5.9 — Update released for Drupal core (10.5.9)! cms 2.1.1 — Update released for Drupal core (2.1.1)! drupal 11.3.6 — Update released for Drupal core (11.3.6)! drupal 10.6.6 — Update released for Drupal core (10.6.6)! cms 2.1.0 — Update released for Drupal core (2.1.0)! bootstrap 8.x-3.40 — Minor update available for theme bootstrap (8.x-3.40). menu_link_attributes 8.x-1.7 — Minor update available for module menu_link_attributes (8.x-1.7). eca 3.1.1 — Minor update available for module eca (3.1.1). layout_paragraphs 2.1.3 — Minor update available for module layout_paragraphs (2.1.3). ai 1.3.3 — Minor update available for module ai (1.3.3). ai 1.2.14 — Minor update available for module ai (1.2.14). node_revision_delete 2.0.3 — Minor update available for module node_revision_delete (2.0.3). moderated_content_bulk_publish 2.0.52 — Minor update available for module moderated_content_bulk_publish (2.0.52). klaro 3.0.10 — Minor update available for module klaro (3.0.10). klaro 3.0.9 — Minor update available for module klaro (3.0.9). layout_paragraphs 2.1.2 — Minor update available for module layout_paragraphs (2.1.2). geofield_map 11.1.8 — Minor update available for module geofield_map (11.1.8).
← All modules

custom_elements

108 sites Security covered
View on drupal.org

The Custom Elements module provides the framework for rendering Drupal data (entities, fields, ...) into custom elements markup. Custom elements can be easily rendered by frontend components, e.g. via web components or various Javascript frontend frameworks. This enables Drupal to render into high-level theme components, while the actually rendering of the components is handled by a frontend application (possibly in the browser).

The Custom Elements module provides

  • the UI to configure the custom element output for entities by view-mode (3.x only)
  • the API to build a (nested tree) of custom element objects, with associated cache metadata
  • the API to serialize a tree of custom objects into markup or into a JSON representation
  • the API for other modules to customize how data is rendered into custom elements via custom element processors

Frontend rendering

Today's browsers provide an API for developers to define their own HTML elements, like <flag-icon country="nl"></flag-icon>. Besides that, many frontend frameworks render their components using the same, or similar custom elements syntax. That way, we can render a custom element output by Drupal with Web components or any component-oriented frontend
framework, like Vue.js or React.

Example

This is how twitter paragraph could look like:

<paragraph-twitter src="https://x.com/the_real_fago/status/1559907161328738304" title="The title"></paragraph-twitter>

Then a frontend framework could implement a suiting component with src and title attributes for rendering. Please refer to the Lupus Decoupled docs for a more complete example.

How to use it

The module can be used for progressively rendering individual entities via custom elements by using respective view-modes. Together with the Lupus Custom Elements Renderer module it may be used to fully decouple the frontend.

The easiest way to get started is to use Lupus Decoupled Drupal, which provides an easy to use, fully decoupled out-of-the-box setup with Custom Elements.

For more information and example usage, please refer to the Lupus Decoupled Documentation.

Optional features

  • Custom elements UI: Configure custom-elements output by entity view mode (3.x only)
  • Canvas and Canvas ExtJS support: Supports rendering canvas pages into custom elements (3.x only)
  • Thunder integration: Module that provides an example setup for Thunder paragraphs

Related modules

  • The module forms the core of Lupus Decoupled Drupal, which provides an easy to use, fully decoupled out-of-the-box setup with Custom Elements.
  • Lupus Custom Elements Renderer - Switches the main content renderer to provide API responses using custom elements markup or a custom elements json serialization.

Status

  • Version 3.x is recommended and contains more features
  • Version 2.x is receives security and critical bug fixes only. Upgrade to 3.x!
  • 1.x is (long) obsolete and not supported anymore.

Contribute

Activity

Total releases
12
First release
Feb 2025
Latest release
4 days ago
Release cadence
39 days
Stability
100% stable

Release Timeline

Releases

Version Type Release date
3.3.8 Stable Apr 14, 2026
3.3.7 Stable Apr 14, 2026
3.3.6 Stable Mar 23, 2026
3.3.5 Stable Mar 11, 2026
3.3.4 Stable Feb 25, 2026
3.3.3 Stable Feb 4, 2026
3.3.2 Stable Dec 16, 2025
3.3.1 Stable Dec 5, 2025
3.3.0 Stable Dec 4, 2025
3.2.0 Stable Oct 12, 2025
3.1.0 Stable Jun 4, 2025
3.0.2 Stable Feb 7, 2025