Every Tool Chosen
for a Reason
The 2026 Stack: Standards-First, Framework-Agnostic, Future-Proof
Nothing in this stack was chosen by popularity or convenience. Every technology was evaluated head-to-head against alternatives, measured on bundle size, Drupal compatibility, developer experience, and long-term standards alignment. This page shows the receipts.
The Full Stack, Layered
Four horizontal layers plus a vertical design token pipeline. Each layer has a clear responsibility and a specific set of tools.
Documentation
Astro / Starlight
Storybook 10.x
CEM
Developer Experience
Storybook 10.x
Vitest 4.x
Playwright
Component Runtime
Lit 3.x
TypeScript 5.7
Web Components
Build Tools
Turborepo
npm workspaces
Head-to-Head Comparisons
Every major technology was evaluated against real alternatives. Here are the comparison matrices that drove each decision.
Lit 3.x vs the Field
| Criteria | Lit 3.x | Stencil | FAST | Vanilla |
|---|---|---|---|---|
| Bundle size | ~5 KB | ~14 KB | ~8 KB | 0 KB |
| TypeScript | Native | Native | Native | Manual |
| Drupal compat | Excellent | Good | Good | Excellent |
| SSR support | ||||
| Community | Large | Medium | Small | N/A |
| Storybook | Native | Plugin | Plugin | Manual |
Best balance of size, DX, and Drupal compatibility. 5 KB runtime gives you reactive properties, Shadow DOM, and TypeScript decorators. Vanilla is lighter but requires building every abstraction from scratch.
Vitest 4.x vs the Field
| Criteria | Vitest 4.x | Jest + JSDOM | Web Test Runner |
|---|---|---|---|
| Real browser | Yes | No (JSDOM) | Yes |
| Speed vs Jest | 2-10x faster | Baseline | Medium |
| Storybook 10 | Native | Plugin | None |
| Watch mode | |||
| TypeScript | Native | Transform |
Unified test runner for unit, browser, and Storybook tests. Storybook 10 native integration is the decisive factor: one runner, one config, one mental model. Real browser testing via Playwright catches issues JSDOM never will.
Terrazzo vs the Field
| Criteria | Terrazzo | Style Dictionary | Theo |
|---|---|---|---|
| W3C DTCG spec | Native | Plugin | No |
| Output formats | CSS, JS, SCSS | CSS, JS, SCSS+ | CSS, JS |
| Type safety | Yes | Partial | No |
| Active dev | Yes | Yes | Archived |
Native W3C DTCG support, successor to Cobalt UI. The W3C Design Tokens Community Group specification reached its first stable version (2025.10). Terrazzo is the only tool built from the ground up for this standard.
Vite vs the Field
| Criteria | Vite | Rollup | esbuild |
|---|---|---|---|
| Dev server | Built-in | Manual | Manual |
| Library mode | Native | Native | Limited |
| Storybook | Native | Plugin | Plugin |
| Tree-shaking | Yes | Yes | Partial |
| HMR | Instant | No | No |
Native library mode powers both Storybook and the component build. Vite uses Rollup under the hood for production but adds instant HMR, a built-in dev server, and first-class Storybook 10 support. Best of all worlds.
Dual System: Starlight + Storybook
| Responsibility | Storybook 10.x | Astro / Starlight |
|---|---|---|
| Interactive demos | Primary | Embedded via iframe |
| API reference | Autodocs (from CEM) | Comprehensive |
| Integration guides | -- | Prose + tutorials |
| Visual testing | Chromatic | -- |
| Search | Pagefind (merged) | Pagefind (unified) |
| JS shipped | React runtime | 0 KB (static HTML) |
Storybook answers "what does it look like?" Starlight answers "how do I use it?" CEM acts as the single source of truth feeding API docs into both systems. Pagefind mergeIndex provides unified cross-site search.
Bundle Size Showdown
The runtime cost of choosing a component framework. Lit's ~5 KB gives you full reactive Web Components. Compare that to shipping an entire framework.
Lit 3.x
The Integration Map
How every tool connects in the development pipeline, from authoring a component to deploying it in Drupal.
Performance by the Numbers
Measured metrics from the prototype build. Every number here is a real measurement, not a marketing claim.
This Stack Will Still Work in 2030
Every core technology is backed by a W3C standard, browser-native API, or open specification. No single vendor controls the stack.
Web Components (Custom Elements v1)
A W3C standard since 2018, natively supported in all modern browsers. No polyfills needed for Chrome 90+, Firefox 88+, Safari 14+. The browser IS the runtime -- no framework needed to render.
Shadow DOM + CSS Custom Properties
Shadow DOM provides true encapsulation. CSS custom properties pierce through Shadow DOM, providing the only viable theming mechanism. Both are browser-native APIs that require zero library support.
Custom Elements Manifest (CEM)
An open community specification for documenting Web Component APIs. Machine-readable JSON that feeds Storybook, IDEs, and documentation systems. Not controlled by any single vendor.
W3C DTCG Design Tokens (2025.10)
The W3C Design Tokens Community Group specification reached its first stable version in October 2025. Token files written today are forward-compatible with every tool that adopts the standard.
ES Modules
Standard ES2021 modules shipped directly to the browser. No CommonJS, no UMD. Modern Drupal (10.3+) and all evergreen browsers support ES modules natively. The distribution format will never need a major migration.