Curated list of awesome lists
Awesome Tiny JS 
Tiny front-end libraries to put your bundle on a diet. Rules:
- Size is under 2 kB-ish, min + gzip, with all dependencies, except where noted.
- For multi-purpose libraries, the size of a useful subset must be under 2 kB-ish.
- Useful client-side. I haven't figured out participation rules for node-only libraries, and I'm not too worried about them.
- Second-level libraries only allowed for React, Vue, Angular, svelte.
- 100+ GitHub stars. Libraries with less are awesome, too, but stars indicate some community review.
- No zero-JS (CSS- or type-only) libraries. It's not awesome-css or something.
Contents
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 4.5 kB (if you're boring, count them as 2 libraries), but also increased the star limit to 2K.
-
preact - React-like API (pre-hooks). 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 - Alternate runtime for React components,
-
fre - React-like library with hooks and concurrency, or ~2 kB with tree-shaking.
-
hyperapp - Declarative UI with pure JS syntax and immutable state,
-
redom - Hyperapp-style templates with imperative event listeners and updates,
And if being declarative is not your thing:
-
umbrella - jQuery-style DOM manipulation library,
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.5 kB.
-
mitt - Plain event emitter that I use on most projects,
-
nanoevents - Nicer unsubscribe API, but no
*
event,
-
eev - More of the same,
-
onfire.js - Also has
.once
method,
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,
-
callbag-basics - Rx-style event streams,
-
hyperactiv - 4 functions to make objects observable and listen to changes (mobx-style),
-
flimsy - Signals from Solid (it almost fit into UI frameworks category itself). Author warning: it's probably buggy.
Honorable mention: oby could make it if it had tree-shaking, but otherwise is around 7 kB.
State Managers
State managers combine observable state with actions and framework bindings, intended for app-wide state.
-
zustand - Simple stores with pleasant actions and selectors. React or vanilla
-
nanostores - Modular store with good tree-shaking support, . Lots of framework connectors (e.g. React ).
-
exome - Atomic stores with lots of framework connectors,
-
reatom - Atomic stores for React / svelte / vanilla,
-
storeon - Minimal redux-styled store with lots of framework connectors,
-
unistore - Centralized store with actions for React / preact,
-
teaful - Store with useState-like API for React / preact,
Routers and URL Utils
Do stuff on URL / history changes, with path matching and parsing:
-
wouter - Declarative router for React / preact, , also available as a 400-byte hook.
-
@nanostores/router - Routes as a nanostores store (framework-agnostic),
-
navaid - History-based observable router,
-
routie - Hash-based observable router,
Just want to parse or match URL paths without observing them? Here you go:
-
matchit - Route parser and matcher in
-
regexparam - Convert path to regexp in
-
qss - Parse querystrings in . 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 for modern browsers,
-
wretch - Chainable API with error processing and lots of extra plugins,
-
gretchen - Chainable API with type-safe errors,
If for some reason you still need a fetch polyfill, try this one:
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,
-
eo-locale - Interpolation and dates / numbers, including react bindings.
-
rosetta - Bare-bones template strings (
{{hello}}, {{username}}
) and custom functions for everyting else,
-
lingui - Small core with template strings, (uses build step). Optional react connector:
Dates and Time
Date and time manipulation in pure JS is verbose. Luckily, two of the top date libraries have sensible size:
-
date-fns - Not tiny as a whole, but most functions are under 1 kB each (format and parse are quite heavy).
-
dayjs - Almost moment.js-compatible API, covers most use cases,
And some more packages that only do formatting:
-
tinytime - Simple date / time formatter:
{h}:{mm} -> 9:33
,
-
tinydate - Date / time formatter, only supports padded numeric output (
September -> 09
),
-
time-stamp - More of the same,
-
ms - Parse & format ms durations, e.g.
"1m" <-> 60000
,
-
timeago.js - Format dates into stuff like X minutes ago or in X hours,
-
fromnow - More of the same,
Note that the built-in Intl.DateTimeFormat
has decent support.
Generic Utilities
Something you'd find in lodash or ramda, but smaller. Most are pretty similar and very small, with minor differences in package structure (single / package-per-helper) and tree shaking vs direct helper import.
Honorable mention: underscore, contains many sub-1 kB helpers. It does not tree-shake as well as the libraries above due to codebase structure.
Note: lodash itself is not tree-shakable, but has made many attempts at modulaity with lodash.method
packages, imports from lodash/method
, and lodash-es
, none of which work well in practice.
Also note that much of the original lodash functionality comes built-in with modern ES. Prefer native versions over libraries as your browser target allows.
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.
Colors
Color manipulation is rare in pure UI development, but very helpful for data visualization, and uses freaky math. Don't fry your brain, take these:
-
colord - Manipulate colors and convert between spaces, . Extra features come as plugins, 150b to 1.5 kB each.
-
colr - More of the same,
-
polychrome - More of the same,
-
randomcolor - Attractive random colors with configuration.
Contributing
Suggestions welcome! See contributing.md, or drop an issue.
Footnotes
See WIP for possibly awesome libraries I have found, but not yet analyzed deeply, and incubate for awesome libraries that don't meet popularity criteria yet.
Collected and reviewed by Vladimir Klepov in 2023.