Lightweight Event Emitters for Frontend Architecture
eventemitter3, mitt, nanoevents, and tiny-emitter are lightweight implementations of the Event Emitter pattern designed for browser environments. Unlike Node.js's built-in EventEmitter, which is too heavy for client-side bundles, these libraries provide minimal pub/sub functionality with small footprints. They allow components to communicate loosely without direct dependencies, supporting methods like on, off, and emit to manage event subscriptions and triggers efficiently.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Lightweight Event Emitters: eventemitter3 vs mitt vs nanoevents vs tiny-emitter
When building frontend applications, components often need to communicate without being directly linked. The Event Emitter pattern solves this by allowing objects to subscribe to events and react when those events occur. While Node.js provides a built-in EventEmitter, it is too heavy for browser bundles. Libraries like eventemitter3, mitt, nanoevents, and tiny-emitter offer lightweight alternatives. Let's compare how they handle common engineering tasks.
📡 Subscribing to Events: API Surface
All four libraries allow you to listen for events, but their method signatures differ slightly. Understanding these differences helps you decide how much boilerplate code you want to write.
eventemitter3 supports a third argument for context binding, which controls what this refers to inside the callback.
// eventemitter3: Supports context binding
import EventEmitter from 'eventemitter3';
const ee = new EventEmitter();
function handler() { console.log(this.id); }
ee.on('update', handler, { id: 123 });
ee.emit('update'); // Logs 123
mitt uses a simple on method without context binding. You must bind this manually if needed.
// mitt: Simple API
import mitt from 'mitt';
const emitter = mitt();
function handler() { console.log(this.id); }
emitter.on('update', handler.bind({ id: 123 }));
emitter.emit('update', { id: 123 });
nanoevents focuses on minimalism. The on method returns an unsubscribe function instead of requiring a separate off call.
// nanoevents: Returns unsubscribe function
import { NanoEvents } from 'nanoevents';
const ee = new NanoEvents();
const unsubscribe = ee.on('update', () => { console.log('updated'); });
// Call unsubscribe() to remove listener
tiny-emitter mirrors the Node.js API closely. It requires explicit off calls to remove listeners.
// tiny-emitter: Node-like API
import { Emitter } from 'tiny-emitter';
const ee = new Emitter();
function handler() { console.log('updated'); }
ee.on('update', handler);
ee.off('update', handler); // Must pass same function reference
🧹 Cleaning Up: Unsubscription Patterns
Memory leaks happen when listeners remain active after components unmount. Each library handles cleanup differently, which affects how you structure your teardown logic.
eventemitter3 requires you to call off with the exact function reference. If you lose the reference, you cannot remove the listener easily.
// eventemitter3: Manual removal
ee.on('update', handler);
ee.off('update', handler); // Must keep 'handler' reference
mitt also uses off with the function reference. It behaves similarly to eventemitter3 but without context options.
// mitt: Manual removal
emitter.on('update', handler);
emitter.off('update', handler); // Must keep 'handler' reference
nanoevents simplifies cleanup by returning a function. You do not need to store the original handler reference.
// nanoevents: Function-based cleanup
const unsubscribe = ee.on('update', handler);
unsubscribe(); // Call this directly
tiny-emitter follows the standard off pattern. It is reliable but requires careful reference management in complex components.
// tiny-emitter: Manual removal
ee.on('update', handler);
ee.off('update', handler); // Must keep 'handler' reference
🔗 Context Binding: Managing this
In class-based components, accessing instance properties inside callbacks often requires binding. Some libraries handle this for you, while others do not.
eventemitter3 is the only one in this group with built-in context binding. You pass the context as the third argument to on.
// eventemitter3: Built-in context
function log() { console.log(this.id); }
ee.on('event', log, { id: 1 }); // 'this' is { id: 1 }
mitt does not support context binding. You must use .bind() or arrow functions to preserve scope.
// mitt: Manual binding required
emitter.on('event', log.bind({ id: 1 }));
nanoevents does not support context binding. It expects modern JavaScript patterns like arrow functions or manual binding.
// nanoevents: Manual binding required
const unsubscribe = ee.on('event', log.bind({ id: 1 }));
tiny-emitter does not support context binding. It relies on standard JavaScript binding techniques.
// tiny-emitter: Manual binding required
ee.on('event', log.bind({ id: 1 }));
🌐 Wildcard Events: Listening to Everything
Sometimes you need to listen to all events for logging, debugging, or global state synchronization. Only one library supports this natively.
mitt supports the * wildcard. You can subscribe to every event emitted by the instance.
// mitt: Wildcard support
emitter.on('*', (type, data) => {
console.log(`Event ${type} fired with`, data);
});
eventemitter3 does not support wildcards out of the box. You would need to wrap emissions or manage a separate logging mechanism.
// eventemitter3: No wildcard
// Must manually log inside each emit call
nanoevents does not support wildcards. It is designed for specific event channels only.
// nanoevents: No wildcard
// Must manually log inside each emit call
tiny-emitter does not support wildcards. It focuses on explicit event names.
// tiny-emitter: No wildcard
// Must manually log inside each emit call
🛠️ Maintenance & Stability
Choosing a library also means trusting its long-term support. All four packages are stable, but their activity levels differ.
eventemitter3 is actively maintained and widely used in production. It receives regular updates and has strong TypeScript support.
mitt is actively maintained and popular for its simplicity. It is a safe choice for new projects requiring wildcard events.
nanoevents is actively maintained by known community contributors. It is optimized for size and modern JavaScript environments.
tiny-emitter is stable but sees less frequent updates. It is considered feature-complete, but teams should verify it meets their long-term needs.
📊 Summary Table
| Feature | eventemitter3 | mitt | nanoevents | tiny-emitter |
|---|---|---|---|---|
| Bundle Size | Small | Tiny | Tiny | Tiny |
| Context Binding | ✅ Built-in | ❌ Manual | ❌ Manual | ❌ Manual |
| Unsubscribe | ❌ off method | ❌ off method | ✅ Return function | ❌ off method |
| Wildcard Events | ❌ No | ✅ Yes (*) | ❌ No | ❌ No |
| Once Support | ✅ Yes | ❌ No | ❌ No | ✅ Yes |
| TypeScript | ✅ Strong | ✅ Strong | ✅ Strong | ✅ Basic |
💡 Final Recommendation
eventemitter3 is the most capable choice for complex applications. Use it when you need context binding, multiple listeners per event, or a robust API that mimics Node.js without the bloat.
mitt is the best choice for simple global event buses. Use it when you need wildcard support for debugging or when you want the simplest possible API.
nanoevents is the best choice for modern component systems. Use it when you prefer cleanup via returned functions and want to minimize bundle size.
tiny-emitter is the best choice for legacy compatibility. Use it when you need a direct substitute for Node's EventEmitter in the browser without changing existing patterns.
Final Thought: All four libraries solve the same core problem — enabling loose coupling between components. The right choice depends on whether you value context binding, wildcard events, or cleanup simplicity more in your specific architecture.
How to Choose: eventemitter3 vs mitt vs nanoevents vs tiny-emitter
- eventemitter3:
Choose
eventemitter3if you need a robust feature set similar to Node's EventEmitter but optimized for the browser. It supports context binding, listener arrays, and one-time events, making it ideal for complex applications where managingthisscope and multiple listeners per event is critical. - mitt:
Choose
mittif you prioritize simplicity and need wildcard event support out of the box. It is perfect for global event buses where you might want to listen to all events for debugging or logging, and its API is straightforward enough for teams that want minimal configuration. - nanoevents:
Choose
nanoeventsif you want the smallest possible footprint and prefer unsubscribe functions over manualoffcalls. It fits well in modern component architectures where cleanup is handled via returned functions, reducing the risk of memory leaks from forgotten listeners. - tiny-emitter:
Choose
tiny-emitterif you need a direct, stable drop-in replacement for Node's EventEmitter with minimal changes to existing code. It is suitable for legacy projects or teams that rely on standardon,off,emit, andoncemethods without needing advanced features like context binding.
Popular Comparisons
README for eventemitter3
EventEmitter3
EventEmitter3 is a high performance EventEmitter. It has been micro-optimized for various of code paths making this, one of, if not the fastest EventEmitter available for Node.js and browsers. The module is API compatible with the EventEmitter that ships by default with Node.js but there are some slight differences:
- Domain support has been removed.
- We do not
throwan error when you emit anerrorevent and nobody is listening. - The
newListenerandremoveListenerevents have been removed as they are useful only in some uncommon use-cases. - The
setMaxListeners,getMaxListeners,prependListenerandprependOnceListenermethods are not available. - Support for custom context for events so there is no need to use
fn.bind. - The
removeListenermethod removes all matching listeners, not only the first.
It's a drop in replacement for existing EventEmitters, but just faster. Free performance, who wouldn't want that? The EventEmitter is written in EcmaScript 3 so it will work in the oldest browsers and node versions that you need to support.
Installation
$ npm install --save eventemitter3
CDN
Recommended CDN:
https://unpkg.com/eventemitter3@latest/dist/eventemitter3.umd.min.js
Usage
After installation the only thing you need to do is require the module:
var EventEmitter = require('eventemitter3');
And you're ready to create your own EventEmitter instances. For the API documentation, please follow the official Node.js documentation:
http://nodejs.org/api/events.html
Contextual emits
We've upgraded the API of the EventEmitter.on, EventEmitter.once and
EventEmitter.removeListener to accept an extra argument which is the context
or this value that should be set for the emitted events. This means you no
longer have the overhead of an event that required fn.bind in order to get a
custom this value.
var EE = new EventEmitter()
, context = { foo: 'bar' };
function emitted() {
console.log(this === context); // true
}
EE.once('event-name', emitted, context);
EE.on('another-event', emitted, context);
EE.removeListener('another-event', emitted, context);
Tests and benchmarks
To run tests run npm test. To run the benchmarks run npm run benchmark.
Tests and benchmarks are not included in the npm package. If you want to play
with them you have to clone the GitHub repository. Note that you will have to
run an additional npm i in the benchmarks folder before npm run benchmark.