If you're building a Drupal site with a web component library — buttons, cards, form controls, whatever your design system provides — you normally have to hand-write a Drupal Single Directory Component (SDC) for every single element: a YAML schema describing its props and slots, a Twig template, and the CSS/JS to load it. That's a lot of repetitive, error-prone boilerplate if your library has more than a handful of components.

Most modern web component libraries can already describe themselves in a Custom Elements Manifest (CEM) — a standard JSON file listing every element's attributes, properties, slots, events, and CSS custom properties. This module reads that file and generates a ready-to-use SDC for each element automatically, so you get Drupal-native, theme-able, Layout Builder/Canvas-compatible components without writing the boilerplate by hand.

Features

Generates one SDC per custom element from any valid Custom Elements Manifest file — not tied to a specific component library.
Maps CEM properties/attributes to SDC props, and CEM slots to SDC slots.
Exposes CEM CSS custom properties as SDC props, so they're themeable through a normal property form.
Choose your component config format: .component.yml or .component.json.
Choose where generated components live: a dedicated module, or your active theme's components/ directory.
Choose how the underlying element JS/CSS is loaded: a version-pinned CDN reference, or assets vendored locally and served through a generated Drupal library.
Documents each component's custom events in its generated README, so you know what to wire up manually.
Safe re-generation: when a library ships a new manifest version, regenerate without clobbering hand-customized values — lock specific config keys per component so they're preserved across runs.

Post-Installation

Once enabled, you can generate components two ways: through an admin form, or via drush generate sdc:cem. Either way, you'll point the module at a Custom Elements Manifest file (a local path, an upload, or a URL), choose your output target (module or theme) and config format, and run the generation. The resulting SDCs appear in the chosen location's components/ directory and are immediately usable anywhere Drupal core's SDC system is — Twig {% include %}, Layout Builder, or Drupal Canvas's native SDC support.

This project is in early development. The admin UI and Drush generator are not yet built — follow the issue queue for progress.

Additional Requirements

Drupal core ^11 only (uses core's built-in Single Directory Components feature, no other contrib dependencies). To generate anything useful, you'll also need a Custom Elements Manifest file — this module doesn't ship one; it's produced by your web component library's own build process (for example, via the Custom Elements Manifest Analyzer).

Recommended modules/libraries

Drupal Canvas has native SDC support, so components generated by this module are pickable and configurable there without any extra integration work.

Similar projects

Drush 12+ ships a built-in theme:sdc:component generator, and the Component Libraries: Generator module (now largely superseded by that) — both scaffold a single blank SDC interactively, with no awareness of an existing manifest. Single Directory Web Component Generator also generates SDCs from web components, but doesn't appear to integrate with a Custom Elements Manifest. This module's distinct focus is bulk, manifest-driven generation: point it at one CEM file and get every element's SDC at once, kept in sync as the manifest changes.

Supporting this Module

No funding links yet.

Community Documentation

This project is brand new — documentation, a demo, and a live roadmap will be linked here as development progresses.

Custom Elements Manifest to SDC Generator