Home

@microfrontend — Production-Quality Controller for Microfrontend Applications

What is @microfrontend?

@microfrontend is a lightweight, framework-agnostic library suite that enables enterprise-scale microfrontend architectures using iframe-based isolation. It provides a production-quality meta router that loads independent SPA applications in iframes and synchronizes their routes with the browser's address bar.

The original idea comes from Manfred Steyer's meta-spa-router, developed at s IT Solutions AT Spardat GmbH.

Why iframes?

Enterprise applications require a high degree of isolation between modules. Iframes provide:

• Complete CSS isolation — no style leakage between microfrontends
• Complete JavaScript isolation — no global variable conflicts
• Independent deployment — each microfrontend can use any SPA framework and be deployed independently
• Security boundaries — origin-based access control via postMessage

The challenge: every browser has exactly one address bar. @microfrontend/controller solves this by acting as a meta router that manages routing across multiple iframe-hosted applications simultaneously.

Key Features

• Loads microfrontends in iframes with full isolation
• Microfrontends can use any SPA framework (Angular, React, Vue, etc.)
• Synchronizes microfrontend routes with the shell URL via hash-based routing
• Supports subroute navigation within child applications
• Supports iframe resizing to prevent scrollbars
• Custom iframe configuration (styles, attributes, data)
• Broadcast messaging between applications
• State management to prevent data loss when navigating away
• Respects origins to prevent CORS issues
• No runtime framework dependencies — only tslib

Library Overview

The project is published as three npm packages under the @microfrontend scope:

Package	Description	Install in Shell	Install in Microfrontend
@microfrontend/common	Shared messaging infrastructure	Yes	Yes
@microfrontend/controller	Shell-side meta router	Yes	No
@microfrontend/client	Microfrontend-side client	No	Yes

Quick Links

• Getting Started
• Architecture
• URL Specification
• Inter-App Communication
• State Management
• API Reference: Controller
• API Reference: Client
• API Reference: Common
• Development Guide

License

MIT — see LICENSE for details.