Decoupled Drupal Canvas

Drupal canvas offers two approaches for decoupled frontend development:

1. Canvas Code Components + CLI

• Write components using Canvas's browser-based JS editor (React/JSX)
• Sync components to external projects using @drupal-canvas/cli
• Decoupled rendering of canvas data fetched via API (without any Drupal processing)
• More details: Balint's blog post on decoupled Canvas

2. Canvas External JavaScript Components (canvas_extjs)

• Write JavaScript in any framework (React, Vue, ..) and deploy independently
• Trade-off: Lose Canvas JS editor UI for flexibility on how the JavaScript is written
• Supports both client-side rendering and full SSR
• Works with Lupus Decoupled for fully decoupled page API (processed by Drupal, so e.g. blocks using Views)
• Module: https://www.drupal.org/project/canvas_extjs