Micro-Frontend Architecture
Ship independently.
Compose at runtime.
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/featuresClock
Heartbeat
Koi Pond
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 people usually start
All 24 guides and tutorialsBuild a CLI with a --verbose mode
My command line tool is either silent or drowning in console.log, the diagnostics land on stdout where they break every pipe, and when a run fails I cannot tell which stage went wrong or how long it took.
Build a setup wizard for your CLI
My CLI takes its setup from a wall of flags nobody remembers, and every attempt at an interactive version turns into raw-mode handling, signal handlers, and a validation branch after every question.
How 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 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.