A hybrid micro-frontend pattern to embed live web applications with communication protocols, lifecycle, and contract standards
Docs | Manifesto | Installation | Quick Start | Architecture | Live Demos | Acknowledgments
Look, nobody cares what framework you're using. React, Angular, Vue, that jQuery thing from 2014 — whatever. You just want to ship the damn thing and go home.
Hyperfrontend lets you compose your existing apps together securely — like Lego bricks. No rewrites. No "let's align on a shared component library" meetings. Just plug it in and it works.
Display another app inside yours with a native look and feel — embed it seamlessly inline, throw it in a modal, pop it out in a new window, open a new tab. Your call. And you don't have to roll your own glue code to make them talk to each other.
Need to pass sensitive stuff between apps? Transactions, PII, auth tokens? Opt into the encrypted messaging protocol. It's built to stop man-in-the-middle snooping and limit XSS blast radius — not just "button clicked" events, but the stuff that actually matters.
Want the full picture? The Manifesto digs into the why behind all of this.
A hyperfrontend feature is your standalone frontend app — whether it was written ten years ago or last month. It could be React, Angular, Vue, Svelte, vanilla JS... doesn't matter. It manages its own state, handles its own auth, talks to its own backend. It's yours.
The difference? Now it can be plugged into other apps (or have other apps plugged into it) without anyone having to rewrite anything.
Think of it as combining the best of micro-frontends and embeddable components:
---
config:
theme: base
themeVariables:
fontSize: 12px
---
flowchart LR
subgraph MF["🧩 Micro-Frontend Traits"]
direction TB
M1["Independent deployment"]
M2["Own tech stack"]
M3["Team autonomy"]
M4["Separate releases"]
end
subgraph CP["📦 Component Traits"]
direction TB
C1["Embeddable"]
C2["Defined API"]
C3["Lifecycle hooks"]
C4["Host integration"]
end
subgraph HF["⚡ Hyperfrontend Feature"]
direction TB
H1["🔒 Iframe isolation"]
H2["📨 Contract messaging"]
H3["⚡ Runtime loading"]
H4["🔐 Optional encryption"]
end
MF -.->|combines| HF
CP -.->|combines| HF
style MF fill:#e1f5fe,stroke:#01579b,stroke-width:2px
style CP fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
style HF fill:#fff3e0,stroke:#e65100,stroke-width:3px
Not a feature: UI components, shared libraries, SPA routes, or monolithic frontends.
Each hyperfrontend feature uses the standard communication protocol provided by the @hyperfrontend/nexus library. This enables:
- Contract-validated messaging - Features define clear interfaces specifying emitted and accepted message types
- Broker-channel architecture - A TCP-like protocol over the browser's postMessage API routes messages between contexts
- Iframe-based isolation - Each feature operates in its own browser context with true security boundaries
For a deep dive into how the libraries compose together, see the Architecture Guide.
The @hyperfrontend/features Nx plugin helps you:
- Transform existing web apps into hyperfrontend features by adding the necessary configuration
- Generate shell applications that know how to load your frontend app at runtime
- Consume features in host applications with typed bindings
Each feature gets an accompanying shell application that is:
- Self-contained with no external dependencies
- Installable as an npm package or via
<script>tag from a CDN - Responsible for loading and initializing the feature at runtime
This architecture enables you to compose applications from independently developed and deployed features, enabling true micro-frontend modularity.
Hyperfrontend eliminates the need for teams to coordinate deployments, especially critical for organizations with:
- Global teams spanning multiple timezones
- Different priorities and roadmaps for each team
- Varied technical capabilities and framework preferences
Each feature is independently deployable - no more waiting for other teams to merge, test, or deploy before shipping your updates.
Traditional build-time integration creates tight coupling that leads to:
- Dependency conflicts when teams upgrade at different rates
- Breaking changes that cascade across the entire application
- Forced upgrades that consume valuable development time
Hyperfrontend's runtime integration approach isolates each feature's dependencies, allowing teams to:
- Upgrade frameworks on their own schedule
- Use different versions of the same library across features
- Deploy updates without breaking other features
Hyperfrontend makes existing brownfield or mature projects easily consumable:
- Wrap legacy applications as features without rewriting them
- Incrementally modernize - replace features one at a time
- Mix old and new - run legacy AngularJS alongside modern React
- Preserve investments - keep working code working while evolving
The shell package defines a clear interface to interact with each feature, abstracting away the complexity of frontend coordination regardless of the underlying technology.
Despite its flexibility, hyperfrontend caters to modern frontend setups:
- Full TypeScript support with type-safe contracts
- Works with all modern build tools (Vite, Webpack, Rollup, etc.)
- Compatible with SSR and static site generation
- Nx plugin for streamlined development workflows
- Standard npm packages or CDN distribution
- Framework-agnostic micro-frontend architecture
- Standardized communication via the browser's postMessage API (iframes, windows, tabs, web workers)
- Lifecycle management for embedded applications
- Contract-based integration with JSON Schema validation
- Broker-channel message routing with optional encryption
- Cross-stack compatibility (React, Vue, Angular, Svelte, vanilla JS)
- Shell applications with all dependencies bundled in
- Multiple deployment options (npm package or CDN script tag)
First, ensure you have an Nx workspace set up.
Then add the hyperfrontend features plugin:
npx nx add @hyperfrontend/featuresThis will automatically install the @hyperfrontend/nexus library and configure your workspace.
Initialize an existing application as a hyperfrontend feature:
npx nx g @hyperfrontend/features:initThe generator will prompt you for:
- Which project to target
- Where to store the feature configuration and contracts
Add a feature to a host application:
npx nx g @hyperfrontend/features:addThe generator will prompt you for:
- The feature name
- Which host project to add it to
The plugin generates typed bindings from the feature's contracts and vanilla JavaScript integration code.
Run the playground host to see how your feature loads:
npx nx serve <your-feature-name>This launches a development environment where you can debug and interact with your feature in isolation.
| Demo | Description |
|---|---|
| Chess | Chess game demonstration |
| Clock | Clock demonstration |
| Events | Events demonstration |
| File Share | File sharing demonstration |
| Heartbeat | Heartbeat demonstration |
| Views | Views demonstration |
| Package | Description |
|---|---|
| @hyperfrontend/features | Nx plugin for hyperfrontend micro-frontend features · 📖 docs |
| @hyperfrontend/nexus | Cross-window communication with contracts, lifecycle management, and security · 📖 docs |
| Package | Description |
|---|---|
| cryptography | Cryptography utilities for browser and Node.js environments · 📖 docs |
| data-utils | Data manipulation and transformation utilities · 📖 docs |
| function-utils | Function composition and manipulation utilities · 📖 docs |
| immutable-api-utils | Immutable API utilities for functional programming · 📖 docs |
| json-utils | Zero-dependency JSON Schema Draft v4 validation and schema generation · 📖 docs |
| list-utils | List and array manipulation utilities · 📖 docs |
| logging | Structured logging utilities for applications · 📖 docs |
| network-protocol | Network protocol implementation with channels, routing, and security · 📖 docs |
| project-scope | Project analysis, technology stack detection, and transactional virtual file system · 📖 docs |
| random-generator-utils | Random number and data generation utilities · 📖 docs |
| state-machine | State machine implementation with lifecycle management, actions, and reducers · 📖 docs |
| string-utils | String manipulation utilities for browser and Node.js environments · 📖 docs |
| time-utils | Time and date manipulation utilities · 📖 docs |
| ui-utils | UI utilities for elements, events, styling, and mobile interactions · 📖 docs |
| versioning | Changelog parsing and conventional commit utilities · 📖 docs |
| web-worker | Web Worker utilities and abstractions · 📖 docs |
A comprehensive documentation site is under active development at hyperfrontend.dev.
What to expect:
- Complete API Reference — Auto-generated documentation for all libraries with TypeScript types, parameters, and examples
- Versioned Documentation — Match documentation to your installed package version
- Fuzzy Search — Find what you need instantly with Algolia-powered search
- Interactive Code Examples — Syntax-highlighted, copyable code snippets
- Architecture Guides — Deep dives into how the libraries work together
- Getting Started Tutorials — Step-by-step guides for common use cases
Current documentation:
- Each library has a detailed README with installation, usage, and architecture information
- See the Main Packages and Internal Packages tables above for links
- Architecture Guide explains how the libraries compose together
- Manifesto explains the project's philosophy and scope
For the documentation roadmap, see roadmap/documentation-roadmap.md.
We welcome contributions! Please read our Contributing Guide for details on:
- Setting up your development environment (we recommend using GitHub Codespaces!)
- Our code of conduct and contribution process
- How to submit pull requests
- Coding standards and commit message guidelines
If you plan to use LLM assistance, see REGARDING_AI.md for how AI tooling is used in this project.
Important: All contributors must sign our Contributor License Agreement (CLA) before pull requests can be merged.
If you discover a security vulnerability, please follow our responsible disclosure process outlined in our Security Policy. Do not report security issues through public GitHub issues.
If you find hyperfrontend useful, please consider supporting the project:
See FUNDING.md for more ways to support the project.
Thanks to these wonderful people who have contributed to hyperfrontend:
 Andrew Redican 💻 📖 🚇 🚧 📆 🤔 |
 Brian Smith 🤔 |
|||||
Add your contributions
|
||||||
This project follows the all-contributors specification. Contributions of any kind are welcome!
This project wouldn't exist without the support of many people — family, friends, mentors, and the broader open source community. Read the full Acknowledgments to learn about the humans behind the code.
See LICENSE.md file for details.