Awesome Tiny JS

A collection of tiny JS libraries to put your bundle on a diet. Curated by Vladimir Klepov Rules:

Size is under 2Kb-ish, min + gzip, with all deps, except where noted.
For multi-purpose libraries, the size of a useful subset must be under 2Kb-ish.
Second-level libraries only allowed for React, Vue, Angular, svelte.
Useful client-side. I haven't figured out participation rules for node-only libraries, and I'm not too worried about them.
100+ GitHub stars. Adding every obsure library will dilute the list.
No zero-JS (CSS- or type-only) libraries. It's not awesome-css or something.

Disclaimers:

I haven't used all these libraries personally. The ones I tried and enjoyed are marked with ⭐
Most framework-specific libraries are for React, because that's what I'm familiar with.

Suggestions welcome! Please check that the lib you're suggesting is not already in WIP and drop an issue.

UI Frameworks

UI frameworks (libraries?) provide declarative templates, event bindings, and observable state to update the view. I've been generous and expanded the size limit for this category to 4Kb, but also increased the star limit to 3K.

preact ⭐ — React-like API (pre-hooks) in 4Kb. Cool ecosystem of similarly tiny tools and components. Highly recommended.

The following libraries are small and cool, but note they're about 500x less popular than preact. Kudos for deconstrucing the very essence of a "framework":

million — Marketed as a drop-in replacement for React, but in under 2Kb.
fre — React-like library with hooks and concurrency, 1–3Kb.
hyperapp — Declarative UI with pure JS syntax and immutable state, under 2Kb.
redom — Hyperapp-style templates with imperative event listeners and updates, around 2Kb.

And if being declarative is not your thing:

umbrella — jQuery-style DOM manipulation library in 3Kb.

Event emitters

Event emitter pattern is fairly easy to implement yourself, but why bother when you have these cool tools? With an arms race to build the smallest one, the limit is 0.5Kb.

mitt ⭐ — 200-byte emitter. I use it on most projects.
nanoevents — smaller and with nicer unsubscribe API, but no '*' event.
eev — more of the same in 500b.
onfire.js — 500b, but has .once.

Reactive programming

A step up from a raw event emitter, reactive libraries can build chains of event transforms, filters, and side-effects. You can already use these to build UIs by manually updating DOM on state change:

flyd — rx-styled event streams in a 2Kb-ish package.
hyperactiv — 4 functions to make objects observable and listen to changes, in 1Kb.
flimsy — 1Kb reactive core of solid.js that almost fit into UI frameworks category. Author warning: is probably buggier.

Honorable mentions: callbag-basics and oby could make it if they had tree-shaking, but otherwise are around 7Kb.

State managers

State managers combine observable state with actions and framework bindings, intended for app-wide state.

zustand ⭐ — ~1Kb store with pleasant actions and selectors. React / vanilla.
nanostores — modular store in sub-1Kb with lots of framework connectors.
storeon — minimal 400-byte redux-styled store. (p)react, has third-party connectors.
unistore ⭐ — sub-1Kb store with actions from preact developers, (p)react support.
teaful — (p)react store with useState-like API in 1Kb.

Routers and URL utils

Do stuff on URL / history changes, with path matching and parsing:

wouter — Declarative routes for (p)react in 1.5Kb, or a 400-byte hook.
@nanostores/router — routes as a nanostores store (framework-agnostic), sub-1Kb.
navaid — history-based observable router, sub-1Kb.
routie — hash-based observable router, sub-1Kb.

Just want to parse or match URL paths without observing them? Here you go:

matchit — route parser and matcher, sub-1Kb.
regexparam — convert path to regexp in 400 bytes.
qss — parse querystrings in 300b. Not sure you need it, URL API support is good.

API Layer

fetch API has some boilerplate associated with it: serialize & parse data, reject on non-200 response, etc. These tiny packages handle it for you:

redaxios — drop-in axios replacement in 800 bytes.
wretch — chainable API with error processing in 2Kb, and lots of extra plugins.
gretchen — chainable API with type-safe errors in 2Kb.

If for some reason you still need a fetch polyfill, try this one:

unfetch ⭐ — loose fetch polyfill in 500 bytes.

I18N

A map of strings might seem enough to translate an app, but these tools also handle interpolation and some extra goodies:

@nanostores/i18n — detect locale, load dictionaries, format dates / numbers in sub-1Kb.
rosetta — bare-bones interpolation in 300 bytes.
lingui — 1.7Kb core with template strings and optional react connector. babel-depenent.
eo-locale — interpolation & dates / numbers in under 2Kb, including react bindings.

Unique ID generation

Unique ID generation does not take a lot of code, but it's not someting I'd want to write myself. Limit is 500 bytes. Also note that the native crypto.randomUUID has OK support.

uuid ⭐ — real UUIDs in 240 bytes.
nanoid ⭐ — random IDs with larger alphabet in 130 bytes.
uid — can do in in 130–205 bytes.
hexoid — hex IDs in 190 bytes.

To be continued!

See WIP.md for a list of small libraries I have found, but not yet analyzed deeply.

Collected and reviewed by Vladimir Klepov in 2023. CC0 license.

komlev / awesome-tiny-js