01 / Explore the architecture
What each layer does
From your existing Drupal to a page React can present.
Explanation and real example ↗Drupal as a platform / Practical guide
More Drupal. One frontend.
Keep content, queries and blocks in Drupal. Deliver their presentation through Custom Elements. Design the experience with React and Next.js.
Drupal
Model, select and control access.
Custom Elements
Define elements, props, slots and displays.
Lupus / CE API
Deliver the page and its supported integrations.
Next.js / React
Interpret the contract and present the experience.
02 / Explore the architecture
CE API and JSON:API
Presentation delivery versus a resource API. They complement each other.
Explanation and real example ↗03 / Explore the architecture
External components and Canvas
The contract connects the frontend catalogue to editorial composition.
Explanation and real example ↗04 / Explore the architecture
Drupal outside Canvas
Entities, Views, blocks, modules and forms: scope and conditions.
Explanation and real example ↗05 / Explore the architecture
From contract to HTML
A small, explicit, recursive adapter. No magic conversion.
Explanation and real example ↗Secondary reference: Canvas Headless
The previous comparison is retained as a reference, not the focus of this POC. Read comparison and limits ↗