Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: about 4 hours 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">
    • 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 - 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