Demo 01 / Mixed scope
Without a Canvas template
Compare the visual homepage with the classic insight and its teaser. CE displays preserve another editorial workflow.
Open the insight ↗Canvas Headless and Lupus / Compare with evidence
We do not replace Canvas.
We extend its reach.
Canvas Headless already offers frontend components, previews, routes and languages. Here we show where Lupus adds value: classic displays and Views outside Canvas through a shared delivery contract.
| Area | Canvas Headless | Canvas + Lupus / This POC |
|---|---|---|
| Frontend components | The SDK registers application components and renders previews through the frontend, including Next.js. | This POC shares React and CSS through ExtJS and a custom preview provider. |
| Content outside Canvas | Supports nodes with Content Templates and data through JSON:API. Unmanaged routes return content: null. | CE displays deliver full pages and teasers without a Canvas tree or template. |
| Views and listings | The guide uses JSON:API for queries and listings. We have not tested an equivalent Views display or an embedded View. | lupus_decoupled_views delivers the CE page display with its results and pagination. |
| Contract and routes | fetchPage resolves routes, metadata and redirects. It does more than export a tree. | The page API covers Canvas, classic CE displays and Views pages in this demo. |
| Draft preview | Documents application previews with OAuth and read permissions bound to the editor. | This POC verifies component previews; it does not validate authenticated full-page previews in Next.js. |
| Languages and SSR | Documents language prefixes or query parameters and provides Next.js integration with server rendering. | The demo connects ES/EN translations, localised navigation and SSR. |
| Custom Elements | Also depends on the Custom Elements module and normalises element trees. | We use element, props and slots to integrate three sources with React. |
| Choice and limits | Evaluate its SDK for sites built around Canvas and its templates; the README describes it as experimental. | Evaluate Lupus to preserve displays and Views pages outside Canvas through a shared delivery contract. |
Demo 02 / Reuse Views
The View decides
Browse 3 + 3 + 1 results and reload the second page. Drupal runs the View; Next.js presents it.
Open the second page ↗Demo 03 / Verify the contract
Three sources, one path
Switch between Canvas, node and View. Value lies in covering all three sources, not in having JSON, SSR or languages.
Open the inspector ↗Decision criteria
Evaluate Canvas Headless if your site is built around Canvas and its templates. Evaluate Lupus to preserve classic displays and Views pages outside Canvas through a shared delivery contract. Both approaches require permission, caching and deployment validation.