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:
- Most framework-specific libraries are for React, because that's what I'm familiar with.
Contents
- UI Frameworks
- Event Emitters
- Reactive Programming
- State Managers
- Routers and URL Utils
- API Layer
- I18N
- Dates and Time
- Generic Utilities
- Unique ID Generation
- Colors
- To be Continued
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.
- reatom — Reactive stores with a 2Kb core. React / svelte connectors cost extra.
- 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.