Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
awesome-tiny-js
🤏 A collection of tiny JS libraries (under 2 kB) to put your bundle on a diet
https://github.com/thoughtspile/awesome-tiny-js
Last synced: 5 days ago
JSON representation
-
UI Frameworks
- 500x less popular than preact.
- preact - React-like API (pre-hooks). Cool ecosystem of similarly tiny tools and components. Highly recommended. <img align="top" height="24" src="./img/preact.svg">
- hyperapp - vDOM framework with pure JS syntax and immutable state, <img align="top" height="24" src="./img/hyperapp.svg">
- redom - Hyperapp-style templates with _imperative_ event listeners and updates, <img align="top" height="24" src="./img/redom.svg">
- fre - React-like library with hooks and concurrency, <img align="top" height="24" src="./img/fre.svg">
- van - vDOM-based framework optimized for no-build setups, <img align="top" height="24" src="./img/vanjs-core.svg">
- superfine - Hyperapp with state & effect hooks removed, <img align="top" height="24" src="./img/superfine.svg">
- arrowjs - Tagged templates + reactive data, <img align="top" height="24" src="./img/arrow-jscore.svg">
- umbrella - jQuery-style DOM manipulation library, <img align="top" height="24" src="./img/umbrellajs.svg">
- 500x less popular than preact.
- openly experimental
-
Dates and Time
-
Reactive Programming
- `Intl.DateTimeFormat`
- dayjs - _Almost_ moment.js-compatible API, covers most use cases, <img align="top" height="24" src="./img/dayjsesm.svg">
- tinytime - Simple date / time formatter: `{h}:{mm} -> 9:33`, <img align="top" height="24" src="./img/tinytime.svg">
- tinydate - Date / time formatter, only supports padded numeric output (`September -> 09`), <img align="top" height="24" src="./img/tinydate.svg">
- time-stamp - More of the same, <img align="top" height="24" src="./img/time-stamp.svg">
- ms - Parse & format ms durations, e.g. `"1m" <-> 60000`, <img align="top" height="24" src="./img/ms.svg">
- timeago.js - Format dates into stuff like _X minutes ago_ or _in X hours,_ <img align="top" height="24" src="./img/timeagojs.svg">
- fromnow - More of the same, <img align="top" height="24" src="./img/fromnow.svg">
-
-
Colors
-
Reactive Programming
- freaky math.
- colord - Manipulate colors and convert between spaces, <img align="top" height="24" src="./img/colord.svg">. Extra features come as plugins, 150b to 1.5 kB each.
- colr - More of the same, <img align="top" height="24" src="./img/colr.svg" >
- polychrome - More of the same, <img align="top" height="24" src="./img/polychrome.svg">
- randomcolor - Attractive random colors with configuration. <img align="top" height="24" src="./img/randomcolor.svg">
-
-
Text Search
-
Reactive Programming
- Porter stemmers
- js-search - Feature-rich and customizable: multi-field indices, stop words, custom stemmers and tokenizers. <img align="top" height="24" src="./img/js-search.svg">
- wade - Also similar, [(compare)](https://leeoniya.github.io/uFuzzy/demos/compare.html?libs=js-search,Wade,ndx&search=twilight%20sag) <img align="top" height="24" src="./img/wade.svg">
- stemmer - <img align="top" height="24" src="./img/stemmer.svg">
- porter-stemmer - <img align="top" height="24" src="./img/porter-stemmer.svg">
- ndx - Similar to js-search, differs in [ranking](https://kmwllc.com/index.php/2020/03/20/understanding-tf-idf-and-bm-25/) and is less strict for multi-word queries [(compare)](https://leeoniya.github.io/uFuzzy/demos/compare.html?libs=js-search,ndx,Wade&search=twilight%20sag). Supports field weights. <img align="top" height="24" src="./img/ndx-ndxquery.svg">
- libsearch - Index-free search (slower, but easier to use) with sane ordering <img align="top" height="24" src="./img/libsearch.svg">
- snowball-js - languages](https://github.com/MihaiValentin/lunr-languages) supports 30 languages but only works with [lunr,](https://github.com/olivernn/lunr.js) the most promising one is [natural](https://github.com/NaturalNode/natural/tree/master/lib/natural/stemmers) but it depends on Node.js.
-
Fuzzy search
- fuzzy - Index-free, can highlight matches. <img align="top" height="24" src="./img/fuzzy.svg">
- fuzzy-search - With stateful index. <img align="top" height="24" src="./img/fuzzy-search.svg">
- fzy.js - Matches one string at a time, tree-shakeable scores and match highlighting. <img align="top" height="24" src="./img/fzyjs.svg"> total, or ~150 bytes for `hasMatch` only.
- fuzzysearch - One string at a time, does not compute score / rank. <img align="top" height="24" src="./img/fuzzysearch.svg">
- liquidmetal - Quicksilver algorithm, prioritizes matches at start of word for command abbreviations (e.g. `gp` -> `git push`). One string at a time. <img align="top" height="24" src="./img/liquidmetal.svg">
- quick-score - Another quicksilver-based lib, tweaked for long strings. Built-in list filtering and sorting, <img align="top" height="24" src="./img/quick-score.svg"> or 1.2 kB for single-string scoring.
- fuzzyset - Find misspellings, e.g. missipissi -> Missisipi, <img align="top" height="24" src="./img/fuzzyset.svg"> Commercial usage costs $42.
-
-
Event Emitters
- mitt - Plain event emitter that I use on most projects, <img align="top" height="24" src="./img/mitt.svg">
- nanoevents - Nicer unsubscribe API, but no `*` event, <img align="top" height="24" src="./img/nanoevents.svg">
- onfire.js - Also has `.once` method, <img align="top" height="24" src="./img/onfirejs.svg">
-
State Managers
-
Reactive Programming
- flyd - Rx-styled event streams, <img align="top" height="24" src="./img/flyd.svg">
- callbag-basics - Rx-style event streams, <img align="top" height="24" src="./img/callbag-basics.svg">
-
Signals
- flimsy - 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">
- oby - shaking, but otherwise is around 7 kB.
- @preact/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.
- usignal - A smaller signal implementation, <img align="top" height="24" src="./img/usignal.svg">
- hyperactiv - 4 functions to make objects observable and listen to changes, <img align="top" height="24" src="./img/hyperactiv.svg">
-
- zustand - 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">
- nanostores - 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.
- exome - 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.
- storeon - 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.
- unistore - Centralized store with actions, <img align="top" height="24" src="./img/unistore.svg"> + React <img align="top" height="24" src="./img/unistorereact.svg">
- teaful - Store with useState-like API, <img align="top" height="24" src="./img/teaful.svg">, including React / preact connector.
-
-
Routers and URL Utils
-
Reactive Programming
- @nanostores/router - Routes as a nanostores store (framework-agnostic), <img align="top" height="24" src="./img/nanostoresrouter.svg">
- navaid - History-based observable router, <img align="top" height="24" src="./img/navaid.svg">
- matchit - Route parser and matcher in <img align="top" height="24" src="./img/matchit.svg">
- regexparam - Convert path to regexp in <img align="top" height="24" src="./img/regexparam.svg">
- qss - Parse querystrings in <img align="top" height="24" src="./img/qss.svg">. Not sure you need it, [URL API](https://developer.mozilla.org/en-US/docs/Web/API/URL) support is good.
- wouter - 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">
-
-
API Layer
-
Reactive Programming
- redaxios - Drop-in axios replacement for modern browsers, <img align="top" height="24" src="./img/redaxios.svg">
- wretch - Chainable API with error processing and lots of extra plugins, <img align="top" height="24" src="./img/wretch.svg">
- gretchen - Chainable API with type-safe errors, <img align="top" height="24" src="./img/gretchen.svg">
- unfetch - Loose fetch polyfill, <img align="top" height="24" src="./img/unfetch.svg">
-
-
I18N
-
Reactive Programming
- rosetta - Bare-bones template strings (`{{hello}}, {{username}}`) and custom functions for everyting else, <img align="top" height="24" src="./img/rosetta.svg">
- lingui - Small core with template strings, <img align="top" height="24" src="./img/linguicore.svg">
- @nanostores/i18n - Detect locale, load dictionaries, format dates / numbers, <img align="top" height="24" src="./img/nanostoresin.svg"> including nanostores.
- eo-locale - Interpolation and dates / numbers, <img align="top" height="24" src="./img/eo-localecore.svg">, or <img align="top" height="24" src="./img/eo-localereact.svg"> with react bindings.
-
-
Generic Utilities
-
Reactive Programming
- remeda - 90 tree-shakable helpers [(list).](https://bundlephobia.com/package/remeda)
- rambda - 187 tree-shakable helpers [(list).](https://bundlephobia.com/package/rambda)
- just - 82 helpers in separate packages [(list).](https://anguscroll.com/just/)
- @fxts/core - 96 tree-shakable helpers. Lazy evaluation support.
- underscore, - 1 kB helpers. It does not tree-shake as well as the libraries above due to codebase structure.
-
-
Validation
-
Reactive Programming
- v8n - zod-style API with fine-grained checks: `v8n().string().minLength(5).first("H").last("o")`. No tree shaking, <img align="top" height="24" src="./img/vn.svg">
- banditypes - The smallest validation library: <img align="top" height="24" src="./img/banditypes.svg">
- superstruct - The most popular modular validation library with good tree-shaking, <img align="top" height="24" src="./img/superstruct.svg">
- valibot - Another modular validation library, <img align="top" height="24" src="./img/valibot.svg">
- deep-waters - Composable functional validators, <img align="top" height="24" src="./img/deep-waterscompose-deep-watershasShape-deep-watersarrayOf-deep-watersisString-deep-watersisNumber-deep-watersisBoolean.svg">.
-
-
Unique ID Generation
-
Reactive Programming
- @lukeed/uuid - Real UUIDs, <img align="top" height="24" src="./img/lukeeduuid.svg">
- nanoid - Random IDs with larger alphabet, <img align="top" height="24" src="./img/nanoid.svg">
- uid - More of the same, <img align="top" height="24" src="./img/uid.svg">
- hexoid - Hexadecimal IDs, <img align="top" height="24" src="./img/hexoid.svg">
- native `crypto.randomUUID` - api_crypto_randomuuid)
-
-
Touch Gestures
-
Reactive Programming
- alloyfinger - Pan, swipe, tap, doubletap, longpress, _and_ pinch / rotate. My personal favorite. <img align="top" height="24" src="./img/alloyfinger.svg">.
- tinygesture - Configurable pan, swipe, tap, doubletap, longpress. <img align="top" height="24" src="./img/tinygesture.svg">.
- pointer-tracker - Unified interface for mouse, touch and pointer events, <img align="top" height="24" src="./img/pointer-tracker.svg">
- any-touch - gesture,](https://github.com/react-component/gesture) 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.
- detect-it - Detect present and primary input method (touch / mouse) and supported events, <img align="top" height="24" src="./img/detect-it.svg">
-
-
Footnotes
-
Fuzzy search
-
Programming Languages
Categories
Sub Categories
Keywords
javascript
19
typescript
12
tiny
11
react
10
preact
6
validation
5
reactive
4
time
4
state-management
4
datetime
4
date
4
vdom
4
router
3
fuzzy-search
3
i18n
3
nodejs
3
dom
3
fetch
3
react-hooks
3
gesture
3
touch
3
web
3
schema
3
state
3
library
3
pinch
2
rotate
2
swipe
2
tap
2
css-color
2
jsx
2
color
2
pan
2
utility
2
performance
2
finger
2
functional
2
utils
2
fp
2
zero-dependency
2
reactjs
2
http-client
2
http
2
icu
2
hooks
2
internationalization
2
intl
2
localization
2
messageformat
2
react-components
2