Canvas Code Components as SDC

Drupal Canvas lets you build React code components in the browser, but they can only be placed using Canvas.. This module registers each one as a Single Directory Component, so the rest of your site can use them too.

Use it to theme anything Canvas doesn't reach:

1. Node, term, user, media and Commerce templates — node--article.html.twig, field--*.html.twig
2. Views row and field templates
3. Blocks, regions, menus, page.html.twig, html.html.twig
4. Any render array, from a preprocess function, block plugin, field formatter, controller or Layout Builder

From a Twig template:

{{ include('code_component:hero', { title: 'Hello' }) }}

Or from PHP:

$build['promo'] = [
  '#type' => 'component',
  '#component' => 'code_component:hero',
  '#props' => ['title' => 'Hello'],
];

Props and slots come straight from the code component, and rendering reuses Canvas's own hydration, so a component behaves the same whether it is placed in Canvas or called from a template.