developit/mitt

★ 11,870TypeScriptAudience · developerComplexity · 1/5LicenseSetup · easy

Mindmap

mindmap
  root((mitt))
    What it does
      Event emitter
      Pub-sub messaging
      Component decoupling
    API
      on to subscribe
      emit to fire
      off to unsubscribe
      Wildcard handler
    Features
      Under 200 bytes
      TypeScript typed
      No dependencies
    Environments
      Browser
      Node.js
      IE9 and later

mindmap root((mitt)) What it does Event emitter Pub-sub messaging Component decoupling API on to subscribe emit to fire off to unsubscribe Wildcard handler Features Under 200 bytes TypeScript typed No dependencies Environments Browser Node.js IE9 and later

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a lightweight publish-subscribe message bus to a JavaScript or TypeScript app so components can communicate without importing each other directly.

USE CASE 2

Use the wildcard event handler to log every event in your app for debugging without changing any emitting code.

USE CASE 3

Replace a heavy event library with mitt in a bundle-size-sensitive web app since the entire library compresses to under 200 bytes.

Tech stack

TypeScriptJavaScript

Getting it running

Difficulty · easy Time to first run · 5min

Free to use, modify, and distribute for any purpose including commercial use under the MIT license.

In plain English

Mitt is a JavaScript utility that lets different parts of a program send messages to each other without needing to be directly connected. This pattern is called an event emitter or publish-subscribe. One piece of code says "something happened" by emitting an event, and other pieces of code that registered interest in that event get notified and can respond. This is a very common need in web applications, and mitt is an extremely small solution to it, under 200 bytes in size when compressed. The API has three main operations. You call on to register a handler function for a named event, emit to fire an event and pass along any data, and off to stop listening. There is also a special wildcard event name using an asterisk that lets a single handler receive every event regardless of its name, which can be useful for debugging or logging. All registered handlers are stored in a plain Map object, which you can also clear directly. Mitt works in both browsers and server-side JavaScript environments. It has no dependencies. The README notes it supports Internet Explorer 9 and later in addition to modern browsers. For TypeScript users, mitt supports defining the full set of events and their data types upfront, so the type checker can catch mistakes like emitting a string where a number was expected or listening for an event name that was never defined. Installation is through npm. The package can also be loaded directly in a web page via a script tag without any build step. The project is open-source under the MIT license.

Copy-paste prompts

Prompt 1

I'm using developit/mitt in a TypeScript app. Help me define a typed event map for three events: 'user:login' with a User object, 'cart:update' with a number quantity, and 'error' with an Error, then show me how to emit and listen to each with full type safety.

Prompt 2

Using mitt as a global event bus in a vanilla JavaScript web app, show me how to set up a single shared emitter instance, emit a 'data:loaded' event from a fetch callback, and listen for it in a separate module to update the DOM.

Prompt 3

I'm using mitt in a React app and want to communicate between two sibling components without lifting state. Show me how to create a shared mitt instance, emit from one component on button click, and update state in the other component's listener.

Open on GitHub → Explain another repo

← developit on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.