Guide · Open source

How to use mitt: install, emit and listen to events

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Mitt is a very small JavaScript library for sending named events between parts of a program. One piece of code emits an event and any number of other pieces listen for it and react. This guide shows you how to install mitt, create an emitter, listen and unlisten, and use typed events in TypeScript.

mittdevelopit/mitt · ★ 11.9k · MIT Install options & downloads

Quick start

1Install prerequisites. Make sure Node.js and npm are installed on your machine.
2Install mitt. Run npm install --save mitt in your project folder.
3Import mitt. Import it with import mitt from 'mitt' or require it with CommonJS.
4Create an emitter. Call mitt() to create an emitter instance.
5Register handlers. Use emitter.on with an event name and a function to listen for events.
6Emit events. Call emitter.emit with an event name and a value to invoke matching handlers.
7Unlisten when done. Pass the same function to emitter.off to remove a handler.

Install mitt with npm

You need Node.js and npm installed. Then add mitt to your project from the command line.

$ npm install --save mitt

Import mitt with a module bundler

Use mitt the way you would any other module. The README shows ES module and CommonJS imports, and says that bundlers such as rollup or webpack work with it.

For the browser without a bundler, the README says a UMD build is available on unpkg and that the library is then found on window.mitt.

// using ES6 modules
import mitt from 'mitt'

// using CommonJS modules
var mitt = require('mitt')

Create an emitter and listen for events

Call mitt() to create an emitter. Use on to register a handler for an event name. The handler receives the value passed to emit.

Use the special type '*' to listen to all events. Its handler receives the event type first, then the event value.

emitter.on(type, handler) registers a handler for the given type.
'*' listens to all events; these handlers run after type-matched handlers.

import mitt from 'mitt'

const emitter = mitt()

// listen to an event
emitter.on('foo', e => console.log('foo', e) )

// listen to all events
emitter.on('*', (type, e) => console.log(type, e) )

Fire events with emit

Call emit with an event name and a value. The README recommends an object as the value, and every handler for that type is invoked with it.

Manually firing '*' handlers is not supported.

emitter.emit('foo', { a: 'b' })

Remove listeners and clear events

To unlisten, pass the same function reference to off. The off method's handler argument is optional: the README says that if it is omitted, all handlers of the given type are removed.

The all property is a Map of event names to registered handlers, and the README shows all.clear() to clear all events.

Keep a named reference to a handler if you want to remove it later.
Omit the handler in off to remove every handler for that type.

emitter.all.clear()

function onFoo() {}
emitter.on('foo', onFoo)   // listen
emitter.off('foo', onFoo)  // unlisten

Use typed events in TypeScript

Describe your event names and payloads as a type and pass it to mitt. The README says to set "strict": true in tsconfig.json to get improved type inference for instance methods. With a typed emitter, passing the wrong payload type produces a compile error.

You can also annotate a variable with the provided Emitter type.

import mitt from 'mitt';

type Events = {
  foo: string;
  bar?: number;
};

const emitter = mitt<Events>();

emitter.on('foo', (e) => {});

emitter.emit('foo', 42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

What people use it for

Sending messages between components in a frontend app without a large framework, as the README's Preact demo shows.
Broadcasting a named event from one module that several other modules react to.
Adding typed event names and payloads to a TypeScript project.
Logging or monitoring every event through a '*' listener.

Frequently asked questions

How do I install mitt?

Install mitt with npm by running npm install --save mitt in your project. The README says you need Node.js and npm. You can also load a UMD build from unpkg in the browser.

Is mitt free to use?

Yes. Mitt is released under the MIT License, and the README credits Jason Miller as the copyright holder.

Does mitt work in the browser?

Yes. The README says mitt was made for the browser, works in any JavaScript runtime, has no dependencies, and supports IE9+.

How is mitt different from Node's EventEmitter?

Mitt uses the same names and ideas as Node's EventEmitter but is far smaller. The README only says it is familiar, not that it is a complete replacement, so check the features you need before switching.

Does mitt support once-only listeners or error events?

The README does not describe once-only listeners or error events, so do not assume they exist. Check the API section of the README or the source before relying on them.

What are alternatives to mitt?

The README lists EventEmitter3, nanoevents and tiny-emitter as comparable projects. Pick based on the feature set and size you need.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use mitt if you want simple named events between parts of a frontend or TypeScript project and care about a very small package. Pick a fuller event system such as Node's EventEmitter if you need once-only listeners, error events, or other advanced features the README does not describe.

Install options & downloads