mitt

Tiny 200b functional Event Emitter / pubsub.

weekly downloads17.3M

versionv3.0.1

licenseMIT

categoryutility

eventseventemitteremitterpubsub

Overview

mitt is a functional event emitter library weighing under 200 bytes gzipped, designed as a minimal alternative to Node's EventEmitter for both browser and server environments. It implements the publish-subscribe pattern without class-based architecture, using pure functions that don't rely on this binding. Despite its microscopic footprint, it supports essential features like wildcard listeners and Symbol-based event names.

The library exists to solve a common problem in modern JavaScript applications: decoupling components through events without bloating bundle sizes. While Node's native EventEmitter works server-side and larger libraries like EventEmitter3 offer full compatibility, mitt targets environments where every byte counts—single-page applications, embedded widgets, and performance-critical frontends. With over 17 million weekly downloads, it's become a standard choice for framework-agnostic event buses.

mitt uses a Map-based handler registry exposed through the all property, giving developers direct access to registered listeners when needed. Event handlers receive payloads of any type, though objects are recommended for extensibility. The wildcard '*' event type captures all emitted events, firing after type-specific handlers. Unlike classical emitters, mitt instances are factory-created rather than class-instantiated, making them tree-shakeable and easier to integrate with functional codebases.

The library requires zero configuration and works in IE9+ browsers through modern JavaScript runtimes. Its functional API makes it particularly suitable for reactive frameworks like React and Vue, where developers often need lightweight communication channels between non-parent-child components without introducing state management overhead.

Quick Start

typescript

import mitt from 'mitt';

// Create isolated emitter for user actions
const userEvents = mitt();

// Service layer listens for authentication
userEvents.on('auth:login', ({ userId, timestamp }) => {
  console.log(`User ${userId} logged in at ${timestamp}`);
  // Update session storage, analytics, etc.
});

// UI component listens for profile updates
const profileHandler = (data) => {
  document.getElementById('username').textContent = data.username;
};
userEvents.on('profile:update', profileHandler);

// Debug logger catches all events via wildcard
userEvents.on('*', (type, payload) => {
  console.log(`[Event Debug] ${type}:`, payload);
});

// Emit events from anywhere in the app
userEvents.emit('auth:login', {
  userId: 'u123',
  timestamp: Date.now()
});

userEvents.emit('profile:update', {
  username: 'jane_dev',
  avatar: '/img/avatar.png'
});

// Clean up specific listener when component unmounts
userEvents.off('profile:update', profileHandler);

// Clear all handlers on app teardown
userEvents.all.clear();

Use Cases

Component communication in single-page applications: Create a global event bus to coordinate actions between unrelated components without prop drilling or context pollution. For example, a notification system where multiple UI components trigger toast messages, or a shopping cart that broadcasts updates to header badge counters and checkout flows.

Plugin architecture for extensible apps: Build modular applications where core logic emits lifecycle events that plugins can subscribe to. A markdown editor might emit 'beforeRender', 'afterRender', and 'contentChange' events, allowing third-party extensions to inject custom processing without modifying core code.

Decoupled service layer communication: Implement service-to-service messaging in frontend architectures without tight coupling. An authentication service emits 'login' and 'logout' events consumed by analytics trackers, session managers, and UI update handlers, each maintaining separation of concerns.

WebWorker or iframe coordination: Establish lightweight message protocols between isolated JavaScript contexts. Wrap postMessage calls in mitt emitters to create type-safe, event-driven communication channels with consistent APIs across main threads and workers.

Testing and development tooling: Build development utilities that monitor application events without invasive instrumentation. Debug panels can use wildcard listeners to log all emitted events, or test harnesses can assert specific events fired during user interactions without coupling tests to implementation details.

Pros & Cons

Pros

+Minimal bundle impact at ~200 bytes gzipped makes it negligible for performance-sensitive applications
+Functional API with no `this` binding simplifies usage in arrow functions and avoids common scope pitfalls
+Wildcard support and direct Map access provide flexibility for advanced patterns like event debugging and dynamic unsubscription
+Zero dependencies and broad compatibility (IE9+) eliminate integration friction across any JavaScript runtime
+Factory pattern enables tree-shaking and multiple isolated emitter instances without prototype pollution

Cons

−No built-in `once()` method requires manual off() calls or wrapper abstractions for single-fire handlers
−Lacks namespace support or event prioritization found in larger emitters, limiting complex orchestration scenarios
−No error handling for failed handlers—exceptions in one listener will prevent subsequent handlers from executing
−Minimal TypeScript support out-of-box requires custom type definitions for strict event payload typing
−Handler removal requires retaining function references; anonymous functions cannot be easily unsubscribed

Alternatives

eventemitter3v5.0.4

EventEmitter3 focuses on performance while maintaining a Node.js AND browser compatible interface.

utilityEventEmitterEventEmitter2

72.7M / week

Comparisons

rxjs vs mitt

utility

Install

bash

npm install mitt

bash

pnpm add mitt

bash

bun add mitt

Overview

Quick Start

typescript

import mitt from 'mitt';

// Create isolated emitter for user actions
const userEvents = mitt();

// Service layer listens for authentication
userEvents.on('auth:login', ({ userId, timestamp }) => {
  console.log(`User ${userId} logged in at ${timestamp}`);
  // Update session storage, analytics, etc.
});

// UI component listens for profile updates
const profileHandler = (data) => {
  document.getElementById('username').textContent = data.username;
};
userEvents.on('profile:update', profileHandler);

// Debug logger catches all events via wildcard
userEvents.on('*', (type, payload) => {
  console.log(`[Event Debug] ${type}:`, payload);
});

// Emit events from anywhere in the app
userEvents.emit('auth:login', {
  userId: 'u123',
  timestamp: Date.now()
});

userEvents.emit('profile:update', {
  username: 'jane_dev',
  avatar: '/img/avatar.png'
});

// Clean up specific listener when component unmounts
userEvents.off('profile:update', profileHandler);

// Clear all handlers on app teardown
userEvents.all.clear();

Use Cases

Pros & Cons

Pros

+Minimal bundle impact at ~200 bytes gzipped makes it negligible for performance-sensitive applications
+Functional API with no `this` binding simplifies usage in arrow functions and avoids common scope pitfalls
+Wildcard support and direct Map access provide flexibility for advanced patterns like event debugging and dynamic unsubscription
+Zero dependencies and broad compatibility (IE9+) eliminate integration friction across any JavaScript runtime
+Factory pattern enables tree-shaking and multiple isolated emitter instances without prototype pollution

Cons

−No built-in `once()` method requires manual off() calls or wrapper abstractions for single-fire handlers
−Lacks namespace support or event prioritization found in larger emitters, limiting complex orchestration scenarios
−No error handling for failed handlers—exceptions in one listener will prevent subsequent handlers from executing
−Minimal TypeScript support out-of-box requires custom type definitions for strict event payload typing
−Handler removal requires retaining function references; anonymous functions cannot be easily unsubscribed