Run React, Vue, Angular, Svelte, Solid, Preact, Lit, Qwik, Alpine.js, Stencil, HTMX, Stimulus, and Vanilla JS micro-apps side by side in the same page. Each app lives in its own Shadow DOM with full CSS isolation. Apps communicate through a shared event bus and store — no tight coupling, no iframes.

Add AI to any app with one line. Connect your own LLM (OpenAI, Anthropic, Ollama) and your app gains context-aware tool calling, autonomous agents, and cross-app orchestration. WebMCP ready for Chrome 146+.

npm install wu-framework

v2.2: live props without remounting — wu.update(name, props) (React, Preact, Vue, Svelte, Lit, Vanilla) · createWuAdapter() to author adapters · DevTools: wu.inspect() + wu.showInspector() + window.__WU_DEVTOOLS__. All additive. See CHANGELOG.md.

v2.1: honest sandbox modes + reference-counted mount/unmount for robust StrictMode + Suspense flows. New: wu.getSandboxInfo(name), strictFallback option, wu.tagStyleAsApp(el, name), styleMode aliases none / own-only. All additive — zero breaking changes from v2.0. See CHANGELOG.md.

📚 Full docs: docs/ — API reference, concepts deep dives, AI guide, 12 recipes.

v2.0: bundle reduced from 194 → 105 KB (−46%) via lazy chunks for AI and sandbox modes. Breaking changes documented in CHANGELOG.md. The runtime API (wu.mount, wu.ai.*, wuReact.register, etc.) is preserved — most apps need no code changes. AI users may want to add await wu.aiReady() for explicit warm-up if they need the chunk loaded before first call.

30-Second Demo

import { wu } from 'wu-framework';
import { wuReact } from 'wu-framework/adapters/react';
import { wuVue } from 'wu-framework/adapters/vue';

// Register micro-apps from different frameworks
wuReact.register('cart', CartApp);
wuVue.register('catalog', CatalogApp);

// Mount them — each gets its own Shadow DOM
await wu.mount('cart', '#cart-container');
await wu.mount('catalog', '#catalog-container');

// They talk to each other via events
wu.emit('cart:item-added', { productId: 'SKU-42' });
wu.on('catalog:product-selected', (e) => console.log(e.data));

// Add AI with one line — BYOL (Bring Your Own LLM)
wu.ai.provider('openai', { endpoint: '/api/ai/chat', model: 'gpt-4o' });
wu.ai.action('addToCart', {
  description: 'Add a product to the shopping cart',
  parameters: { productId: { type: 'string', required: true } },
  handler: async (params) => wu.emit('cart:item-added', params),
});

// Now the AI can control your app
await wu.ai.send('Add product SKU-42 to the cart');

Why Wu?

| | Wu Framework | single-spa | Module Federation | iframes | |---|:---:|:---:|:---:|:---:| | Framework adapters | 13 | 4 | 1* | Any | | Shadow DOM isolation | Yes | No | No | Yes (heavy) | | Shared event bus | Built-in | Manual | Manual | postMessage | | Shared store | Built-in | Manual | Manual | No | | Standalone mode | Automatic | No | No | N/A | | AI integration | Built-in | No | No | No | | WebMCP (Chrome 146+) | Built-in | No | No | No | | MCP Server (dev tools) | Built-in | No | No | No | | Dependencies | 0 | 0 | Webpack 5 | N/A | | Bundle size (min, ESM) | ~109 KB core + lazy chunks | ~10 KB | Varies | N/A |

*Module Federation is Webpack-coupled; Wu is bundler-agnostic.

Features

Core

• 13 Framework Adapters — React, Vue, Angular, Svelte, Solid, Preact, Lit, Qwik, Alpine.js, Stencil, HTMX, Stimulus, Vanilla
• Shadow DOM Isolation — CSS and DOM fully sandboxed per app
• 3 Sandbox Strategies — Shadow DOM, Proxy, iframe — choose per app
• 3 CSS Isolation Modes — shared, isolated, fully-isolated per app
• Event Bus — Namespaced pub/sub with wildcards, replay, and middleware
• Shared Store — Cross-app reactive state with dot-path notation and persistence
• Plugin System — Extend Wu with lifecycle hooks
• Performance Monitor — Mount time, memory, FPS tracking per app
• Error Boundaries — Catch and recover from micro-app failures
• Keep-Alive — Preserve app state when hiding/showing
• Prefetch — Speculation Rules API with automatic fallback chain
• Cookie Overrides — QA redirects individual apps to different URLs per-browser
• Standalone Mode — Every micro-app works without a shell, zero lock-in

AI (BYOL — Bring Your Own LLM)

• 4 Paradigms — App→LLM, LLM→App, Autonomous Agent, Cross-App Orchestration
• Tool Calling — Register actions the AI executes autonomously
• Streaming — Async generator for real-time responses
• Multi-turn — Namespaced conversations with history
• Reactive Triggers — Events automatically invoke the AI
• Auto Context — Store state, apps, events injected into the system prompt
• 10 Browser Actions — Screenshot, click, type, navigate, read console/network
• WebMCP — wu.ai.expose() registers tools via navigator.modelContext (Chrome 146+)
• MCP Server — Connect Claude Code, Cursor, or any MCP client to your live app
• 4-Layer Security — Permissions, rate limiting, circuit breaker, loop protection
• Workflows — Reusable parameterized AI recipes

Quick Start

1. Register your micro-app

// React
import { wuReact } from 'wu-framework/adapters/react';
wuReact.register('orders', App);

// Vue
import { wuVue } from 'wu-framework/adapters/vue';
wuVue.register('products', App);

// Angular (standalone)
import { wuAngular } from 'wu-framework/adapters/angular';
wuAngular.registerStandalone('settings', AppComponent, { createApplication, createComponent });

// Svelte 5
import { wuSvelte } from 'wu-framework/adapters/svelte';
wuSvelte.registerSvelte5('dashboard', App);

// Qwik
import { wuQwik } from 'wu-framework/adapters/qwik';
wuQwik.register('widget', QwikApp);

// Alpine.js
import { wuAlpine } from 'wu-framework/adapters/alpine';
wuAlpine.register('search', initFn);

// Stencil (Web Components)
import { wuStencil } from 'wu-framework/adapters/stencil';
wuStencil.register('badge', 'my-badge');

// HTMX
import { wuHtmx } from 'wu-framework/adapters/htmx';
wuHtmx.register('feed', { template: '<div hx-get="/api/feed">...</div>' });

// Stimulus
import { wuStimulus } from 'wu-framework/adapters/stimulus';
wuStimulus.register('form', { controllers: { hello: HelloController }, template: '...' });

// Same pattern for Solid, Preact, Lit, Vanilla

2. Mount from the shell

import { wu } from 'wu-framework';

await wu.init({
  apps: [
    { name: 'header',  url: 'http://localhost:3001' },
    { name: 'sidebar', url: 'http://localhost:3002' },
    { name: 'content', url: 'http://localhost:3003' },
  ]
});

await wu.mount('header',  '#header-container');
await wu.mount('sidebar', '#sidebar-container');
await wu.mount('content', '#content-container');

3. Cross-app communication

import { emit, on, getState, setState } from 'wu-framework';

// Events
emit('user:login', { userId: 123 });
on('user:*', (event) => console.log(event.data));

// Shared store
setState('user.name', 'John');
getState('user.name'); // 'John'

4. Add AI (optional, lazy-loaded)

The AI subsystem (~71 KB) is loaded on demand — the first call to wu.ai.* triggers a dynamic import. Sync config calls (provider, action, …) queue and return the proxy for chaining. Async calls (send, stream, agent) await the chunk transparently.

wu.ai.provider('ollama', {
  endpoint: 'http://localhost:11434/api/chat',
  model: 'llama3',
});

// First call triggers the chunk load
const response = await wu.ai.send('What apps are mounted?');

// Or warm up explicitly (useful before showing an AI button in UI)
await wu.aiReady();

WuCommerce — Real-World Example

Wu ships with WuCommerce, a Shopify-like merchant dashboard where every section is a real micro-app built with a different framework.

| Micro-app | Framework | What it does | |-----------|-----------|-------------| | Topbar | Preact | Store name, nav tabs, search, notifications, theme toggle | | Dashboard | Svelte 5 | KPI cards, sparklines, recent orders, revenue chart | | Orders | React | Order table with filters, search, status badges | | Products | Vue 3 | Product catalog grid, stock badges, category filter | | Customers | Solid.js | Customer list, segment badges, click-to-filter-orders | | Analytics | Lit | Revenue bar chart, traffic donut, top products | | Chat | Vanilla JS | Floating chat widget with conversations and messages | | Settings | Angular 21 | Store config form, shipping zones, payment methods |

All 8 apps communicate through Wu's event bus and shared store. Click a customer → orders filter. Toggle theme → all 8 apps update. Change store name in settings → topbar updates.

3 Sandbox Strategies

| Mode | How it works | Tree shaking | Source maps | HMR | JS isolation | |------|-------------|:---:|:---:|:---:|:---:| | module (default) | import() + Proxy side-effect tracking | Yes | Yes | Yes | None (cleanup tracker only) | | strict | Hidden iframe + real import() | Yes | Yes | Yes | Iframe-level (separate window) | | eval | Fetch HTML → parse → with(proxy){} | No | No | No | Proxy-trap-level |

module is honest naming since v2.1: the proxy tracks side effects so they can be undone on unmount, but does not prevent global pollution while the app is running. Choose strict for real JS isolation.

await wu.init({
  sandbox: 'strict',           // global default
  strictFallback: false,       // CORS = Error, not silent eval (v2.1)
  apps: [
    { name: 'header',    url: '...', sandbox: 'module' },
    { name: 'analytics', url: '...', sandbox: 'strict' },
    { name: 'legacy',    url: '...', sandbox: 'eval' },
  ]
});

// Verify what isolation level actually got applied (v2.1)
const info = wu.getSandboxInfo('analytics');
// { requestedMode: 'strict', actualMode: 'strict', isolationLevel: 'iframe', mounted: true }

Auto-cleaned on unmount: timers, intervals, rAF, event listeners, localStorage keys, DOM mutations. Mount/unmount is reference-counted (v2.1) so multi-cycle StrictMode + Suspense flows don't tear down apps that are still needed.

3 CSS Isolation Modes

| Mode | Alias (v2.1) | What happens | When to use | |------|------|-------------|-------------| | shared | — | Host styles injected into Shadow DOM | Apps sharing a design system (Tailwind) | | isolated | none | Pure Shadow DOM — no external styles | Fully independent apps | | fully-isolated | own-only | Only the app's own styles | Apps that need their CSS but not global CSS |

{ "name": "my-app", "entry": "index.js", "styleMode": "own-only" }

For non-Vite bundlers (webpack, esbuild, plain HTML), tag your styles explicitly so own-only mode picks them up:

import { wu } from 'wu-framework';

const style = document.createElement('style');
style.textContent = `/* your styles */`;
wu.tagStyleAsApp(style, 'cart');
document.head.appendChild(style);

AI Paradigms

1. App → LLM → App

const response = await wu.ai.send('What items are in the cart?');

2. LLM → App → LLM (WebMCP)

wu.ai.expose(); // Registers all tools via navigator.modelContext (Chrome 146+)

3. Autonomous Agent

for await (const step of wu.ai.agent('Find the top customer and show their profile')) {
  console.log(`Step ${step.step}: ${step.content}`);
}

4. Cross-App Orchestration

const result = await wu.ai.intent('Find customer Emma and refund order #4821');
console.log(result.appsInvolved); // ['customers', 'orders']

Plugins & Hooks

import { usePlugin, createPlugin, useHook } from 'wu-framework';

usePlugin(createPlugin({
  name: 'analytics',
  install: (api) => api.on('app:mounted', (e) => track(e)),
  afterMount: async (ctx) => log('mounted in', ctx.mountTime, 'ms')
}));

useHook('beforeMount', async (context, next) => {
  console.log('Mounting:', context.appName);
  await next();
});

Phases: beforeInit → afterInit → beforeLoad → afterLoad → beforeMount → afterMount → beforeUnmount → afterUnmount

Prefetch (Speculation Rules API)

wu.prefetch(['sidebar', 'analytics']);
wu.prefetch(['sidebar'], { trigger: 'hover', action: 'prerender' });
wu.prefetchAll();

Fallback chain: Speculation Rules API (Chrome 121+) → <link rel="modulepreload"> → <link rel="prefetch">

Cookie Overrides for QA

wu.override('sidebar', 'http://localhost:5174');
wu.getOverrides();   // { sidebar: 'http://localhost:5174' }
wu.removeOverride('sidebar');

QA sets a cookie → only their browser sees the override. Everyone else sees production. 3-layer security: environment gate, domain allowlist, visual indicator.

Project Stats

| Metric | Value | |---|---| | Source files | 73 (src/**/*.js) | | Lines of code | ~24.8k | | Test cases | 702 (24 test files, Vitest) | | Framework adapters | 13 | | AI modules | 12 | | Core modules | 23 | | Runtime dependencies | 0 | | Bundle (ESM, minified) | ~109 KB core (AI + sandbox modes lazy-loaded) | | Lazy chunks | AI ~71 KB · iframe-sandbox ~4 KB · html-parser ~2 KB · script-executor ~2 KB |

Build

npm run build          # ESM + CJS + UMD + Dev
npm run test           # 702 tests (Vitest)
npm run test:coverage  # Coverage report

| Output | Format | Use | |--------|--------|-----| | wu-framework.esm.js | ES Module | Bundler imports | | wu-framework.cjs.js | CommonJS | Node.js require | | wu-framework.umd.js | UMD | CDN / script tag | | www.wu-framework.com.js | ES Module | Development |

Architecture

┌───────────────────────────────────────────────────────────────────────┐
│                       SHELL (any framework)                          │
├──────────┬──────────┬──────────┬──────────┬──────────┬───────────────┤
│ Shadow   │ Shadow   │ Shadow   │ Shadow   │ Shadow   │ Shadow   ...  │
│ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │ ┌──────┐    │
│ │Topbar│ │ │Dashbd│ │ │Orders│ │ │Produc│ │ │Custo.│ │ │Analyt│    │
│ │Preact│ │ │Svelte│ │ │React │ │ │Vue 3 │ │ │Solid │ │ │ Lit  │    │
│ └──────┘ │ └──────┘ │ └──────┘ │ └──────┘ │ └──────┘ │ └──────┘    │
├──────────┴──────────┴──────────┴──────────┴──────────┴───────────────┤
│                       WU FRAMEWORK CORE                              │
│  Sandbox (module/strict/eval) · EventBus (wildcards, replay)         │
│  Store (dot-paths, batch) · StyleBridge (shared/isolated/fully-iso)  │
│  Loader · Hooks · Plugins · Cache · Prefetch · Overrides             │
├──────────────────────────────────────────────────────────────────────┤
│                       WU AI (BYOL)                                   │
│  Provider · Actions · Agent · Orchestrate · Triggers · Context       │
│  Browser Actions · WebMCP · MCP Server · Workflows · Security        │
└──────────────────────────────────────────────────────────────────────┘

Documentation

Full documentation at www.wu-framework.com

• Quick Start — Get running in 5 minutes
• Getting Started — Deeper tutorial with cross-app communication, includes the production-only gotchas (wu.json missing → MIME error, inline entry ignored, silent strict→eval fallback)
• API Reference — Full API docs, including the Manifest (wu.json) schema with entry-resolution rules
• Event Bus — Inter-app communication
• Shared Store — Cross-app reactive state
• Sandbox — JS isolation strategies
• AI Overview — 4 AI paradigms
• AI Actions — Register tools for the LLM
• Browser Actions — 10 built-in browser tools
• MCP Server — Connect AI agents to live apps
• CSS Isolation — Shadow DOM style modes
• Deployment — Production deployment guide

Browser Support

Chrome 80+, Firefox 78+, Safari 14+, Edge 80+. Shadow DOM v1 required.

What if Wu Framework could think without thinking?

User: "add to cart"

                  Before                              After
                  ──────                              ─────
          wu.ai.send() → LLM                 wu.ai.send() → ???
          ~2,000 ms                           ~0.73 ms
          $0.003 per call                     $0.000

Something is coming. It learned from every LLM call you ever made. It doesn't need the cloud anymore.

99.79% accuracy. 0.73 milliseconds. 800 KB. Zero GPU. Zero internet.

274x faster than neural networks. And it dreams.

COMING SOON

Wu CLI

The official CLI for wu-framework. One binary, one port, all your micro-apps.

npm install -g @wu-framework/cli

wu create my-project    # Guided interactive scaffolding (13 frameworks)
cd my-project
wu dev                  # Native Zig dev server on one port (Windows UTF-8 ready)
wu build                # Production build (parallel Vite + React/Vue/Svelte shells)
wu serve                # Serve production build

Features:

• Native SIMD HTTP server written in Zig 0.16.0
• Guided Dialogue: Step-by-step project creation with intelligent naming.
• Multi-Framework Shells: Generate shells in React (with WuSlot), Vue, or Svelte.
• Three-tier compilation: Native Zig JSX (0-2ms) -> Compiler Daemon (10-50ms) -> Node fallback
• Two-level cache with 73-138x speedup on warm restart
• Theme-aware production shell with dark/light toggle
• 13 framework app templates with CSS variable theming

See @wu-framework/cli for full documentation.

v2.0 Migration

Most code keeps working — wu.mount, wu.ai.*, wuReact.register, and wu.emit/on/store are unchanged. The transparent wu.ai proxy means existing wu.ai.provider().action().send(...) chains keep their sync semantics.

What did change (full list in CHANGELOG.md):

// AI helper classes moved to a subpath (lazy chunk).
- import { WuAI, WuAIAgent } from 'wu-framework';
+ import { WuAI, WuAIAgent } from 'wu-framework/ai';

// Sandbox internals moved to subpaths (also lazy).
- import { WuIframeSandbox } from 'wu-framework';
+ import { WuIframeSandbox } from 'wu-framework/sandbox/iframe';

// Eager `adapters` object replaced by async loader.
- import { adapters } from 'wu-framework/adapters';
- adapters.react.register('cart', App);
+ import { loadAdapter } from 'wu-framework/adapters';
+ const wuReact = await loadAdapter('react');
+ wuReact.register('cart', App);

// (or just import the specific subpath — same as before)
import { wuReact } from 'wu-framework/adapters/react';

Security changes worth knowing:

• WuStore.set('__proto__.x', v) now throws (was silently polluting Object.prototype).
• wu.eventBus.emit(name, data, { appName: 'wu-ai' }) from user code is rejected in strictMode unless you hold the internal token. Use a registered app name + registerApp() token instead.

Contributing

Contributions welcome. Please open an issue first to discuss what you'd like to change.

License

MIT -- Free for personal and commercial use.

See LICENSE-COMMERCIAL.md for optional enterprise support and consulting.

2026 Wu Framework