Building Fully Decoupled Frontends with Drupal Canvas and Code Components

Staff Reporter

Balint Kleri’s latest blog post outlines how Drupal Canvas transforms frontend development through Code Components, React-based units stored as Drupal config entities and editable in-browser with real-time preview, Tailwind CSS, and zero setup.

Developers can sync components between Drupal and external environments, @drupal-canvas/cli, integrate them into tools like Storybook, or even build standalone frontend apps using frameworks like Astro or Nuxt. Kleri demonstrates this with a canvas-cc-starter repo and Astro demo app.

The Canvas External JavaScript Components module further expands flexibility, letting developers register custom JavaScript or Vue components, even if the in-browser editor only supports React. Projects like Lupus Decoupled show how to mix rendered HTML and decoupled components. The post also teases upcoming server-side rendering (SSR) capabilities with experimental support via a Node.js API, with official features planned for 2026.

Reference: Decoupled frontend with Drupal Canvas by Bálint Kléri (16 October 2025)

React

Tailwind CSS

JavaScript

Storybook

Drupal Canvas

Disclosure: This content is produced with the assistance of AI.

Disclaimer: The opinions expressed in this story do not necessarily represent that of TheDropTimes. We regularly share third-party blog posts that feature Drupal in good faith. TDT recommends Reader's discretion while consuming such content, as the veracity/authenticity of the story depends on the blogger and their motives.

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 reach out to us at #thedroptimes channel on Drupal Slack and we will try to address the issue as best we can.