Web Loom documentation
Learn the framework-agnostic MVVM architecture, connect it to your preferred view layer, and explore the platform-first packages that support production applications.
Start here
Understand the architecture and scaffold your first Web Loom application.
Getting Started
What Web Loom is, why framework-agnostic architecture matters, and how to install the packages and build your first ViewModel in minutes.
Architecture Fundamentals
The core ideas behind Web Loom — why framework-agnostic architecture matters and how the MVVM pattern keeps business logic independent of the UI layer.
create-web-loom
Scaffold a Vite app, install @web-loom packages, and replace runnable Vite starter files with Web Loom MVVM starter overlays.
Architecture
Build portable Models and ViewModels with explicit lifecycle and interaction patterns.
Core Concepts
The foundational ideas behind MVVM Core — how Models, ViewModels, Commands, and the dispose pattern work together to produce a testable, framework-agnostic architecture.
Models
Deep dive into the Model layer — BaseModel, RestfulApiModel, QueryStateModel, and real-world implementations from the Web Loom example apps.
ViewModels
Deep dive into the ViewModel layer — BaseViewModel, Commands, RestfulApiViewModel, and real-world implementations from the Web Loom example apps.
MVVM Patterns
Advanced ViewModel patterns inspired by Prism — InteractionRequest for ViewModel-driven UI dialogs, and ActiveAwareViewModel for lifecycle-aware ViewModels that pause when off-screen.
Framework integrations
Connect the same framework-free ViewModels to every major rendering layer.
MVVM in React
How React's rendering model works, why external signals need a bridge, and practical patterns for wiring ViewModels into React 19 components — with real examples from the Web Loom Greenhouse app.
MVVM in Vue
How Vue 3's Proxy-based reactivity system works, why @web-loom/signals-core signals need a composable bridge, and practical patterns for wiring ViewModels into Vue components — with real examples from the Web Loom Greenhouse app.
MVVM in Angular
How Angular's change detection works, why fromLoomSignal is the natural bridge for @web-loom/signals-core signals, and practical patterns for wiring ViewModels into Angular components — with real examples from the Web Loom Greenhouse app.
MVVM in Vanilla TypeScript
How to wire Web Loom ViewModels into a framework-free TypeScript app — manual DOM rendering, @web-loom/signals-core signals as the only reactive layer, EJS templates, a client-side router, and imperative event listeners.
MVVM in React Native
How React Native components consume the same ViewModels as the web — the only change is swapping HTML elements for native primitives. The useSignal hook and the Command pattern are identical.
MVVM in Lit
How Lit web components connect to Web Loom ViewModels using connectedCallback/disconnectedCallback for subscription lifecycle, @state for reactive re-renders, and the same Command pattern as every other framework.
MVVM in Marko
How Marko combines server-streaming HTML with client-side reactivity, and how Web Loom ViewModels integrate via reactive let variables and a lightweight subscribeToObservable utility built on @web-loom/signals-core.
MVVM in Svelte
How to wire Web Loom ViewModels into Svelte 5 components using reactive state and onMount/onDestroy lifecycle hooks. @web-loom/signals-core signals subscribe directly in Svelte lifecycle functions.
MVVM in Solid
How Web Loom ViewModels connect to SolidJS using a useSignal bridge from @web-loom/signals-core into createSignal, then Show, For, and createMemo in the view — demonstrated by apps/mvvm-solid.
MVVM in Qwik
How to integrate Web Loom ViewModels with Qwik using useSignal and useTask$ to bridge @web-loom/signals-core signals, and what to watch for given Qwik's resumability constraints.
Packages and patterns
Explore the typed primitives and headless behaviors that make up the Web Loom ecosystem.
MVVM Core
A minimal MVVM framework for building reactive web applications.
Signals Core
Framework-agnostic reactive signals with computed values and effects.
Store Core
A minimal client state management library for building reactive web applications.
Event Bus Core
A lightweight, framework-agnostic Event Bus library for decoupled communication in modern web applications.
Event Emitter Core
A tiny, type-safe synchronous event emitter shared across Web Loom packages. The internal primitive behind Event Bus Core, Forms Core, and more.
Query Core
A minimal server state management library for building reactive web applications.
UI Core Behaviors
Eight framework-agnostic headless UI behaviors — Dialog, Disclosure, Form, List Selection, Roving Focus, Keyboard Shortcuts, Undo/Redo, and Drag-and-Drop.
UI Patterns
Composed UI patterns built on Web Loom UI Core behaviors — Master-Detail, Wizard, Modal, Tabs, Sidebar, Toast, Command Palette, Hub-and-Spoke, Grid Layout, and FAB.
Design Core
Framework-agnostic design tokens, CSS custom properties, dynamic theming, and a pre-built component library.
Package Roadmap
The full Web Loom package ecosystem — core packages implemented in this monorepo but not yet published to npm (HTTP, Storage, Router, i18n, Notifications, Error handling, Platform detection, Typography), plus the framework adapters and charting library maintained in the sibling web-loom-extensions repo.