SDX

SDX extends Drupal's Single Directory Components with React, Vue and Svelte. Write components with modern JavaScript frameworks inside the SDC structure you already know, and keep Drupal's admin interface, permissions, caching, translations and editorial workflow completely intact. No decoupling, no second application to maintain.

Start with one interactive component in an existing Twig theme. Scale to a full single-page application rendered by React, Vue or Svelte. Same codebase, same Drupal.

#sdx on Slack Documentation

SDX in production

tilizy.digital

SDX is maintained by Tilizy Digital. It runs on Drupal 11 with the full stack: React components server-side rendered, SPA navigation between pages, and the DRAST theme engine replacing Twig as the template layer.

Verify it yourself. View source and you get server-rendered HTML that hydrates, not an empty div waiting for JavaScript. Navigate between pages and watch the network tab: no full page loads, no client-side router owning the routes, and Drupal's cache tags still invalidating everything correctly.

Install

composer require 'drupal/sdx:^1.0@alpha'
drush en sdx -y
drush sdx:init      # wizard: framework, bundler, package manager
drush sdx:resolve   # install npm packages into private://sdx/
drush sdx:doctor    # verify the setup

Prefer non-interactive? Enable the pieces directly and skip the wizard:

drush en sdx sdx_react sdx_vite sdx_npm -y
drush sdx:resolve
drush sdx:doctor

Why SDX

Progressive adoption

Drop a single React component into a Twig template today. Replace the whole template layer when you are ready. Nothing forces an all-or-nothing migration.

Framework flexibility

React, Vue or Svelte through a plugin architecture, not a hardcoded dependency. Frameworks are plugins, so a fourth one is a contributed module away.

Still fully Drupal

Blocks, menus, forms, Views, permissions, cache tags, BigPipe, translations and the content editing experience keep working. You are extending Drupal, not escaping it.

Production SSR

A clustered Node.js render server with an LRU cache wired into Drupal's cache tags, and a circuit breaker that degrades to client rendering instead of taking the site down.

Features

Components stay simple: a .component.yml and a .tsx, .vue or .svelte entry point. SDX handles discovery, bundling, dependency resolution and Drupal library generation.

Component system

• Standard SDC directory structure
• Automatic library generation
• Schema-driven props with validation
• TypeScript interfaces generated from schemas
• Cross-extension import aliases
• Nested components and slots

Build pipeline

• Vite with hot module replacement
• Sass and PostCSS support
• Centralized config, no per-module setup
• Reproducible installs with a lockfile
• Bundle size analysis
• npm, pnpm, Yarn or Bun

SPA navigation

• Client-side page transitions
• Scoped partial responses per region
• Hover-based prefetching
• Form interception with AJAX and modals
• Region diffing by cache tag checksum
• Automatic full reload across theme boundaries

Server-side rendering

• Framework-agnostic render server
• LRU cache keyed on Drupal cache tags
• Circuit breaker with automatic recovery
• Graceful fallback to client rendering
• Cache warming and health checks
• Hydration-safe markup

Data layer

• Declare a component's data needs in YAML
• Resolved server-side into typed props
• DataProvider plugins for entity, view and route data
• Preflight validation, which checks fields as users type, before submission, through Drupal's own constraints

Developer experience

• Diagnose the whole setup with sdx:doctor
• Scaffold a component with sdx:create
• Dev server with hot reload via sdx:dev
• sdx:build, sdx:test and sdx:analyze
• Dashboard with build status and package health

Two ways to use it

1. Components in your Twig theme

Keep your existing theme. Add framework components exactly where you need interactivity (a filterable listing, a booking widget, a dashboard) and render them from Twig like any other SDC.

Install: sdx plus a framework and a bundler.

Lowest risk. Works on an existing site.

2. Framework components as the theme layer

Replace Twig entirely. The DRAST theme engine renders every Drupal theme hook through React, Vue or Svelte, with typed JSON props instead of Twig variables.

Install: add SDX DRAST and a base theme.

What tilizy.digital runs in production.

The SDX ecosystem

Project What it adds SDX The core: component discovery, build pipeline, SSR, SPA navigation, data layer. Everything below builds on it. SDX DRAST Theme engine. Replaces Twig with framework components as Drupal's template pipeline, plus DataProviders for typed props on admin routes. SDX Realtime Server-driven reactive components in pure PHP with no JavaScript, WebSocket channels with presence, and SSE broadcast with auto-live DataProviders. SDX React Base
SDX Vue Base Base themes for DRAST. 50+ Drupal template overrides as framework components, SPA shell, region rendering and form handling. Extend them to build your own theme. SDX Aurora A ready-made admin theme built on SDX React Base, with a dark sidebar and DataProvider-powered pages.

Included sub-modules

Frameworks

• sdx_react
• sdx_vue
• sdx_svelte

Bundler

• sdx_vite

Features

• Server-side rendering (sdx_ssr)
• SPA navigation (sdx_router)
• Live field validation (sdx_preflight)
• Debugging tools (sdx_devel)
• Working examples (sdx_examples)

Build

• sdx_sass
• sdx_postcss

Package managers

• sdx_npm, sdx_pnpm
• sdx_yarn, sdx_bun (experimental)

At minimum, enable one framework, one bundler and one package manager.

Requirements

Drupal 11.3 or newer (1.0.0-alpha18 and earlier also install on 10.3+) PHP 8.3 or newer Node.js 18 or newer, on the machine that runs builds Drush 13.7 or newer File system A configured private file system. SDX installs npm packages into private://sdx/

Community and support

Chat on Slack Questions, ideas, architecture discussions and release news happen in #sdx on the official Drupal Slack, where the maintainers are. Free to join: sign up at drupal.org/slack, then open #sdx. Report a bug Bugs, feature requests and support requests belong in the issue queue, where they get tracked, triaged and fixed in a release. Please include your drush sdx:doctor output. Read the docs Getting started, architecture, the build pipeline, SSR, navigation, the data layer, TypeScript, testing, and how to write your own plugins. The full documentation ships in the module under docs/.

Join #sdx on Drupal Slack

How SDX compares

Approach How SDX differs Single Directory Components (core) SDX builds directly on SDC rather than replacing it. It adds framework rendering, a build pipeline, SSR, SPA navigation and a data layer on top of the same directory structure. Fully decoupled front ends No second application, no separate deployment, no rebuilt admin interface. Editors keep the Drupal UI, and permissions and cache invalidation keep working without a bridge layer. Reactivity libraries (Livewire-style) SDX Realtime pursues the same goal of interactivity without writing JavaScript, but is built natively on Drupal's render pipeline, cache tags and form API. Single-framework integrations Frameworks, bundlers, package managers and features are all plugin types. Switching framework does not mean switching module.

Status: SDX 1.0.x is in alpha and under active development. The architecture is stable and it runs production sites, but APIs may still change between alpha releases, so read the changelog before upgrading. This project is not covered by the security advisory policy.

Maintained by Tilizy Digital. Contributions welcome. Come say hello in #sdx.