Core Concepts
Understand the fundamental building blocks of HyperFrontend architecture.
Features
A feature is a self-contained micro-frontend that runs in isolation. Each feature bundles its own framework, dependencies, and assets. Features communicate with their host through a standardized messaging protocol.
Key insight: Features are independent deployables. Update one without touching others.
Host Applications
A host (or shell) is the parent application that loads and orchestrates features. The host manages feature lifecycle, routes messages, and provides shared context like authentication.
- Dynamically loads features at runtime
- Manages feature positioning (inline, modal, popout)
- Handles graceful degradation if features fail
Contracts
Contracts define the messages a feature can send and receive. They specify emitted actions (messages this context sends) and accepted actions (messages this context receives), with optional JSON Schema validation.
const contract = {
emitted: [
{ type: 'CONFIG', schema: configSchema },
{ type: 'NAVIGATION' }
],
accepted: [
{ type: 'READY', schema: readySchema },
{ type: 'DATA', schema: dataSchema }
]
}Channels
A channel is a bidirectional communication pipe between a host and a feature. Channels provide reliable message delivery with ordering guarantees.
Host Side
- • Creates channels for each feature
- • Subscribes to feature events
- • Sends commands to features
Feature Side
- • Connects to provided channel
- • Emits events to host
- • Handles incoming commands
Isolation Model
Features typically run in separate browser contexts (iframes, windows, or web workers) with strict isolation:
- CSS isolation: Styles don't leak between features
- JavaScript isolation: Separate global scope per feature
- Security isolation: Features can't access host DOM or data
Architecture Overview
See the full Architecture Guide for detailed diagrams.