hyperfrontend

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

---

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.

---

What is a Hyperfrontend Feature?

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

Loading

Not a feature: UI components, shared libraries, SPA routes, or monolithic frontends.

How It Works

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:

1. Transform existing web apps into hyperfrontend features by adding the necessary configuration
2. Generate shell applications that know how to load your frontend app at runtime
3. 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.

Why Hyperfrontend?

Free Teams from Deployment Coordination

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.

Protect Against Version Thrashing

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

Modernize Without Expensive Rewrites

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.

Still Modern and Developer-Friendly

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

Key Capabilities

• 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)

Installation

First, ensure you have an Nx workspace set up.

Then add the hyperfrontend features plugin:

npx nx add @hyperfrontend/features

This will automatically install the @hyperfrontend/nexus library and configure your workspace.

Quick Start

Creating a Feature

Initialize an existing application as a hyperfrontend feature:

npx nx g @hyperfrontend/features:init

The generator will prompt you for:

• Which project to target
• Where to store the feature configuration and contracts

Consuming a Feature

Add a feature to a host application:

npx nx g @hyperfrontend/features:add

The 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.

Testing Your Feature

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.

Live Demos

Demo	Description
Chess	Chess game demonstration
Clock	Clock demonstration
Events	Events demonstration
File Share	File sharing demonstration
Heartbeat	Heartbeat demonstration
Views	Views demonstration

Main Packages

Package	Description
@hyperfrontend/features	Nx plugin for hyperfrontend micro-frontend features See docs
@hyperfrontend/nexus	Cross-window communication with contracts, lifecycle management, and security See docs

Internal Packages

Package	Description
cryptography	Cryptography utilities for browser and Node.js environments See docs
data-utils	Data manipulation and transformation utilities See docs
function-utils	Function composition and manipulation utilities See docs
immutable-api-utils	Immutable API utilities for functional programming See docs
list-utils	List and array manipulation utilities See docs
logging	Structured logging utilities for applications See docs
network-protocol	Network protocol implementation with channels, routing, and security See docs
random-generator-utils	Random number and data generation utilities See docs
state-machine	State machine implementation with lifecycle management, actions, and reducers See docs
string-utils	String manipulation utilities for browser and Node.js environments See docs
time-utils	Time and date manipulation utilities See docs
ui-utils	UI utilities for elements, events, styling, and mobile interactions See docs
web-worker	Web Worker utilities and abstractions See docs

Documentation

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.

Contributing

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

Important: All contributors must sign our Contributor License Agreement (CLA) before pull requests can be merged.

Security

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.

Support & Funding

If you find hyperfrontend useful, please consider supporting the project:

• ⭐ Star the repository
• 💖 Sponsor on GitHub
• 📣 Share on X

See FUNDING.md for more ways to support the project.

Contributors

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!

License

See LICENSE.md file for details.