A research-driven, production-oriented framework for distributing UI components across multiple devices in real time. This project bridges decades of academic DUI research (CAMELEON, 4C model, Elmqvist's taxonomy) with modern web primitives — TypeScript, React, WebSockets, WebRTC, and Yjs CRDTs — into a clean, developer-ergonomic architecture.
The goal is a publishable framework design and a working reference implementation.
A Distributed User Interface (DUI) is a user interface whose components are spread across multiple devices, users, display surfaces, or points in time. Examples: a shared drawing canvas where the palette is on a phone and the canvas is on a TV; a presentation where the presenter's device shows speaker notes and the audience's devices show slides; a collaborative whiteboard with independent cursors per user.
apps/
web/ Next.js app (hosts demo and documentation)
docs/ Next.js documentation site
packages/
@dui/core Abstract interfaces, DU Registry, Distribution Engine (planned)
@dui/react React bindings: useDistributable, DistributableProvider (planned)
@dui/web-components Framework-agnostic Custom Element: <dui-distributable> (planned)
@dui/sync Sync adapters: WebSocket, WebRTC DataChannel, Yjs CRDT (planned)
@dui/server Signaling server / Session Coordinator (Hono) (planned)
@dui/devtools Session topology inspector (planned)
docs/
report/
state-of-the-art-report-1.md Academic DUI landscape and the missing framework
state-of-the-art-report-2.md Modern frameworks and industry examples
dui-report.md Index of 42 academic papers on DUI topics
framework-design.md Systematic architecture design (start here)
The framework is designed in two layers:
Layer 1 — Tech-agnostic abstract model Six core primitives: Distributable Unit (DU), Distribution Context, Distribution Operator, Coordination Channel, Session/Topology, State Synchronisation Model. Mapped to the academic 4C model and Elmqvist's five distribution dimensions.
Layer 2 — Concrete reference implementation
| Abstraction | Technology |
|---|---|
| Distributable Unit | React component + useDistributable() hook |
| Coordination Channel | WebSocket (primary) + WebRTC DataChannel (P2P) |
| State Synchronisation | Yjs CRDT (Y.Doc) |
| Session / Topology | Hono signaling server (Node.js / Cloudflare Workers) |
| Framework-agnostic binding | Web Components (<dui-distributable>) |
See docs/framework-design.md for the full architecture, TypeScript API surface, design decisions, academic reference mapping, and open problems.
Distributable Unit (DU): The atom of distribution. A widget-level component that declares its own capabilities, constraints, state schema, and lifecycle hooks. Can be migrated, cloned, extended, split, merged, or pinned across devices.
Distribution Operators: migrate · clone · extend · split · merge · pin
Session: A bounded context shared by a set of devices. Devices have roles (host, peer, observer, guest). The topology — which DU lives on which device — is maintained by the Session Coordinator and replicated to all peers.
pnpm install
pnpm devRequires Node.js ≥ 18 and pnpm 9.
This project is informed by:
- Calvary et al. — CAMELEON Reference Framework (2002)
- Demeure et al. — 4C Reference Model (ICAS 2008)
- Elmqvist — DUI State of the Art (2011)
- Melchior, Vanderdonckt, Van Roy — Distribution Graphs and P2P DUI toolkit (EICS 2009, 2011)
- Gonzalez Villanueva et al. — DUI Taxonomy (2014)
- Oh et al. — FLUID (MobiCom 2019)
- Vulture — Fine-grained GUI distribution (IEEE INFOCOM 2024)
Full reference index: docs/report/dui-report.md
TypeScript · React 19 · Next.js 16 · Vite · Turborepo · pnpm · Yjs · Hono · WebSockets · WebRTC