SDX extends Drupal's Single Directory Components (SDC) system with reactive capabilities, enabling developers to create dynamic, stateful UI components while maintaining Drupal's server-side rendering. This module bridges the gap between traditional Drupal theming and modern interactive web applications by providing a unified approach to component development.
Features
Server-Side State Management: Components maintain state between requests through PHP classes with reactive properties
Multiple Frontend Strategies: Choose from HTMX (server-driven), Vue.js, React, or Alpine.js (client-driven) for each component
Component-Based Architecture: All component files (template, logic, styles, server-side state) live in one directory, building on SDC's organization
Automatic Detection: SDX automatically discovers and processes components from your SDC directories
Seamless Data Flow: Pass data bidirectionally between Drupal and components with automatic state serialization and hydration
Flexible Storage System: Multiple options for persisting component state (Entity, Session, State API, Cache, User Data)
Developer Experience: Includes attribute-driven configuration, lifecycle hooks, computed properties, validation, and event system
Post-Installation
After installing SDX, you can configure it at /admin/config/user-interface/sdx to set your preferred default driver, security settings, debugging options, and caching behavior.
To create a component:
- Create an SDC component directory following Drupal's SDC guidelines
- Add a PHP class that extends
SdxComponentBasein this directory - Define reactive properties and action methods in your class using PHP attributes
- Update your component's Twig template to use SDX's Twig functions for actions and bindings
- Optionally add client-side logic specific to your chosen driver (HTMX, Vue, React, Alpine)
The module automatically handles component registration, state management, and client-server communication based on your configuration.
Additional Requirements
Does this project need anything beyond Drupal core? Include any dependent modules, libraries, APIs, etc., that are required for this project to work.
Recommended modules/libraries
Frontend libraries based on your chosen drivers:
- HTMX for the default server-driven approach
- Vue.js for Vue driver components
- React for React driver components
- Alpine.js for Alpine driver components
Similar projects
Drupal Vue.js: Focuses on Vue without SDC integration, requiring custom block types
SDX is unique in its integration with Drupal's component architecture, providing multiple frontend strategies within a unified framework while leveraging Drupal's existing component discovery system.
Supporting this Module
This module is maintained as an open-source project. If you find it useful, please consider:
- Contributing code, documentation, or translations
- Reporting issues and helping with testing
- Sharing your use cases and examples
Community Documentation
Currently in development. As the community grows, links to tutorials, example implementations, and demos will be added here.