Sandbox any web app, however old, and compose it at build time or at runtime. Open source, zero runtime dependencies, enterprise edition announced.
Integrate in weeks.
Modernize without a rewrite.
Coordination between engineering teams — different timezones, separate sprints, conflicting priorities — is painful. Someone's always waiting on someone else. Hyperfrontend lets each team ship on their own schedule. No more "we're blocked on Platform."
Swipe to navigate
npm install @hyperfrontend/features
Chess
Events
File Share
Views
Connecting to the live demo on its own origin… All demos →
Start from what you want to do
Every code example in a guide is either extracted from source that ships and runs, or was executed against a named package version on a named date. The badge on each one tells you which.
Tutorials
Learn by building something real, one step at a time, ending with a working result.
How-to guides
Have a job to do? Follow a direct route from the problem you have to the outcome you want.
Live demos
Real feature apps on their own origins, composed here and running in your browser right now.
Articles
Long-form writing on the architecture: the pressures that produce it and the reasoning behind it.
Where we would start you
All 26 guides and tutorialsHow to compose independently shipped features on one page
I need several independently built, independently deployed apps working together on one page, coordinating with each other, without merging codebases and without one failure taking down the rest.
How to embed a feature someone else shipped
Another team shipped their app as a feature package; I need it running inside my page, alive and observable, without learning their stack.
How to make your first cross-window connection
I have a page and an iframe that need to talk to each other, and raw postMessage keeps turning into stringly-typed guesswork that breaks in production.
Publish a TypeScript library to npm
Shipping a TypeScript library means an exports map, ESM and CJS builds, and a declaration pass that all have to agree, and every one of them is hand-maintained until it silently stops matching what was emitted.
How it works
Each feature operates in its own iframe with standardized communication via the @hyperfrontend/nexus library. Messages are routed through a broker-channel architecture with optional encryption.
Host Application
Your main app loads features dynamically and manages their lifecycle. No build-time dependencies.
Feature Shell
A lightweight loader that bootstraps your micro-frontend and establishes the communication channel.
Message Broker
Routes typed messages between contexts with validation. Supports encryption for sensitive data.