Many apps. One experience.
Tuvix.js mounts React, Vue, Svelte, Angular and vanilla JS micro apps into one host page. Routing, an event bus, sandboxing and server rendering come as separate packages you add when you need them.
npx create-tuvix-appimport { createOrchestrator } from 'tuvix.js';const orchestrator = createOrchestrator({ router: { mode: 'history', routes: [ { path: '/dashboard/*', app: 'dashboard' }, { path: '/settings/*', app: 'settings' }, ], },});orchestrator.register({ name: 'dashboard', entry: 'https://cdn.example.com/dashboard/main.js', container: '#main-content', activeWhen: '/dashboard/*',});orchestrator.start();/dashboard/overview- React 18+mounted
name: 'dashboard'activeWhen: '/dashboard/*' - Vue 3
name: 'catalog'activeWhen: '/shop/*' - Svelte 3–5
name: 'checkout'activeWhen: '/checkout/*' - Angular 15+
name: 'settings'activeWhen: '/settings/*'
@tuvix.js/event-busWhat ships with Tuvix.js
Eight building blocks. Install the tuvix.js umbrella package to get the core five, or add single packages as your shell grows.
Framework agnostic
Run React, Vue, Svelte, Angular and vanilla JS micro apps side by side in one shell.
Micro apps guideNo third-party runtime dependencies
Each package depends only on other @tuvix.js packages. You install the ones you import.
All packagesBuilt-in routing
The router mounts and unmounts apps as the URL changes, in history or hash mode.
@tuvix.js/routerEvent bus
Apps publish and subscribe to typed events without sharing globals.
@tuvix.js/event-busCSS and JS sandbox
Shadow DOM keeps each app's styles inside its container. JsSandbox runs a script against a Proxy window you can throw away.
@tuvix.js/sandboxDynamic loading
The loader fetches app bundles on demand, caches them and retries failed loads.
@tuvix.js/loaderDevTools
An in-page panel lists registered apps, the active route and event bus traffic.
@tuvix.js/devtoolsServer rendering
Render micro apps on the server and stitch their HTML into the shell template, as a string or a stream.
@tuvix.js/server
Pick your framework
Each adapter turns a component into a micro app that the orchestrator can mount, update and unmount.
React
createReactMicroApp wraps a component. useTuvixProps and useTuvixBus read props and events.
npm i @tuvix.js/reactVue
createVueMicroApp mounts a Vue 3 app, with composables for props and the event bus.
npm i @tuvix.js/vueSvelte
createSvelteMicroApp mounts Svelte 3, 4 and 5 components.
npm i @tuvix.js/svelteAngular
createAngularMicroApp bootstraps an Angular 15+ component into its container.
npm i @tuvix.js/angularVanilla JS
defineMicroApp gives plain JavaScript mount, unmount and update hooks.
npm i @tuvix.js/core
15 packages, each with its own version
Start with the umbrella package. Switch to single packages when you want a smaller install.
- tuvix.js
Umbrella package with core, router, event bus, loader and sandbox.
- @tuvix.js/core
The orchestrator. Registers micro apps and runs their lifecycles.
- @tuvix.js/router
Activates micro apps by URL, in history or hash mode.
- @tuvix.js/event-bus
Typed publish/subscribe between micro apps.
- @tuvix.js/loader
Loads app bundles on demand, with caching and retries.
- @tuvix.js/sandbox
CSS isolation through Shadow DOM, JS isolation through Proxy.
- @tuvix.js/server
Server-side composition and streaming for the host page.
- @tuvix.js/module-federation
Loads micro apps from Webpack Module Federation remotes.
- @tuvix.js/devtools
In-page debug panel for apps, routes and events.
- @tuvix.js/react
React adapter, hooks and server rendering helpers.
- @tuvix.js/vue
Vue 3 adapter, composables and server rendering helpers.
- @tuvix.js/svelte
Svelte adapter with server rendering support.
- @tuvix.js/angular
Angular adapter with server rendering support.
- @tuvix.js/vite
Vite plugin that puts island CSS and modulepreload links into the SSR head, so server-rendered micro apps are styled on first paint.
- create-tuvix-app
Scaffolds a new host and micro app project from the command line.