Tiny JS
Frontend libraries that fit into 2 kB with dependencies.
Contents
UI Frameworks
React-like API (pre-hooks). Cool ecosystem of similarly tiny tools and components. Highly recommended.
vDOM framework with pure JS syntax and immutable state,
Hyperapp-style templates with imperative event listeners and updates,
React-like library with hooks and concurrency,
vDOM-based framework optimized for no-build setups,
Hyperapp with state & effect hooks removed,
Tagged templates + reactive data,
jQuery-style DOM manipulation library,
Event Emitters
State Managers
Simple stores with pleasant actions and selectors. Vanilla <img align="top" height="24" src="./img/zustandvanilla.svg">, React <img align="top" height="24" src="./img/zustand.svg">
Modular store with good tree-shaking support, <img align="top" height="24" src="./img/nanostores.svg"> vanilla, + React <img align="top" height="24" src="./img/nanostoresreact.svg"> extra. Supports all the top frameworks.
Atomic stores with lots of framework connectors, <img align="top" height="24" src="./img/exome.svg"> + React <img align="top" height="24" src="./img/exomereact.svg"> extra. Supports all the top frameworks.
Minimal redux-styled store with lots of framework connectors, <img align="top" height="24" src="./img/storeon.svg">. React extra <img align="top" height="24" src="./img/storeonreact.svg"> + Vue, Svelte, Angular.
Centralized store with actions, <img align="top" height="24" src="./img/unistore.svg"> + React <img align="top" height="24" src="./img/unistorereact.svg">
Store with useState-like API, <img align="top" height="24" src="./img/teaful.svg">, including React / preact connector.
Signals
The OG signals from preact <img align="top" height="24" src="./img/preactsignals-core.svg"> core, <img align="top" height="24" src="./img/preactsignals-react.svg"> with react integration.
A smaller signal implementation, <img align="top" height="24" src="./img/usignal.svg">
4 functions to make objects observable and listen to changes, <img align="top" height="24" src="./img/hyperactiv.svg">
Signals from Solid (it almost fit into UI frameworks category itself). Author warning: it's probably buggy. <img align="top" height="24" src="./img/flimsy.svg">
could make it if it had tree-shaking, but otherwise is around 7 kB.
Routers and URL Utils
Declarative router for React / preact, <img align="top" height="24" src="./img/wouter.svg">, also available as a standalone hook: <img align="top" height="24" src="./img/wouteruse-browser-location.svg">
Routes as a nanostores store (framework-agnostic), <img align="top" height="24" src="./img/nanostoresrouter.svg">
History-based observable router, <img align="top" height="24" src="./img/navaid.svg">
Route parser and matcher in <img align="top" height="24" src="./img/matchit.svg">
Convert path to regexp in <img align="top" height="24" src="./img/regexparam.svg">
Parse querystrings in <img align="top" height="24" src="./img/qss.svg">. Not sure you need it, URL API support is good.
API Layer
I18N
Detect locale, load dictionaries, format dates / numbers, . including nanostores.
Interpolation and dates / numbers, ., or . with react bindings.
Bare-bones template strings ({{hello}}, {{username}}) and custom functions for everyting else, .
Small core with template strings, .
Dates and Time
Not tiny as a whole, but most functions are under 1 kB each (format and parse are quite heavy).
Almost moment.js-compatible API, covers most use cases, .
Simple date / time formatter: {h}:{mm} -> 9:33, .
Date / time formatter, only supports padded numeric output (September -> 09), .
More of the same, .
Parse & format ms durations, e.g. "1m" <-> 60000, .
Format dates into stuff like X minutes ago or in X hours, .
More of the same, .
Generic Utilities
90 tree-shakable helpers (list).
187 tree-shakable helpers (list).
82 helpers in separate packages (list).
96 tree-shakable helpers. Lazy evaluation support.
Contains many sub-1 kB helpers. It does not tree-shake as well as the libraries above due to codebase structure.
Validation
zod-style API with fine-grained checks: v8n().string().minLength(5).first("H").last("o"). No tree shaking,
The smallest validation library:
The most popular modular validation library with good tree-shaking,
Another modular validation library,
Composable functional validators,
Unique ID Generation
Colors
Touch Gestures
Pan, swipe, tap, doubletap, longpress, and pinch / rotate. My personal favorite. . Extra features come as plugins, 150b to 1.5 kB each.
Configurable pan, swipe, tap, doubletap, longpress.
Unified interface for mouse, touch and pointer events,
Detect present and primary input method (touch / mouse) and supported events,
attempts a modular approach to gesture detection, but the core is around 2 kB without any gesture recognizers.
used in ant design system, could be the only react component on the list, but babel-runtime / corejs polyfills hard-wired into the build push the ~2.5 kB size to over 10 kB.
Text Search
Feature-rich and customizable: multi-field indices, stop words, custom stemmers and tokenizers.
Similar to js-search, differs in ranking and is less strict for multi-word queries (compare). Supports field weights.
Also similar, (compare)
Index-free search (slower, but easier to use) with sane ordering
is 17 kB with 15 languages
supports 30 languages but only works with lunr, the most promising one is natural but it depends on Node.js.
Fuzzy search
Index-free, can highlight matches.
With stateful index.
Matches one string at a time, tree-shakeable scores and match highlighting. total, or ~150 bytes for hasMatch only.
One string at a time, does not compute score / rank.
Quicksilver algorithm, prioritizes matches at start of word for command abbreviations (e.g. gp -> git push). One string at a time.
Another quicksilver-based lib, tweaked for long strings. Built-in list filtering and sorting, or 1.2 kB for single-string scoring.
Find misspellings, e.g. missipissi -> Missisipi, Commercial usage costs $42.