mandclu's sandbox: Web Awesome Components

Web Awesome is a library of 65 polished, accessible UI components — buttons, cards, dialogs, form inputs, navigation elements, and more — built as browser-native Web Components. This module makes every one of them available as a drag-and-drop block inside Drupal Canvas, the visual page-building tool included with Drupal core.

Rather than requiring site builders or developers to wire up each component by hand, this module ships with all 65 components pre-built and pre-configured. Each component surfaces the right editing controls in the Canvas sidebar automatically: enum properties become dropdown menus, boolean properties become toggle checkboxes, and string properties become text fields. The components are organized into nine labelled folders (Actions, Display, Feedback, Form Elements, Layout, Media, Navigation, Overlays, and Utilities) so editors can find what they need without hunting through a flat list.

For developers maintaining a long-lived site, the module also includes a Drush command that can regenerate all component definitions from Web Awesome's own machine-readable manifest whenever the upstream library is updated.

Features

• 65 ready-to-use components covering the full Web Awesome library, available in Canvas immediately after enabling the module — no component-by-component setup required.
• Organized component library — components are sorted into nine folders in the Canvas component picker: Actions, Display, Feedback, Form Elements, Layout, Media, Navigation, Overlays, and Utilities.
• Correct Canvas controls for every prop type — enum props (e.g. variant, size, appearance) render as select dropdowns; boolean props (e.g. disabled, pill, loading) render as toggles; string props render as text inputs. Canvas will never show a plain text box where a dropdown would be more appropriate.
• Named slot support — components that accept named slots (e.g. start, end, header, footer) expose each slot as a separate editable field in Canvas. The default slot is always available for primary content.
• Canvas hydration script — a MutationObserver automatically upgrades Web Components as they are dragged into the Canvas editing preview, so components render live without requiring a page reload.
• Drush generator command — drush web-awesome:generate (alias: drush wa:gen) parses the Web Awesome custom-elements.json manifest and regenerates all component files. Supports --dry-run for previewing changes before writing, and --manifest / --output flags for custom paths.

Post-Installation

There is no configuration page. After enabling the module, clear Drupal's caches and open the Canvas editor on any page — the Web Awesome components will already be present in the component library sidebar under Web Awesome folder groups.

Additional Requirements

• Drupal 10 or 11
• Canvas module — required. This module's components are built specifically for the Canvas editing experience and rely on Canvas's component plugin system.
• Web Awesome library — the compiled library files must be installed at web/libraries/webawesome/. The library is available from webawesome.com. A Pro licence is required for production use of some components; see the Web Awesome site for licensing details.
• Drush 12 or 13 — required only if you intend to use the drush web-awesome:generate command. The pre-built components included with the module work without Drush.