Canvas External JavaScript Components

This module adds a new component source plugin to Canvas that allows you
to integrate external JavaScript-rendered components (like Vue, React, or
Nuxt components) into Canvas pages.

The External JavaScript component source works by:

• Storing component metadata (props, slots) within Canvas component configuration entities
• Rendering components using custom JavaScript, either provided as custom Javascript files or loaded via the Custom Elements previews.

Requirements

• Drupal 11.2+
• Canvas module
• Optional: Custom Elements module

Usage options

• JavaScript may be used to render client-side within Drupal, either via custom JavaScript or Custom Elements previews
• Fully decoupled - via Custom Elements and Lupus Decoupled pages are provided via API and can be rendered fully decoupled, with full server-side rendering support (when provided by the frontend framework)

Related modules

• The Custom Elements module provides a pluggable component-preview system that may be used to render components. Atm it comes with support for Nuxt. When paired with Lupus CE Renderer provides a full-page API for Canvas pages.
• Lupus Decoupled builds upon the Custom Elements and Lupus CE Renderer modules to provide an easy to use setup with fully-decoupled frontend rendering.

Useful frontend packages

• fullfatthings/drupal-canvas-react helps exposing React components to Canvas and generates a component-index.json file to use with this module.
• The nuxt-component-preview Nuxt-module exposes Vue components to Canvas and generates a component-index.json file to use with this module.

Example frontend

• Nuxt example from DrupalCon Vienna 2025 session

💡Compatibility note

The Canvas External JavaScript Components module builds upon the
Canvas ComponentSource API, which is not yet declared stable. This is
mitigated by the following process:

• Each release of Canvas External JavaScript Components is only declared
  compatible with the current Canvas minor version (e.g. 1.4.*), not with any
  future versions.
• When a new Canvas version is released, the module is updated and any
  compatibility issues are checked and addressed before a compatible release is
  published.
• As a result, you may have to wait a few days before a compatible version for a new Canvas minor version is out. But this ensures updates are always safe and tested.