
A curated drawer of CSS and UI design resources, grouped by job. Reach for the section that matches what you're building.

## Design systems & starters

| Resource | Why it is useful |
| --- | --- |
| [Awesome design systems](https://github.com/alexpate/awesome-design-systems) | Big curated list of public design systems to reference and steal patterns from. |
| [PaperCSS](https://www.getpapercss.com/about/) | Hand-drawn, sketchy CSS framework ([repo](https://github.com/papercss/papercss)) — good for playful or wireframe-style UIs. |
| [SaaS/desktop shell template](https://codepen.io/TurkAysenur/pen/ZEpxeYm) | CodePen of a clean app shell layout to base a dashboard on. |
| [Template inspiration thread](https://twitter.com/denicmarko/status/1470356843356635141) | Twitter thread of UI template ideas. |

## Fonts & type

| Resource | Why it is useful |
| --- | --- |
| [Type Scale](https://github.com/jeremychurch/type-scale) | Generate a modular type scale and the CSS that goes with it. |

## Color

| Resource | Why it is useful |
| --- | --- |
| [hihayk/scale](https://github.com/hihayk/scale) | Visual tool ([live](https://hihayk.github.io/scale/)) for generating color/spacing scales. |
| [colord](https://github.com/omgovich/colord) | Tiny, fast color manipulation library. |
| [simpler-color](https://github.com/arnelenero/simpler-color) | Generate a full palette from a few base colors. |
| [tonality](https://github.com/souporserious/tonality) | Adjust color tone palettes programmatically. |
| [chroma.js](https://github.com/gka/chroma.js) | Workhorse color functions: scales, interpolation, conversions. |
| [fettepalette](https://github.com/meodai/fettepalette) | Generate color ramps ([demo](https://meodai.github.io/fettepalette/)). |
| [iridescent](https://github.com/MikeKovarik/iridescent/blob/master/index.mjs) | Tiny single-file color library. |

## Charts

| Resource | Why it is useful |
| --- | --- |
| [Charts.css](https://github.com/ChartsCSS/charts.css) | Style charts with pure CSS from HTML markup — no JS. |
| [roughViz](https://github.com/jwilber/roughViz) | Sketchy, hand-drawn-style charts (pairs with PaperCSS). |
| [Nivo](https://nivo.rocks/line) | React chart components with sensible defaults. |
| [AntV G2](https://g2.antv.vision/en/examples/gallery) | Grammar-of-graphics charting library with a deep example gallery. |

## Icons

| Resource | Why it is useful |
| --- | --- |
| [Ionicons](https://github.com/ionic-team/ionicons) | Large open icon set ([site](https://ionic.io/ionicons)). |
| [Jam icons](https://github.com/michaelampr/jam) | Clean, consistent icon set. |
| [Iconsax React](https://github.com/rendinjast/iconsax-react) | Iconsax as React components ([site](https://iconsax-react.pages.dev/)). |
| [Jdenticon](https://github.com/dmester/jdenticon) | Generate unique identicon-style SVG avatars from a string. |
| [svg-spinners](https://github.com/n3r4zzurr0/svg-spinners) | Animated SVG spinner icons. |

## Loaders & progress

| Resource | Why it is useful |
| --- | --- |
| [SVG-Loaders](https://github.com/SamHerbert/SVG-Loaders) | Lightweight animated SVG loading indicators. |
| [whirl](https://github.com/jh3y/whirl) | CSS-only loading animation collection. |
| [react-block-ui](https://github.com/availity/react-block-ui) | Block a UI region while loading ([demo](https://availity.github.io/react-block-ui/)). |
| [Elastic progress bar](https://tympanus.net/Development/ElasticProgress/) | Springy progress-bar effect. |
| [Page preloading effect](https://tympanus.net/Tutorials/PagePreloadingEffect/) | Full-page loading transition. |
| [Grid loading animations](https://tympanus.net/Development/GridLoadingAnimations/) | Loading reveals for grid layouts. |
| [Creative loading effects](https://tympanus.net/Development/CreativeLoadingEffects/) | Assorted loading-effect ideas. |

## Page transitions & loading effects

Tympanus/Codrops demos — good for picking a transition style to reimplement.

| Resource | Why it is useful |
| --- | --- |
| [Page transitions](https://tympanus.net/Development/PageTransitions/) | Core page-to-page transition demos. |
| [Page loading effects](https://tympanus.net/Development/PageLoadingEffects/index3.html) | Loading-into-page reveal effects. |
| [Morphing page transition](https://tympanus.net/Development/MorphingPageTransition/index4.html) | Shape-morphing between pages. |
| [SVG drawing animation](https://tympanus.net/Development/SVGDrawingAnimation/index3.html) | SVG line-tracing / skeleton draw-in effect. |
| [Fullscreen layout transitions](https://tympanus.net/Development/FullscreenLayoutPageTransitions/) | Fullscreen layout-change transitions. |
| [Page stack navigation](https://tympanus.net/Blueprints/PageStackNavigation/) | Stacked-card page navigation. |
| [Button-to-page morph](https://tympanus.net/Development/ButtonComponentMorph/index3.html) | Morph a button into a full page/view. |
| [Medium-style hero morph](https://tympanus.net/Tutorials/MediumStylePageTransition/#5) | Hero image expands into the article. |
| [Card expansion transition](https://tympanus.net/Development/CardExpansion/) | Card expands into a detail view. |
| [Fullscreen book block](https://tympanus.net/Tutorials/FullscreenBookBlock/) | Page-turn / book effect. |
| [Page reveal effects](https://tympanus.net/Tutorials/PageRevealEffects/) | Multi-page swipe reveals. |
| [Playful trampoline effect](https://tympanus.net/Tutorials/PlayfulTrampolineEffect/) | Bouncy "trampoline" reveal. |
| [Article intro effects](https://tympanus.net/Development/ArticleIntroEffects/index4.html) | Scroll-driven hero-into-article transition. |
| [3D grid effect](https://tympanus.net/Development/3DGridEffect/) | Grid-to-post transition. |
| [transition.css](https://github.com/argyleink/transition.css) | Drop-in CSS enter/leave transition primitives. |

## Navigation & menus

| Resource | Why it is useful |
| --- | --- |
| [Multi-level menu](https://tympanus.net/Blueprints/MultiLevelMenu/) | Nested multi-level menu pattern. |
| [Line menu styles](https://tympanus.net/Development/LineMenuStyles/) | Minimal line-based menus. |
| [Off-canvas menu effects](https://tympanus.net/Development/OffCanvasMenuEffects/) | Slide-in off-canvas / sidebar menus. |
| [Sidebar transitions](https://tympanus.net/Development/SidebarTransitions/) | Animated sidebar reveal styles. |
| [Fullscreen overlay nav](https://tympanus.net/Development/FullscreenOverlayStyles/index6.html) | Fullscreen mobile nav overlay. |
| [Shape overlay nav](https://tympanus.net/Development/ShapeOverlays/index3.html) | Animated shape-overlay mobile nav. |
| [Perspective page-view nav](https://tympanus.net/Development/PerspectivePageViewNavigation/index3.html) | 3D perspective push navigation. |
| [Slide & push menus](https://tympanus.net/Blueprints/SlidePushMenus/) | Slide/push sidebar patterns. |
| [Horizontal slide-out menu](https://tympanus.net/Blueprints/HorizontalSlideOutMenu/) | Horizontal slide-out menu. |
| [Horizontal dropdown / mega menu](https://tympanus.net/Blueprints/HorizontalDropDownMenu/) | Mega-menu dropdown pattern. |
| [Menu hover effects](https://tympanus.net/Development/MenuHoverEffects/) | Hover effects for menu items. |
| [Morphing sidebar button](https://tympanus.net/Development/ButtonComponentMorph/index7.html) | Button that morphs into a sidebar. |
| [Creative link effects](https://tympanus.net/Development/CreativeLinkEffects/) | Animated nav-link underlines/effects. |
| [Animated border menus](https://tympanus.net/Tutorials/AnimatedBorderMenus/index2.html) | Desktop-app-style slide-out menu. |
| [Circular navigation](https://tympanus.net/Tutorials/CircularNavigation/index2.html) | Radial / circular nav. |
| [Multi-level push menu](https://tympanus.net/Development/MultiLevelPushMenu/index3.html) | Overlapping nested push menu. |
| [Header effects on scroll](https://tympanus.net/Development/HeaderEffects/) | Header transformations triggered by scroll. |

## Buttons

| Resource | Why it is useful |
| --- | --- |
| [Creative buttons](https://tympanus.net/Development/CreativeButtons/) | Assorted button hover/press styles. |
| [Button styles inspiration](https://tympanus.net/Development/ButtonStylesInspiration/) | Broad button-style gallery. |
| [Progress button styles](https://tympanus.net/Development/ProgressButtonStyles/) | Buttons that show inline progress. |
| [Circular progress button](https://tympanus.net/Tutorials/CircularProgressButton/) | Circular progress around a button. |
| [3D CSS progress bars](https://tympanus.net/Tutorials/CSSProgress/) | 3D-styled progress bars. |
| [Particle effect buttons](https://tympanus.net/Development/ParticleEffectsButtons/) | "Exploding" particle button effects. |

## Inputs & forms

| Resource | Why it is useful |
| --- | --- |
| [Text input effects](https://tympanus.net/Development/TextInputEffects/) | Animated label/underline input styles. |
| [Fullscreen form](https://tympanus.net/Development/FullscreenForm/) | Step-through fullscreen form layout. |
| [Minimal form](https://tympanus.net/Development/MinimalForm/) | Clean minimal form styling. |
| [Morphing login](https://tympanus.net/Development/ButtonComponentMorph/) | Button morphs into a login form. |
| [Animated checkboxes / radios](https://tympanus.net/Development/AnimatedCheckboxes/) | Animated checkbox and radio styles. |
| [Natural language form](https://tympanus.net/Tutorials/NaturalLanguageForm/) | Sentence-style fill-in-the-blank form. |
| [Custom file inputs](https://tympanus.net/Tutorials/CustomFileInputs/) | Styled custom file-upload inputs. |
| [MoreToggles.css](https://github.com/JNKKKK/MoreToggles.css) | CSS-only toggle switch collection. |

## Selects, tabs & toggles

| Resource | Why it is useful |
| --- | --- |
| [Select inspiration](https://tympanus.net/Development/SelectInspiration/index7.html) | Custom-styled select dropdowns. |
| [Simple dropdown effects](https://tympanus.net/Development/SimpleDropDownEffects/) | Lightweight dropdown reveal effects. |
| [Tab styles inspiration](https://tympanus.net/Development/TabStylesInspiration/) | Tab UI style gallery. |
| [Tabs (CodePen)](https://codepen.io/havardob/pen/ExVaELV) | Clean tab component to copy. |
| [Tab keyup nav](https://codepen.io/thebabydino/pen/oNKLLbv) | Keyboard-driven tab navigation pattern. |

## Tables

| Resource | Why it is useful |
| --- | --- |
| [Responsive table](https://codepen.io/viki-code/pen/JjxGgmm) | Table that reflows cleanly on mobile. |

## Tooltips & links

| Resource | Why it is useful |
| --- | --- |
| [Tooltip styles inspiration](https://tympanus.net/Development/TooltipStylesInspiration/box.html) | Tooltip style gallery. |
| [Inline anchor styles](https://tympanus.net/Development/InlineAnchorStyles/) | Inline link underline/hover effects. |

## Search UI

| Resource | Why it is useful |
| --- | --- |
| [Morphing search](https://tympanus.net/Development/MorphingSearch/) | Search icon morphs into a full search bar. |
| [Search UI effects](https://tympanus.net/Development/SearchUIEffects/) | Assorted search-input reveal effects. |

## Cards

| Resource | Why it is useful |
| --- | --- |
| [SVG border animation](https://tympanus.net/Tutorials/BorderAnimationSVG/) | Animated card border draw-in. |
| [Caption hover effects](https://tympanus.net/Tutorials/CaptionHoverEffects/) | Hover-reveal captions on cards/images. |
| [Animated grid layout](https://tympanus.net/Development/AnimatedGridLayout/) | Card grid expands into a full page. |
| [3D box-shadow shading](https://tympanus.net/Tutorials/3DShadingWithBoxShadows/) | Fake 3D box rotation with box-shadows. |

## Images, video & galleries

| Resource | Why it is useful |
| --- | --- |
| [Zoomerang](https://github.com/yyx990803/zoomerang) | Zoom into any element (Evan You's lib). |
| [Hover effect ideas](https://tympanus.net/Development/HoverEffectIdeas/) | Image hover-reveal effects. |
| [Item transitions carousel](https://tympanus.net/Development/ItemTransitions/index.html) | Carousel item transition effects. |
| [Stack effects](https://tympanus.net/Development/StackEffects/) | Stacked-card image effects. |
| [Fullscreen video player](https://tympanus.net/Tutorials/AnimatedBorderMenus/index6.html) | Fullscreen video player UI. |
| [Draggable dual-view slideshow](https://tympanus.net/Development/DraggableDualViewSlideshow/) | Drag-to-compare slideshow. |
| [Four boxes layout](https://tympanus.net/Tutorials/FourBoxes/index3.html) | Quad image-box layout effect. |
| [Arrow navigation styles](https://tympanus.net/Development/ArrowNavigationStyles/) | Styled slider/arrow navigation. |
| [uhugrid](https://github.com/cipherlogs/uhugrid) | Masonry-like auto-layout grid. |
| [Author/signature box](https://bestjquery.com/tutorial/email-signature/demo10/) | Author/email signature box layout. |
| [Product feature box](https://bestjquery.com/tutorial/service-box/demo100/) | Product/service feature box layout. |

## Notifications & modals

| Resource | Why it is useful |
| --- | --- |
| [react-hot-toast](https://github.com/timolins/react-hot-toast) | Lightweight React toast notifications. |
| [Notification styles (toast)](https://tympanus.net/Development/NotificationStyles/attached-flip.html) | Attached/flip toast notification styles. |
| [Dialog effects](https://tympanus.net/Development/DialogEffects/) | Modal/dialog entrance effects. |
| [Modal window effects](https://tympanus.net/Development/ModalWindowEffects/) | More modal entrance animations. |

## Product & commerce

| Resource | Why it is useful |
| --- | --- |
| [Pricing tables inspiration](https://tympanus.net/Development/PricingTablesInspiration/) | Pricing-table layout gallery. |
| [Checkout concepts](https://tympanus.net/Development/CheckoutConcepts/) | Cart/checkout UI concepts. |
| [Animated books](https://tympanus.net/Development/AnimatedBooks/) | 3D book cover/product effects. |

## Pagination

| Resource | Why it is useful |
| --- | --- |
| [Grid/list switcher](https://codepen.io/aaroniker/pen/dyoKeMP) | Toggle between grid and list views. |
| [Dot navigation styles](https://tympanus.net/Development/DotNavigationStyles/) | Dot-style pagination. |
| [Vertical navigation indicators](https://tympanus.net/Development/NavigationIndicators/) | Vertical scroll/pagination indicators. |

## Micro-interactions

| Resource | Why it is useful |
| --- | --- |
| [Icon hover effects](https://tympanus.net/Development/IconHoverEffects/#set-6) | Icon hover animations. |
| [Click effects](https://tympanus.net/Development/ClickEffects/) | Click/tap ripple and burst effects. |
| [Animated menu icon](https://tympanus.net/Tutorials/AnimatedMenuIcon/) | Animated hamburger-to-X icon. |
| [Animated SVG icons](https://tympanus.net/Development/AnimatedSVGIcons/) | SVG icons that animate on interaction. |
| [Pull to share](https://tympanus.net/Development/PullToShare/) | Pull-gesture share interaction. |
| [Drag & drop interactions](https://tympanus.net/Development/DragDropInteractions/) | Drag-and-drop UI patterns. |
| [Shazam button effect](https://tympanus.net/Tutorials/ShazamButtonEffect/) | Pulsing audio-listen button effect. |
| [Folder preview ideas](https://tympanus.net/Development/FolderPreviewIdeas/) | File/folder hover-preview effects. |
| [Gooey select](https://tympanus.net/Development/CreativeGooeyEffects/select.html) | Gooey SVG-filter selector effect. |

## Success & celebration

| Resource | Why it is useful |
| --- | --- |
| [Animated mesh lines](https://tympanus.net/Development/AnimatedMeshLines/demo2.html) | Animated success/confirmation lines. |
| [Success checkmark](https://codepen.io/aaroniker/pen/wvBOqgg) | Animated success checkmark. |
| [Animocons](https://tympanus.net/Development/Animocons/) | Animated reaction icons (thumbs up, etc.). |

## Animation libraries

| Resource | Why it is useful |
| --- | --- |
| [auto-animate](https://github.com/formkit/auto-animate) | One-line automatic animations for list/DOM changes. |
| [stateful-animations](https://github.com/molefrog/stateful-animations) | React Motion animation examples. |
| [miniparallax](https://github.com/minimax711/miniparallax) | Tiny parallax-scroll library. |
| [Animated opening type](https://tympanus.net/Tutorials/AnimatedOpeningType/) | 3D translating letter/type animation. |

## Dark mode

| Resource | Why it is useful |
| --- | --- |
| [Preader dark mode preview](https://preader.egoist.sh/) | Reader-mode preview tool with a smooth dark-mode toggle animation. |

## Dev & design tools

| Resource | Why it is useful |
| --- | --- |
| [inspx](https://github.com/raunofreiberg/inspx) | Pixel-perfect spacing inspector overlay for the browser. |
| [guides](https://github.com/daybrush/guides) | Draggable ruler/guideline overlay. |
| [Megatype](http://megatype.studiothick.com/) | Baseline grid / typographic rhythm tool. |
| [CodePen loved pens](https://codepen.io/DavidWells/pens/loved) | My collection of favorited CodePens — running inspiration feed. |

A curated drawer of CSS and UI design tools, grouped by job — color, charts, icons, fonts, animations, and component/interaction inspiration.

CSS & Design Resources


A curated drawer of JavaScript object and JSON utilities, grouped by the job you are trying to do. Most are tiny, focused libraries you can reach for instead of pulling in a kitchen-sink dependency.

## Flatten & unflatten

Convert nested objects to and from `key.xyz.foo` path notation.

| Resource | Why it is useful |
| --- | --- |
| [flattie](https://github.com/lukeed/flattie) | Tiny object flattener to dot-path keys. |
| [flat-object-keys](https://github.com/thenativeweb/flat-object-keys) | Flatten object key paths. |
| [nestie](https://github.com/lukeed/nestie) | Unflatten dot-path keys back into nested objects. |
| [flatten-and-unflatten snippet](https://davidwells.io/snippets/flatten-and-unflatten-javascript-objects-by-path) | My own flatten/unflatten by path snippet. |

## Path get / set

Safely read and write into deep properties by path.

| Resource | Why it is useful |
| --- | --- |
| [dlv](https://github.com/developit/dlv) | Safely read from deep properties in 120 bytes. |
| [tiny-get](https://github.com/NickGard/tiny-get/blob/master/src/index.js) | Minimal deep get implementation. |
| [dset](https://github.com/lukeed/dset) | Safely write into deep properties in 160 bytes. |
| [object-path-immutable](https://github.com/mariocasciaro/object-path-immutable) | Set deep values without mutating the source. |
| [chainset](https://github.com/privatenumber/chainset) | Chainable deep set. |
| [node-jsonpointer](https://github.com/janl/node-jsonpointer) | JSON Pointer get/set. |
| [doc-path](https://github.com/mrodrig/doc-path) | Get/set values including arrays of objects. |
| [deeks](https://github.com/mrodrig/deeks/tree/main) | Get all object + array-of-object key paths. |
| [wild-wild-path](https://github.com/ehmicky/wild-wild-path) | Find/get/set deep values with rich path queries. |
| [path-crawler](https://github.com/WebReflection/path-crawler) | Transform values via object path. |

## Deep clone

| Resource | Why it is useful |
| --- | --- |
| [klona](https://github.com/lukeed/klona) | Fast, tiny deep clone. |
| [fast-copy](https://github.com/planttheidea/fast-copy/) | Fast deep clone with edge-case handling. |
| [deep6](https://github.com/uhop/deep6) | Deep clone/equal/operations toolkit. |
| [utils.js clone](https://github.com/Tinkoff/utils.js/blob/master/src/clone.ts) | Tiny clone from a larger utils set. |

## Deep equality

| Resource | Why it is useful |
| --- | --- |
| [dequal](https://github.com/lukeed/dequal) | Deep equality check in 304–489 bytes. |
| [proxy-compare](https://github.com/dai-shi/proxy-compare) | Compare objects via accessed-property tracking. |

## Merge

| Resource | Why it is useful |
| --- | --- |
| [deepmerge-ts](https://github.com/RebeccaStevens/deepmerge-ts) | Deep merge with type-aware "smartness". |
| [deepmerge](https://github.com/TehShrike/deepmerge) | The classic deep merge. |
| [75lb/deep-merge](https://github.com/75lb/deep-merge) | Alternative deep merge. |
| [deepmerge gist](https://gist.github.com/DavidWells/9da1763f86609ac409c776fafe18f9a6) | My own deep merge gist. |
| [defu](https://github.com/unjs/defu) | Assign default properties recursively, with custom fns. |
| [automerge](https://github.com/automerge/automerge) | CRDT merge of objects across peers. |

## Diff & patch

| Resource | Why it is useful |
| --- | --- |
| [object diff snippet](https://davidwells.io/snippets/get-difference-between-two-objects-javascript) | My own diff-between-two-objects snippet. |
| [microdiff](https://github.com/AsyncBanana/microdiff) | Tiny, fast object diffing. |
| [diff-array-objs](https://github.com/alessioalex/diff-array-objs) | Diff arrays of objects. |
| [flitbit/diff](https://github.com/flitbit/diff) | Deep object diffing. |
| [superdiff](https://github.com/DoneDeal0/superdiff) | Compare objects and arrays, returns granular diffs. |
| [json-difference](https://github.com/lukascivil/json-difference) | Get the difference between two JSON objects. |
| [json-diff-ts](https://github.com/ltwlf/json-diff-ts) | Typed JSON diff with change records. |
| [micropatch](https://github.com/AsyncBanana/micropatch) | Apply patches produced by microdiff. |
| [simple-json-patch](https://github.com/spencermountain/simple-json-patch/) | Minimal JSON Patch implementation. |
| [object-diff-patch](https://github.com/developit/object-diff-patch) | Diff then patch objects. |
| [just-diff](https://github.com/angus-c/just#just-diff) | Dependency-free diff/patch from the just suite. |
| [jsondiffpatch](https://github.com/benjamine/jsondiffpatch) | JSON diff/patch with a visual demo ([demo](http://benjamine.github.io/jsondiffpatch/demo/index.html)). |
| [json-diff](https://github.com/andreyvit/json-diff) | CLI/lib JSON diffing. |

## Query & search

Query objects/JSON with paths, expressions, or fuzzy matching.

| Resource | Why it is useful |
| --- | --- |
| [sift.js](https://github.com/crcn/sift.js) | MongoDB-style query against objects. |
| [mongo-like-filters](https://github.com/tunnckoCore/mongo-like-filters) | Mongo-style filter expressions. |
| [queryl](https://github.com/jviotti/queryl) | Query language for JS objects. |
| [liqe](https://github.com/gajus/liqe) | Lucene-like query for arrays/objects. |
| [mistql](https://github.com/evinism/mistql) | Miniature query language for JSON. |
| [Json-Function](https://github.com/aykutkardas/Json-Function) | Query and transform JSON via functions. |
| [JSONata](https://github.com/jsonata-js/jsonata) | JSON query and transformation language ([ui-core](https://github.com/jsonata-ui/jsonata-ui-core)). |
| [JMESPath](https://jmespath.org/) | JSON query spec ([js impl](https://github.com/jmespath/jmespath.js)). |
| [sputter](https://github.com/suchipi/sputter) | Search an AST object with CSS-like queries. |
| [fuzzy-json-search](https://github.com/apihero-run/fuzzy-json-search) | Fuzzy search over JSON. |
| [fuzzy-search](https://github.com/jakealbaugh/fuzzy-search) | Generic fuzzy search. |
| [fuzzysort](https://github.com/farzher/fuzzysort) | Fast fuzzy sort/search. |
| [simple search gist](https://gist.github.com/DavidWells/9ceeb5eea1af8a16d0f61fb72b705698) | My own simple search snippet. |
| [waldojs](https://github.com/angus-c/waldojs) | Find values deep in an object. |
| [filter-where](https://github.com/75lb/filter-where) | Filter arrays by a where-clause. |
| [grasp](https://github.com/gkz/grasp) | Search JS structurally. |

## Transform & map

Rename keys, reshape, and walk/transform values.

| Resource | Why it is useful |
| --- | --- |
| [shapify](https://github.com/posva/shapify) | Easily transform objects / rename keys. |
| [morphmorph](https://github.com/mfix22/morphmorph) | Map and transform object shapes. |
| [micro-transform](https://github.com/dkzlv/micro-transform) | Tiny object transformer. |
| [bidoof](https://github.com/suchipi/bidoof) | Value matching and transforming tool. |
| [bibarel](https://github.com/suchipi/bibarel) | Walk and transform object values. |
| [packrup](https://github.com/harlan-zw/packrup) | Convert objects/arrays between formats. |
| [normalizr](https://github.com/paularmstrong/normalizr) | Normalize nested objects by schema. |

## Traverse & iterate

| Resource | Why it is useful |
| --- | --- |
| [azu/traverse](https://github.com/azu/traverse) | Recursively traverse objects. |
| [object-scan](https://github.com/blackflux/object-scan) | Scan objects with glob-like key matching. |
| [tree-visit](https://github.com/dabbott/tree-visit) | Generic tree traversal helpers. |
| [for-each-property-deep](https://github.com/DiegoZoracKy/for-each-property-deep) | Callback on each object prop, deeply. |
| [accessor-log-proxy](https://github.com/azu/accessor-log-proxy) | Log property access via proxies. |

## Immutability

| Resource | Why it is useful |
| --- | --- |
| [immutability-helper](https://github.com/kolodny/immutability-helper) | Mutate copies of data without changing the source. |
| [icepick](https://github.com/aearly/icepick) | Treat frozen objects as persistent immutable collections. |
| [freezer](https://github.com/arqex/freezer) | Watch object changes without proxies. |

## Schema, shape & validation

| Resource | Why it is useful |
| --- | --- |
| [has-shape](https://github.com/suchipi/has-shape) | Check whether an object matches a shape. |
| [json-schema-filter](https://github.com/alank64/json-schema-filter) | Filter an object by JSON schema. |
| [shape](https://github.com/multiprocessio/shape) | Infer the shape/schema of an object. |
| [schema-infer](https://github.com/apihero-run/schema-infer) | Infer schema from sample data. |
| [superstruct](https://github.com/ianstormtaylor/superstruct) | Composable runtime validation. |
| [typed](https://github.com/brielov/typed) | Runtime type validation. |
| [@sapphire/type](https://github.com/sapphiredev/type) | Get a precise type string for any value. |

## Misc object utils

| Resource | Why it is useful |
| --- | --- |
| [mitsuketa](https://github.com/AndrewRedican/mitsuketa) | Assorted deep object utilities. |
| [jsonpack](https://github.com/rgcl/jsonpack) | Compress JSON objects. |
| [zipson](https://github.com/jgranstrom/zipson) | Compress JSON with streaming support. |
| [node-signobj](https://github.com/Submersible/node-signobj) | Encrypt/sign an object with a secret. |
| [test-mixer](https://github.com/codsen/codsen/tree/main/packages/test-mixer) | Generate all possible object permutations for testing. |
| [ch-data](https://github.com/Chacaponquin/ch-data) | Generate dummy data based on a schema. |
| [json-stringify-pretty-compact](https://github.com/lydell/json-stringify-pretty-compact/blob/main/index.test.js) | Prettify / format JS objects compactly. |

## JSON toolkits

| Resource | Why it is useful |
| --- | --- |
| [json-joy](https://github.com/streamich/json-joy) | Almost everything JSON in one place. |
| [awesome-json](https://github.com/burningtree/awesome-json) | Curated list of JSON tooling. |
| [json-source-map](https://github.com/epoberezkin/json-source-map) | JSON source maps. |
| [devalue](https://github.com/nuxt-contrib/devalue) | Serialize when `JSON.stringify` can't. |
| [destr](https://github.com/unjs/destr) | Faster, safer JSON parse. |
| [comment-json](https://github.com/kaelzhang/node-comment-json) | Parse and keep comments in JSON. |
| [node-jsonc-parser](https://github.com/microsoft/node-jsonc-parser) | Parse JSON with comments (JSONC). |
| [fast-json-stable-stringify](https://github.com/epoberezkin/fast-json-stable-stringify) | Deterministic, faster stringify. |
| [canonicalize](https://github.com/erdtman/canonicalize) | Canonical (RFC 8785) JSON. |
| [jsonabc](https://github.com/ShivrajRath/jsonabc) | Alpha-sort JSON keys. |
| [flatted](https://github.com/WebReflection/flatted#flatted) | Fast, minimal circular JSON parser. |
| [momoa](https://github.com/humanwhocodes/momoa) | Tokenize JSON into an AST. |
| [ndjson-fe](https://github.com/markwylde/ndjson-fe) | Parse streaming NDJSON. |
| [json-convert gist](https://gist.github.com/DavidWells/b7eab015f92ac8b0185e6bd4e9860043) | My own JSON-to-JS-object snippet. |

## JSON schema

| Resource | Why it is useful |
| --- | --- |
| [json-schema-fns](https://github.com/apihero-run/json-schema-fns) | Programmatically build JSON schema. |
| [generate-schema](https://github.com/nijikokun/generate-schema) | Generate JSON schema from an object. |
| [genson-js](https://github.com/aspecto-io/genson-js/blob/master/src/schema-builder.ts) | Infer JSON schema from samples. |
| [cambria](https://github.com/inkandswitch/cambria) | Evolve a JSON schema definition ([writeup](https://www.inkandswitch.com/cambria.html)). |
| [json-schema-ref-parser](https://github.com/APIDevTools/json-schema-ref-parser) | Resolve nested `$ref`s in JSON schema. |

## JSON serialization & transforms

| Resource | Why it is useful |
| --- | --- |
| [zenjson](https://github.com/etienne-dldc/zenjson) | Serialize special types into JSON-compatible data. |
| [serialize-javascript](https://github.com/yahoo/serialize-javascript) | Serialize JS including regexps, dates, functions. |
| [json-serializer](https://github.com/brillout/json-serializer) | Serialize/deserialize complex values to JSON. |
| [json-logic-js](https://github.com/jwadhams/json-logic-js) | Build rules as JSON and execute them. |

## JSON subset, hash & misc

| Resource | Why it is useful |
| --- | --- |
| [is-subset-of](https://github.com/thenativeweb/is-subset-of) | Verify an array/object is a subset of another. |
| [partof](https://github.com/thenativeweb/partof) | Check structural containment. |
| [comparejs](https://github.com/thenativeweb/comparejs) | Compare values/structures. |
| [deep-hash](https://github.com/thenativeweb/deep-hash) | Deep-hash an object's values. |
| [node-object-hash](https://github.com/SkeLLLa/node-object-hash) | Stable hash of an object. |
| [json-spell-checker](https://github.com/thingweb/thingweb-playground/tree/master/packages/json-spell-checker) | Spell-check JSON keys/values. |

## Array tools

| Resource | Why it is useful |
| --- | --- |
| [set-fns](https://github.com/haydn/set-fns/blob/master/index.ts) | Set operations (union, intersection, etc.). |
| [fast-sort](https://github.com/snovakovic/fast-sort) | Fast, readable array sorting. |
| [immutable-array-prototype](https://github.com/azu/immutable-array-prototype/tree/master/packages) | Immutable versions of array methods. |
| [node-array-diff](https://github.com/kushal-likhi/node-array-diff) | Diff array values. |
| [generate-comparators](https://github.com/BenDMyers/generate-comparators) | Build complex comparators tersely. |
| [sort-by](https://github.com/kvnneff/sort-by) | Sort arrays by one or more keys. |
| [findsuggestions](https://github.com/thenativeweb/findsuggestions) | Suggestions via Levenshtein distance. |
| [bereich](https://github.com/thenativeweb/bereich) | Create ranges of numbers. |
| [js-range](https://github.com/bramus/js-range) | Range/sequence generation. |
| [move-sort](https://github.com/syropian/move-sort) | Move an item to a specific index. |
| [asyncro](https://github.com/developit/asyncro) | Array utilities for async/await. |
| [enforce-unique](https://www.npmjs.com/package/enforce-unique) | Enforce uniqueness of values. |

A curated drawer of small libraries for cloning, diffing, merging, path access, querying, and transforming JavaScript objects and JSON.

JavaScript Object & JSON Tools


A curated drawer of project and monorepo tooling, grouped by job: managing repos, scaffolding new projects, automating scripts, publishing releases, and keeping dependencies sane.

## Monorepo managers

| Resource | Why it is useful |
| --- | --- |
| [awesome-monorepo](https://github.com/korfuri/awesome-monorepo) | Curated list of monorepo tools and resources. |
| [manypkg](https://github.com/Thinkmill/manypkg) | Linter and fixer for monorepo package.json consistency. |
| [syncpack](https://github.com/JamieMason/syncpack) | Keep dependency versions in sync across workspace packages. |

## Task runners

Parallel/cached runners for monorepo scripts.

| Resource | Why it is useful |
| --- | --- |
| [lage](https://github.com/microsoft/lage) | Cached task pipeline runner for JS monorepos. |
| [ultra-runner](https://github.com/folke/ultra-runner) | Fast parallel script runner with build ordering. |
| [wsrun](https://github.com/hfour/wsrun) | Run a command across workspace packages with dependency ordering. |

## Project config & MRM presets

[MRM](https://www.npmjs.com/package/mrm) applies codemod-style tasks to bring a project's config files up to date. Presets and tasks below.

| Resource | Why it is useful |
| --- | --- |
| [presetter](https://github.com/alvis/presetter) | Reusable project config presets. |
| [smarthead/mrm-preset](https://github.com/smarthead/mrm-preset) | MRM preset example. |
| [solid-soda/scripts](https://github.com/solid-soda/scripts) | Shared scripts/config preset. |
| [mrm-preset-michaeldanilov](https://github.com/MichaelDanilov/mrm-preset-michaeldanilov) | MRM preset; includes a yaspeller spell-check task. |
| [koober-sas/project-config](https://gitlab.com/koober-sas/project-config/-/tree/master/packages/mrm-preset) | GitLab-hosted MRM preset ([package.json](https://gitlab.com/koober-sas/project-config/-/blob/master/package.json)). |
| [adonisjs/mrm-preset](https://github.com/adonisjs/mrm-preset) | AdonisJS MRM preset. |
| [tachiba/mrm-tasks](https://github.com/tachiba/mrm-tasks) | Collection of MRM tasks. |
| [moonwalker/mrm-presets](https://github.com/moonwalker/mrm-presets) | MRM presets. |
| [mrm-task-avats](https://github.com/shedali/mrm-task-avats/blob/master/index.js) | MRM task that sets up AVA testing. |
| [mrm-task-git-config-gitlab-deployments](https://github.com/glensc/mrm-task-git-config-gitlab-deployments) | MRM task for GitLab deployment git config. |
| [commitlint-config task](https://github.com/therealklanni/mrm/blob/master/commitlint-config/index.js) | MRM task pattern: clear file, add contents, install. |
| [TayloredTechnology/mrm-preset](https://github.com/TayloredTechnology/mrm-preset/blob/master/docco/index.js) | MRM task using a template directory. |
| [npm/lint setup.js](https://github.com/npm/lint/blob/18aff7b41df87b71643e6b70c084554c8f78af47/lib/setup.js) | Example of setting up npm scripts manually. |
| [kcd-scripts](https://github.com/kentcdodds/kcd-scripts) | Consolidate project scripts into one shared CLI. |
| [Shopify/web-configs](https://github.com/Shopify/web-configs/tree/667d4a26f727fcaff8fe9766a4a1f058ca42877b/packages) | Preset/shared-config examples. |

## MRM task examples

Reference implementations for writing your own MRM tasks.

| Resource | Why it is useful |
| --- | --- |
| [mrm-task-npm-aws](https://github.com/expertly-simple/mrm-task-npm-aws/blob/master/index.js) | AWS deploy scripts task. |
| [mrm-task-webpack](https://github.com/vctr-dev/mrm-task-webpack/blob/75092e4a11cb95e45d6bef63a17b9011506d9fe8/index.js) | Webpack setup task. |
| [mrm-task-typescript-vscode](https://github.com/expertly-simple/mrm-task-typescript-vscode/blob/master/src/index.ts) | TypeScript + VSCode setup task. |
| [mrm-preset-thorough prettier](https://github.com/thorough-dev/mrm-preset-thorough/blob/main/prettier/index.js) | Prettier setup task. |
| [yaspeller task](https://github.com/MichaelDanilov/mrm-preset-michaeldanilov/blob/master/yaspeller/index.js) | Spell-checker setup with yaspeller. |
| [macaw init command](https://github.com/macaw-email/macaw/blob/79b295bfc8398326343184ec1975eb99240a03ab/packages/cli/src/commands/init.js) | Example of creating an email template in an init command. |

## Scripting

Write shell-style scripts in JavaScript.

| Resource | Why it is useful |
| --- | --- |
| [fsxx](https://github.com/antfu/fsxx) | Filesystem-focused scripting helpers. |
| [zx](https://github.com/google/zx) | Google's tool for writing shell scripts in JS. |
| [kit test script](https://github.com/johnlindquist/kit/blob/main/templates/scripts/test.js) | Script Kit template script example. |

## Generators & scaffolding

| Resource | Why it is useful |
| --- | --- |
| [projen](https://github.com/projen/projen) | Define and synthesize project config from code. |
| [Plop](https://plopjs.com/) | Micro-generator framework for consistent files. |
| [gogen](https://github.com/ambar/gogen) | Generator tool. |
| [tabstops](https://github.com/jonschlinkert/tabstops/blob/dc845efbedf3832c5250969b9423d4b1d6ebd026/examples/session.js) | Snippet/tabstop parsing example. |
| [copy-template-dir](https://www.npmjs.com/package/copy-template-dir) | Copy a template directory with variable substitution. |

## Templating & GitHub template download

| Resource | Why it is useful |
| --- | --- |
| [package-sync](https://github.com/spatie/package-sync) | Download/sync GitHub templates into a project. |
| [npm-templates](https://github.com/danielfsousa/npm-templates/blob/b99e4f70062d6d5b0771a5a11dfe6921e2320d73/src/main.js#L16-L26) | Example of downloading templates. |
| [Hygen blog templates](https://github.com/64robots/nuxt-content-blog/blob/master/src/_templates/post/new/prompt.js) | Hygen prompt example for new content. |
| [Cypress hygen scripts](https://github.com/LukasPolak/lukaspolak/blob/e57adf493f12b5fcd249af825fdfcb89151a3c90/package.json#L96-L100) | package.json hygen script example. |
| [hygen-andoshin11-templates](https://github.com/andoshin11/hygen-andoshin11-templates) | Example of running Hygen from home-dir templates. |

Run Hygen from templates shipped inside `node_modules`:

```json
"new:post": "cross-env HYGEN_TMPLS=node_modules/@64robots/nuxt-content-blog/src/_templates hygen post new",
"new:author": "cross-env HYGEN_TMPLS=node_modules/@64robots/nuxt-content-blog/src/_templates hygen author new",
"new:category": "cross-env HYGEN_TMPLS=node_modules/@64robots/nuxt-content-blog/src/_templates hygen category new"
```

Run Hygen from templates in a home directory:

```bash
HYGEN_TMPLS=$HOME/dev/hygen-andoshin11-templates/_templates hygen
```

## Publishing & release

| Resource | Why it is useful |
| --- | --- |
| [release](https://github.com/vercel/release) | Vercel's release notes generator. |
| [auto](https://intuit.github.io/auto/docs/generated/release) | Automated versioning and publishing from PR labels. |
| [np](https://github.com/sindresorhus/np) | Better `npm publish` workflow. |
| [changesets](https://github.com/atlassian/changesets) | Versioning and changelogs for monorepos. |
| [changesets package.json example](https://github.com/talentlessguy/tinyhttp/blob/master/package.json#L40-L43) | Changesets script wiring. |
| [formik release-notes.js](https://github.com/formium/formik/blob/master/scripts/release-notes.js) | Custom release notes script. |

## Dependency tools

| Resource | Why it is useful |
| --- | --- |
| [npm-check](https://github.com/dylang/npm-check) | Interactive check for outdated/unused deps. |
| [npm-check-updates](https://www.npmjs.com/package/npm-check-updates) | Upgrade package.json dependency ranges. |
| [taze](https://github.com/antfu/taze) | Modern dependency updater. |
| [david](https://github.com/alanshaw/david) | Tells you when npm dependencies are out of date. |
| [depcheck](https://github.com/depcheck/depcheck) | Find unused dependencies. |
| [unimported](https://github.com/smeijer/unimported) | Find unused files and dependencies. |
| [dependency-cruiser](https://github.com/sverweij/dependency-cruiser) | Validate and draw a map of dependencies. |
| [sharec](https://sharec.js.org/) | Install/share config across projects ([example](https://github.com/postcss/postcss-sharec-config)). |
| [yalc](https://github.com/wclr/yalc) | Local package publishing for testing. |
| [types-sync](https://github.com/maddhruv/types-sync) | Sync `@types/*` definitions to installed deps. |
| [install-pkg](https://github.com/antfu/install-pkg) | Programmatically install a package. |
| [ci (install-pkg fast)](https://github.com/privatenumber/ci) | Fast clean dependency install in CI. |
| [check-engines](https://github.com/kruppel/check-engines) | Verify installed versions match `engines`. |
| [npkill](https://github.com/voidcosmos/npkill) | Find and remove old `node_modules` directories. |
| [nls](https://github.com/amio/nls) | List scripts and why deps are installed. |
| [cost-of-modules](https://github.com/siddharthkp/cost-of-modules) | Check the size of dependencies in use. |
| [madge](https://github.com/pahen/madge) | Draw a module dependency graph. |
| [Lerna](https://lerna.js.org/) | Monorepo dependency and publish management. |
| [patch-package](https://github.com/ds300/patch-package) | Persist fixes to dependencies via patches. |

## CI helpers

| Resource | Why it is useful |
| --- | --- |
| [npm org-wide workflow](https://github.com/npm/.github/blob/master/.github/workflows/issue.yml) | Example org-wide GitHub Actions workflow. |

## Codemods

| Resource | Why it is useful |
| --- | --- |
| [shepherd](https://github.com/NerdWalletOSS/shepherd) | Run codemods across many repos at once. |

## Changelog & markdown

| Resource | Why it is useful |
| --- | --- |
| [cclog-parser](https://github.com/jserme/cclog-parser) | Changelog parser. |
| [collect-changelog](https://github.com/azu/monorepo-utils/tree/master/packages/%40monorepo-utils/collect-changelog) | Collect changelog changes across a monorepo. |

## Linting & secrets

| Resource | Why it is useful |
| --- | --- |
| [secretlint](https://github.com/secretlint/secretlint) | Lint for committed secrets; pair with a pre-commit hook. |

## Git helpers

| Resource | Why it is useful |
| --- | --- |
| [gittar](https://github.com/lukeed/gittar) | Download and extract git repos. |
| [git-account](https://github.com/uetchy/git-account/) | Switch between GitHub accounts. |
| [Git-User-Switch](https://github.com/geongeorge/Git-User-Switch) | GUI to switch git users. |

## Multi-repo & GitHub admin

| Resource | Why it is useful |
| --- | --- |
| [korefile](https://github.com/azu/korefile) | GitHub filesystem for multi-repo updates ([funding.yml updater](https://github.com/azu/github-funding-yml-updater), [asocial-bookmark](https://github.com/azu/asocial-bookmark)). |
| [delete-github-branches](https://github.com/azu/delete-github-branches) | Bulk-delete branches. |
| [github-label-setup](https://github.com/azu/github-label-setup) | Set up standard GitHub labels. |
| [security-alert](https://github.com/azu/security-alert) | GitHub security alert CLI. |
| [gitexporter](https://github.com/open-condo-software/gitexporter) | Export private subdirectories to public repos. |

A curated drawer of monorepo, scaffolding, release, and dependency tooling grouped by job.

Monorepo & Project Tooling


A curated drawer of CLI and terminal building blocks for Node, grouped by the job they do.

## CLI frameworks

Turn functions or arg schemas into full command-line apps.

| Resource | Why it is useful |
| --- | --- |
| [clii](https://github.com/sigoden/clii) | Write functions, add JSDoc, and clii turns them into a CLI automatically. |
| [cliss](https://github.com/DiegoZoracKy/cliss) + [magicli](https://github.com/DiegoZoracKy/magicli) | Turn a plain function into a CLI. |
| [cleffa](https://github.com/suchipi/cleffa) | Simple CLI file runner: `cleffa ./file`. |
| [cmd-ts](https://github.com/Schniz/cmd-ts) | Type-driven argument parser for TypeScript CLIs. |
| [cac](https://github.com/cacjs/cac) | Small library for building command-line apps. |
| [cleye](https://github.com/privatenumber/cleye) | Typed CLI argument parser. |

## Prompts & interactivity

| Resource | Why it is useful |
| --- | --- |
| [@clack/prompts](https://github.com/natemoo-re/clack/tree/main/packages/prompts#readme) | Polished, interactive prompt components. |
| [omelette](https://github.com/f/omelette) | Shell autocomplete for your CLI. |
| [clui](https://github.com/replit/clui) ([demo](https://replit.com/@clui/demo)) | Interactive command autocomplete UI. |
| [qnm fuzzy-search](https://github.com/ranyitz/qnm/tree/master/src/fuzzy-search) | Fuzzy search implementation worth borrowing. |

## Spinners & task output

| Resource | Why it is useful |
| --- | --- |
| [tasuku](https://github.com/privatenumber/tasuku) | Beautiful task output, ora-like. |
| [mico-spinner](https://github.com/enemycnt/mico-spinner) | Tiny spinner alternative to ora. |
| [@topcli/spinner](https://github.com/TopCli/Spinner) | Multiple concurrent spinners. |
| [listr](https://github.com/SamVerschueren/listr) | Run tasks in a list with status output. |
| [tasktree](https://github.com/keindev/tasktree) | Taskr-style nested task logs. |
| [progress.js](https://github.com/NathanPB/progress.js) | Loading / progress display. |

## Logging & console output

| Resource | Why it is useful |
| --- | --- |
| [consola](https://github.com/unjs/consola) | Nice, configurable console output. |
| [log-update](https://github.com/sindresorhus/log-update) | Update log output in place. |
| [updatable-log](https://github.com/noahsug/updatable-log) | Updatable and clearable logging. |
| [cli-truncate](https://github.com/sindresorhus/cli-truncate) | Truncate strings to terminal width. |
| [logger](https://github.com/lvkdotsh/logger) | Customizable logging. |
| [pretty-print-error](https://github.com/suchipi/pretty-print-error) | Format errors as nice colored strings. |
| [miette](https://github.com/gabrielcsapo/miette) | Rust-miette-style underlined diagnostic output. |

## Colors & text styling

| Resource | Why it is useful |
| --- | --- |
| [gradient-string](https://github.com/bokub/gradient-string) | Pretty gradient text. |
| [concolor](https://github.com/metarhia/concolor) | Console colors via template-tag variable names. |
| [figlet.js](https://github.com/patorjk/figlet.js) | Large ASCII-art text banners. |
| [sisteransi](https://github.com/terkelg/sisteransi) | Low-level ANSI escape-code helpers. |
| [isansi](https://github.com/thenativeweb/isansi) | Verify whether output contains ANSI color. |

## Layout & TUI

| Resource | Why it is useful |
| --- | --- |
| [react-blessed](https://github.com/Yomguithereal/react-blessed) / [neo-blessed](https://github.com/embarklabs/neo-blessed) | React renderer for blessed terminal UIs. |
| [table-layout](https://github.com/75lb/table-layout) | Render tabular terminal layouts. |
| [columnify](https://github.com/timoxley/columnify) | Format data into aligned columns. |
| [ink-table](https://github.com/maticzav/ink-table) | Table component for Ink-based CLIs. |
| [terminal-img](https://github.com/thenativeweb/terminal-img) | Draw images directly in the terminal. |

## Links & opening things

| Resource | Why it is useful |
| --- | --- |
| [terminal-link](https://github.com/sindresorhus/terminal-link) | Create clickable hyperlinks in the terminal. |
| [launch-editor](https://github.com/yyx990803/launch-editor) | Open files in the user's editor. |
| [node-copy-paste](https://github.com/xavi-/node-copy-paste) | Read and write the system clipboard. |

## Environment & ports

| Resource | Why it is useful |
| --- | --- |
| [std-env](https://github.com/unjs/std-env/blob/main/src/index.ts) | Detect runtime environment (CI, platform, etc.). |
| [get-port-please](https://github.com/unjs/get-port-please) | Find an available port. |
| [port-scanner](https://github.com/pesarism/port-scanner) | Scan ports. |

## Process lifecycle & recording

| Resource | Why it is useful |
| --- | --- |
| [graceful-goodbye](https://github.com/mafintosh/graceful-goodbye) / [when-exit](https://github.com/fabiospampinato/when-exit) | Run cleanup handlers on graceful exit. |
| [user-startup](https://github.com/typicode/user-startup) | Auto-start commands on login, cross-platform. |
| [svg-term-cli](https://github.com/marionebl/svg-term-cli) | Record terminal output to SVG. |

## Testing

| Resource | Why it is useful |
| --- | --- |
| [cli-testing-library](https://github.com/crutchcorn/cli-testing-library) | Test CLI apps with a Testing-Library-style API. |

Curated Node libraries for building CLIs - prompts, spinners, logging, TUI layouts, and arg parsing.

CLI & Terminal Tooling


A curated drawer of AWS reference implementations and patterns I keep coming back to, grouped by service.

## ACM (Certificates)

DNS-validated certificate automation via CloudFormation custom resources.

| Resource | Why it is useful |
| --- | --- |
| [dflook/cloudformation-dns-certificate](https://github.com/dflook/cloudformation-dns-certificate/blob/main/cloudformation.yaml#L7) | Custom resource that creates and DNS-validates ACM certs in CloudFormation. |
| [Cross-account DNS management on AWS](https://xebia.com/blog/cross-account-dns-management-on-aws/) | Patterns for validating certs when DNS lives in another account. |
| [ACM certificate automation](https://hands-on.cloud/cloudformation-acm-certificate-automation/) | Walkthrough of automating ACM cert issuance with CloudFormation. |
| [martijnvandongen/blog-managing-cross-account-dns](https://github.com/martijnvandongen/blog-managing-cross-account-dns-with-route-53-lambda-and-cloudformation/tree/master) | Cross-account DNS via Route 53, Lambda, and CloudFormation. |

## API Gateway

Service integrations that skip Lambda entirely.

| Resource | Why it is useful |
| --- | --- |
| [rbulmer55/Apigw-to-s3](https://github.com/rbulmer55/Apigw-to-s3/blob/main/lib/serverless-api-s3-direct-stack.ts) | Direct S3 PUT from API Gateway, no Lambda. |
| [serverless-apigateway-service-proxy](https://github.com/serverless-operations/serverless-apigateway-service-proxy) | Plugin for direct service integrations (S3, SQS, SNS, DynamoDB, Kinesis). |
| [DynamoDB mapping templates (VTL guide)](https://arpadt.com/articles/ddb-mapping-templates) | Practical VTL mapping template reference for direct integrations. |

## Lambda

| Resource | Why it is useful |
| --- | --- |
| [Remotion Lambda price estimate](https://github.com/remotion-dev/remotion/blob/b6be888c04638f9ebd18fece98c99a5f65c36283/packages/lambda/src/api/estimate-price.ts#L33) | Real-world code for computing Lambda execution pricing. |

## Auth / Cognito

| Resource | Why it is useful |
| --- | --- |
| [avp-petstore-sample](https://github.com/aws-samples/avp-petstore-sample/blob/main/amplify/backend/function/petstoresample78b39c63/src/index.js) | Amazon Verified Permissions enforced inside a Lambda function. |
| [AVP walkthrough video](https://www.youtube.com/watch?v=D8IQJaCIuwg) | Companion video for the Verified Permissions sample. |
| [minio-js signing](https://github.com/minio/minio-js/blob/d08e54a391adb8fe6630c8cfde66621d6f37b777/src/signing.ts#L24) | Presigned SigV4 request signing implementation. |
| [serverless-chat-with-iam (Cognito proxy)](https://github.com/0libre/serverless-chat-with-iam/blob/1a9ce53da9f72984e63647a7e59d7ceb97d49e44/serverless.yaml#L31-L222) | Direct Cognito proxy via API Gateway, no Lambda. |

## WebSockets

| Resource | Why it is useful |
| --- | --- |
| [serverless-chat-with-iam (connect route)](https://github.com/0libre/serverless-chat-with-iam/blob/1a9ce53da9f72984e63647a7e59d7ceb97d49e44/serverless.yaml#L235-L340) | Direct API Gateway-to-DynamoDB connect route for WebSockets. |
| [serverless-chat-with-iam (token signing)](https://github.com/0libre/serverless-chat-with-iam/blob/1a9ce53da9f72984e63647a7e59d7ceb97d49e44/frontend/src/App.js#L211-L227) | Signing a WebSocket connection with a token on the client. |
| [Authorize WebSocket with SigV4 (article)](https://loginov-rocks.medium.com/authorize-access-to-websocket-api-gateway-with-aws-signature-v4-f7e6b0e39f0a) | Signing WebSocket connections via Lambda with SigV4. |
| [WebSocket-API-Gateway-IAM-Signer](https://github.com/loginov-rocks/WebSocket-API-Gateway-IAM-Signer) | Companion code for the SigV4 WebSocket signer. |
| [WebSocket-API-Gateway-Cognito-Authorizer](https://github.com/loginov-rocks/WebSocket-API-Gateway-Cognito-Authorizer) | WebSocket API Gateway authorized with Cognito. |
| [AWS IoT Core for realtime (article)](https://oliverdunk.com/2022/06/04/aws-iot-core) | Using IoT Core as a realtime/pub-sub transport. |
| [ask-around-me realtime backend](https://github.com/aws-samples/ask-around-me/blob/master/backend/realtime.yaml#L76-L87) | IoT realtime backend CloudFormation example. |
| [hearts-app (wscat connect)](https://github.com/hockeybuggy/hearts-app/blob/main/package.json) | Example of connecting to a WebSocket endpoint with `wscat`. |

## S3

| Resource | Why it is useful |
| --- | --- |
| [s3-dropzone](https://github.com/pindlebot/s3-dropzone/tree/master) | Dropzone-style upload UI backed by S3. |
| [serverless-magic-links-poc](https://github.com/leanmotherfuckers/serverless-magic-links-poc/blob/7b1e72c7d7668998eca9a633b22fa11c992a767d/serverless.yml#L138-L163) | API Gateway proxy to S3 for serving static content. |
| [rbulmer55/Apigw-to-s3](https://github.com/rbulmer55/Apigw-to-s3/blob/main/lib/serverless-api-s3-direct-stack.ts) | Put content directly into S3 via API Gateway. |

## DynamoDB

| Resource | Why it is useful |
| --- | --- |
| [dynamodb-stream-elasticsearch](https://github.com/matrus2/dynamodb-stream-elasticsearch) | Stream DynamoDB changes into Elasticsearch. |
| [API Gateway to DynamoDB mapping (article)](https://medium.com/@khaibq/deploy-aws-api-gateway-to-read-and-update-dynamodb-without-lambda-132e6114981c) | Read/update DynamoDB directly from API Gateway, no Lambda. |
| [ddb-locking-read](https://github.com/rogerchi/ddb-locking-read/blob/main/index.ts) | Optimistic locking reads for DynamoDB. |
| [Practical DynamoDB locking reads (article)](https://dev.to/aws-builders/practical-dynamodb-locking-reads-4o4i) | Companion writeup on DynamoDB locking patterns. |

## Elasticsearch / OpenSearch

Indexing DynamoDB streams into a search cluster.

| Resource | Why it is useful |
| --- | --- |
| [dynamodb-stream-elasticsearch](https://github.com/matrus2/dynamodb-stream-elasticsearch) | DynamoDB stream to Elasticsearch indexer. |
| [fhir-works-on-aws ddbToEs](https://github.com/aws-solutions/fhir-works-on-aws/tree/315d94793d4d0369b192d5da9e520222dffb373c/fwoa-core/persistence-ddb/src/ddbToEs) | Production DDB-to-ES stream pipeline. |
| [Centralized logging OpenSearch with Cognito](https://github.com/danushkaf/aws_elasticsearch_centralized_logging_with_rollover/blob/master/es-secured.yaml) | OpenSearch secured with Cognito, plus index rollover. |

## IoT

| Resource | Why it is useful |
| --- | --- |
| [aws-presign](https://www.npmjs.com/package/aws-presign?activeTab=code) | Generate a presigned WebSocket URL for IoT. |
| [tqhoughton/chat-app-serverless](https://github.com/tqhoughton/chat-app-serverless) | Serverless chat app backend example. |
| [DavidWells/chat-app-vuejs](https://github.com/DavidWells/chat-app-vuejs/tree/master) | Vue.js frontend for the chat app example. |

## CloudFormation

| Resource | Why it is useful |
| --- | --- |
| [Advanced CloudFormation hacks](https://garbe.io/blog/2017/07/17/cloudformation-hacks/) | Grab bag of advanced CloudFormation techniques. |

### Conditional `DependsOn` via `WaitConditionHandle`

A pattern for conditionally depending on a resource (here, only create a Route 53 hosted zone if no `hostedZoneId` is supplied) using a `WaitCondition` switched by `Fn::If`. Bundles a DNS-validated ACM cert custom resource.

```yaml
service: ga-proxy

plugins:
  - serverless-pseudo-parameters
  - serverless-manifest-plugin

custom:
  # default stage 'prod'
  stage: ${opt:stage, 'prod'}
  # default region 'us-west-1'
  region: ${opt:region, 'us-west-1'}
  # Primary host domain
  baseDomain: example.com
  domainsByStage:
    prod:    api.${self:custom.baseDomain}
    staging: api-staging.${self:custom.baseDomain}
    dev:     api-dev.${self:custom.baseDomain}
  # Resolved domain settings
  apiDomain: ${self:custom.domainsByStage.${self:custom.stage}}
  # Base mapping. domain.com/${apiBasePath}/
  apiBasePath: 'mypath'
  # Resolved full service url
  apiServiceUrl: 'https://${self:custom.apiDomain}/${self:custom.apiBasePath}'
  # Route53 hosted zone (leave empty to have the stack create one)
  hostedZoneId: ''

provider:
  name: aws
  stage: ${self:custom.stage}
  region: ${self:custom.region}
  runtime: nodejs12.x
  httpApi:
    cors: true

functions:
  proxy:
    handler: handler.proxy
    events:
      - httpApi:
          method: GET
          path: /r/collect
      - httpApi:
          method: GET
          path: /collect

resources:
  Conditions:
    ## Create HostedZone if hostedZoneId empty
    CreateZone: { "Fn::Equals" : ["${self:custom.hostedZoneId, ''}", ""] }
  Resources:
    ## Hack for conditional depends clause
    WaitOnHostedZone:
      Condition: CreateZone
      DependsOn: HostedZone
      Type: "AWS::CloudFormation::WaitConditionHandle"
    EmptyWait:
      Type: "AWS::CloudFormation::WaitConditionHandle"
    CustomWaitCondition:
      Type: "AWS::CloudFormation::WaitCondition"
      Properties:
        Handle: { "Fn::If": [CreateZone, { Ref: WaitOnHostedZone }, { Ref: EmptyWait }] }
        Timeout: "1"
        Count: 0
    HostedZone:
      Type: 'AWS::Route53::HostedZone'
      Condition: CreateZone
      Properties:
        HostedZoneConfig:
          Comment: 'Hosted zone for ${self:custom.baseDomain}'
        Name: '${self:custom.baseDomain}'
    Domain:
      Type: 'AWS::ApiGatewayV2::DomainName'
      DependsOn:
        - SSLCertificate
      Properties:
        DomainName: ${self:custom.apiDomain}
        DomainNameConfigurations:
          - EndpointType: REGIONAL
            CertificateArn: { Ref: SSLCertificate }
    ApiMapping:
      Type: 'AWS::ApiGatewayV2::ApiMapping'
      DependsOn:
        - HttpApi
        - HttpApiStage
        - Domain
      Properties:
        DomainName: ${self:custom.apiDomain}
        ApiId: { Ref: HttpApi }
        ApiMappingKey: ${self:custom.apiBasePath}
        Stage: { Ref: HttpApiStage }
    DnsRecord:
      Type: AWS::Route53::RecordSetGroup
      Properties:
        HostedZoneName: '${self:custom.baseDomain}.'
        RecordSets:
          - Name: ${self:custom.apiDomain}
            Type: A
            AliasTarget:
              HostedZoneId: { Fn::GetAtt: [ Domain, RegionalHostedZoneId ] }
              DNSName: { Fn::GetAtt: [ Domain, RegionalDomainName ] }
    SSLCertificate:
      Type: 'Custom::DNSCertificate'
      DependsOn:
        - CustomWaitCondition
        - CustomAcmCertificateLambdaExecutionRole
        - CustomAcmCertificateLambda
      Properties:
        DomainName: '${self:custom.baseDomain}'
        SubjectAlternativeNames:
          - '*.${self:custom.baseDomain}'
        ValidationMethod: DNS
        Region: ${self:custom.region}
        DomainValidationOptions:
          - DomainName: '${self:custom.baseDomain}'
            HostedZoneId: '${self:custom.hostedZoneId}'
        ServiceToken: { Fn::GetAtt: [ CustomAcmCertificateLambda, Arn ] }
    CustomAcmCertificateLambdaExecutionRole:
      Type: 'AWS::IAM::Role'
      Properties:
        AssumeRolePolicyDocument:
          Statement:
            - Action:
                - sts:AssumeRole
              Effect: Allow
              Principal:
                Service: lambda.amazonaws.com
          Version: '2012-10-17'
        ManagedPolicyArns:
          - arn:aws:iam::aws:policy/service-role/AWSLambdaBasicExecutionRole
          - arn:aws:iam::aws:policy/service-role/AWSLambdaRole
        Policies:
          - PolicyDocument:
              Statement:
                - Action:
                    - acm:AddTagsToCertificate
                    - acm:DeleteCertificate
                    - acm:DescribeCertificate
                    - acm:RemoveTagsFromCertificate
                  Effect: Allow
                  Resource:
                    - 'arn:aws:acm:*:${AWS::AccountId}:certificate/*'
                - Action:
                    - acm:RequestCertificate
                    - acm:ListTagsForCertificate
                    - acm:ListCertificates
                  Effect: Allow
                  Resource:
                    - '*'
                - Action:
                    - route53:ChangeResourceRecordSets
                  Effect: Allow
                  Resource:
                    - arn:aws:route53:::hostedzone/*
              Version: '2012-10-17'
            PolicyName: 'CustomAcmCertificateLambdaExecutionPolicy-${self:service}'
    CustomAcmCertificateLambda:
      Type: 'AWS::Lambda::Function'
      Metadata:
        Source: https://github.com/dflook/cloudformation-dns-certificate
        Version: 1.7.2
      Properties:
        Description: Cloudformation custom resource for DNS validated certificates
        Handler: index.handler
        Role: { Fn::GetAtt: [ CustomAcmCertificateLambdaExecutionRole, Arn ] }
        Runtime: python3.6
        Timeout: 900
        Code:
          # Inlined handler source omitted; see github.com/dflook/cloudformation-dns-certificate
          ZipFile: "..."
  Outputs:
    DomainName:
      Description: API Gateway custom domain
      Value: { Ref: Domain }
    ServiceUrl:
      Description: Custom API Gateway service URL
      Value: ${self:custom.apiServiceUrl}
    DomainMapping:
      Description: Apigateway mapping
      Value: { Ref: ApiMapping }
    CertificateArn:
      Description: ARN of custom domain cert
      Value: { Ref: SSLCertificate }
```

A curated drawer of AWS reference implementations and patterns, grouped by service.

AWS Patterns & Examples

Conditional `DependsOn` via `WaitConditionHandle`


A curated drawer of React hook libraries and utilities, grouped by what they do. Companion to the React Resources page.

## Hook collections

Large grab-bag libraries covering most common needs.

| Resource | Why it is useful |
| --- | --- |
| [react-use](https://github.com/streamich/react-use) | Big, well-maintained collection of essential hooks. |
| [ahooks (alibaba/hooks)](https://github.com/alibaba/hooks) | Comprehensive, production-tested hook library from Alibaba. |
| [rooks](https://github.com/imbhargav5/rooks) | Standalone, tree-shakeable collection of hooks. |
| [react-essential-tools](https://github.com/devianllert/react-essential-tools) | Hooks plus components for everyday needs. |
| [react-haiku](https://github.com/DavidHDev/react-haiku) | Tiny utility hook collection. |
| [Mantine hooks](https://mantine.dev/hooks/getting-started/) | Standalone hooks package from the Mantine ecosystem. |

## State

| Resource | Why it is useful |
| --- | --- |
| [use-optional-state](https://github.com/amannn/react-hooks/tree/main/packages/use-optional-state) | Build components that work both controlled and uncontrolled. |
| [react-powerplug](https://github.com/renatorib/react-powerplug) | Renderless components / HOCs for sharing stateful logic. |
| [use-query-state](https://github.com/Kikobeats/use-query-state) | Sync state with the URL query string. |
| [react-lifecycle-hooks](https://github.com/BetterTyped/react-lifecycle-hooks) | Class-style lifecycle hooks for function components. |

## HTTP / data fetching

| Resource | Why it is useful |
| --- | --- |
| [use-http](https://github.com/ava/use-http) | Hook for making HTTP requests with caching and SSR support. |

## Storage

| Resource | Why it is useful |
| --- | --- |
| [react-storage-hooks](https://github.com/soyguijarro/react-storage-hooks) | Hooks for localStorage and sessionStorage. |

## Media queries / responsive

| Resource | Why it is useful |
| --- | --- |
| [react-responsive](https://github.com/yocontra/react-responsive) | Media query hook and component for responsive UIs. |
| [react-sizes](https://github.com/renatorib/react-sizes#guide) | HOC for tracking and reacting to window size. |
| [Building a custom React media query hook](https://dev.to/netlify/building-a-custom-react-media-query-hook-for-more-responsive-apps-31fk) | Walkthrough of rolling your own `useMedia` hook. |

A minimal `useMedia` implementation:

```js
function useMedia(query) {
  const [matches, setMatches] = useState(window.matchMedia(query).matches)

  useEffect(() => {
    const media = window.matchMedia(query)
    if (media.matches !== matches) {
      setMatches(media.matches)
    }
    const listener = () => {
      setMatches(media.matches)
    }
    media.addEventListener(listener)
    return () => media.removeEventListener(listener)
  }, [matches, query])

  return matches
}

// Example usage:
function SomeComponent() {
  let isWide = useMedia('(min-width: 800px)')
  return (<div>The window is {isWide ? 'wide' : 'not wide'}</div>)
}
```

## Forms / validation

| Resource | Why it is useful |
| --- | --- |
| [validator.js](https://github.com/jaywcjlove/validator.js) | Lightweight form validation. |

## Lists / selection

| Resource | Why it is useful |
| --- | --- |
| [use-item-list](https://github.com/souporserious/use-item-list) | Hook for building accessible select/list widgets. |

## Virtualization

| Resource | Why it is useful |
| --- | --- |
| [react-cool-virtual](https://github.com/wellyshen/react-cool-virtual) | Virtualize long lists and grids for performance. |

## Utilities

| Resource | Why it is useful |
| --- | --- |
| [use-sidecar](https://github.com/theKashey/use-sidecar) | Code-split side effects to shrink bundle size. |
| [copy-as-markdown](https://github.com/cpojer/copy-as-markdown) | Copy rendered content as markdown. |

A curated drawer of React hook libraries and utilities, grouped by what they do.

React Hooks


A curated drawer of DAG/graph algorithm libraries and the flow/diagram UI components I reach for when building node-graph editors and dependency visualizations.

## Graph algorithms & DAG libraries

Building, sequencing, and analyzing directed acyclic graphs.

| Resource | Why it is useful |
| --- | --- |
| [task-graph-runner](https://github.com/jamiebuilds/task-graph-runner) | Run async tasks ordered by a dependency graph. |
| [graph-sequencer](https://github.com/jamiebuilds/graph-sequencer) | Topologically sequence graph items into parallel-safe groups. |
| [toposort](https://github.com/marcelklehr/toposort) | Minimal topological sort of a directed graph. |
| [madge](https://github.com/pahen/madge) | Generate dependency graphs and find circular deps in JS/TS. |
| [jsona-openapi-deref deref logic](https://github.com/sigoden/openapi/blob/main/packages/jsona-openapi-deref/src/index.ts#L117-L158) | Reference impl for detecting circular references during deref. |
| [dag-map](https://github.com/krisselden/dag-map) | Map-like structure that maintains DAG ordering. |
| [graphology](https://github.com/graphology/graphology) | Robust graph data structure + algorithm ecosystem. |
| [serverless/compose ComponentsService](https://github.com/serverless/compose/blob/main/src/ComponentsService.js) | Real-world DAG used to order serverless component deploys. |

## Dependency-graph extractors

Tools that derive a graph from existing source code.

| Resource | Why it is useful |
| --- | --- |
| [express-router-dependency-graph](https://github.com/azu/express-router-dependency-graph/blob/main/src/index.ts) | Build a graph of Express routes from source. |
| [workspace-dependency-graph](https://github.com/remorses/workspace-dependency-graph) | Graph dependencies across a monorepo workspace. |

## Flow & diagram UI components

Interactive node-graph editors for building diagrams in the browser.

| Resource | Why it is useful |
| --- | --- |
| [react-diagrams](https://github.com/projectstorm/react-diagrams) | Flexible diagramming engine; see [drag-and-drop demo](https://projectstorm.cloud/react-diagrams/?path=/story/advanced-usage--drag-and-drop). |
| [React Flow edge examples](https://reactflow.dev/examples/edges/) | Edge styling/behavior examples for the React Flow library. |
| [rete](https://github.com/retejs/rete) | Visual programming / node-editor framework; see [basic example](https://rete.js.org/#/examples/basic). |
| [butterfly](https://github.com/alibaba/butterfly) | Alibaba node-graph diagramming library. |
| [react-visual-modeling](https://github.com/aliyun/react-visual-modeling) | React visual modeling components built on butterfly. |
| [react-monitor-dag canvas](https://github.com/aliyun/react-monitor-dag/blob/27719924fc4a78d3a3e7adc749ae72b366c445ee/src/canvas/canvas.js) | DAG monitor canvas reference implementation. |
| [flowy](https://github.com/alyssaxuu/flowy) | Lightweight library for building flowchart UIs. |
| [pipeline-editor-s5](https://github.com/sea-kg/pipeline-editor-s5) | Pipeline/flow editor component. |

## Visualization libraries & demos

Rendering graphs, trees, and infra diagrams.

| Resource | Why it is useful |
| --- | --- |
| [rediagram](https://github.com/kamiazya/rediagram) | Compose infrastructure diagrams with React. |
| [react-topology](https://github.com/yldio/react-topology) | Topology/graph viz for React; see [demo](https://react-topology.netlify.app/). |
| [vis-tree demo](https://vis-tree-demo.netlify.app/) | Tree visualization demo. |
| [react-d3-bubblechart](https://cmichel.io/projects/react-d3-bubblechart/) | D3 bubble chart in React. |

## Reference

| Resource | Why it is useful |
| --- | --- |
| [text-to-diagram](https://xosh.org/text-to-diagram/) | Survey/comparison of many text-to-diagram tools. |

Curated libraries for DAG/graph algorithms and flow-diagram UIs.

DAG & Flow Visualization Tools


A curated drawer of JavaScript string and text-processing utilities, grouped by the job they do.

## Fuzzy matching & similarity

| Resource | Why it is useful |
| --- | --- |
| [fuzzyset.js](https://github.com/Glench/fuzzyset.js) | Fuzzy match typos against a known set of strings. |
| [string-similarity-js](https://github.com/stephenjjbrown/string-similarity-js) | Dice-coefficient similarity score between two strings. |
| [string-similarity](https://github.com/aceakash/string-similarity) | Compare similarity and find best matches in a list. |

## Search & match

| Resource | Why it is useful |
| --- | --- |
| [nlp-pattern-match](https://github.com/azu/nlp-pattern-match) | Pattern-based find and replace over natural language. |
| [sql-string-search](https://github.com/azu/sql-string-search) | Search for SQL-like queries in code via AST. |
| [js-search](https://github.com/bvaughn/js-search) | Client-side full-text search over a collection of objects. |

## Search & replace

| Resource | Why it is useful |
| --- | --- |
| [easy-replace](https://github.com/codsen/codsen/tree/main/packages/easy-replace) | Replace strings without writing regexes. |
| [string-apostrophes](https://codsen.com/os/string-apostrophes) | HTML-entities-aware tool to typographically correct apostrophes and single/double quotes. |

## Diffing

| Resource | Why it is useful |
| --- | --- |
| [striff](https://github.com/alexmacarthur/striff) | Very simple string diffing. |

## Casing

| Resource | Why it is useful |
| --- | --- |
| [case-anything](https://github.com/mesqueeb/case-anything) | Convert between camelCase, kebab-case, snake_case, and more. |

## Formatting & wrapping

| Resource | Why it is useful |
| --- | --- |
| [wordwrapjs](https://github.com/75lb/wordwrapjs) | Word-wrap text to a given width. |
| [splitTitle](https://github.com/artalar/splitTitle) | Split titles into balanced lines for nicer wrapping. |
| [commafy-anything](https://github.com/mesqueeb/commafy-anything) | Add thousands separators to any number string. |
| [node-ts-dedent](https://github.com/tamino-martinius/node-ts-dedent) | Strip leading indentation from template literals. |
| [common-tags](https://github.com/zspecza/common-tags) | Many template tags for formatting interpolated strings. |

## Unicode & emoji

| Resource | Why it is useful |
| --- | --- |
| [unistring](https://github.com/hotoo/unistring) | Unicode-aware emoji and text utilities. |
| [emoji-regex](https://github.com/mathiasbynens/emoji-regex) | Regex that matches all emoji as defined by Unicode. |

## Validation

| Resource | Why it is useful |
| --- | --- |
| [allowed-characters](https://github.com/markwylde/allowed-characters) | Check if a string only contains an allowed character set. |

## Hashing

| Resource | Why it is useful |
| --- | --- |
| [djb2a](https://github.com/sindresorhus/djb2a) | Fast non-cryptographic hash function. |

## Splitting

A small escape-aware split helper that ignores separators prefixed with `\\` (used by get/set/has utilities):

```js
/**
 * Splits a string with the given separator, unless the separator
 * is escaped with `\\`. Used by the get, set, has, and hasOwn utils.
 * @param {String} str The string to split.
 * @param {String} sep Separator, `.` by default.
 * @return {Array}
 */
const split = exports.split = (str, sep = '.') => {
  let segs = str.split(sep)
  for (let i = 0; i < segs.length; i++) {
    while (segs[i] && segs[i].slice(-1) === '\\') {
      segs[i] = segs[i].slice(0, -1) + sep + segs.splice(i + 1, 1)
    }
  }
  return segs
}
```

A curated drawer of JavaScript libraries for fuzzy matching, diffing, casing, Unicode, hashing, and text processing.

String & Text Utilities


A curated drawer of JavaScript validation, schema, and runtime type-checking libraries worth reaching for.

## Schema validation

Define a schema once, then validate and infer types from it.

| Resource | Why it is useful |
| --- | --- |
| [superstruct](https://github.com/ianstormtaylor/superstruct) | Composable, tiny schema validation with great error messages. |
| [typed](https://github.com/brielov/typed) | Minimal schema validation with TypeScript inference. |
| [runtypes](https://github.com/pelotom/runtypes/tree/master/examples) | Runtime validation that derives static types; examples linked. |
| [ts-to-zod](https://github.com/fabien0102/ts-to-zod) | Generate Zod schemas from existing TypeScript types. |
| [valid-types](https://github.com/AlexSergey/valid-types/blob/master/src/index.ts) | Lightweight, simple validation; single-file source. |

## Runtime type checking and assertions

| Resource | Why it is useful |
| --- | --- |
| [ow](https://github.com/sindresorhus/ow) | Expressive argument-validation / assertion library for function inputs. |

## Input and value validators

| Resource | Why it is useful |
| --- | --- |
| [validator.js](https://github.com/validatorjs/validator.js) | Battle-tested string validators and sanitizers (email, URL, etc.). |
| [node-input-validator](https://github.com/bitnbytesio/node-input-validator) | Rule-string validation, e.g. `name\|required\|min:5`. |

## JSON Schema

| Resource | Why it is useful |
| --- | --- |
| [ajv](https://github.com/ajv-validator/ajv) | Fast JSON Schema validator, the de facto standard. |

A curated drawer of JavaScript validation, schema, and runtime type-checking libraries.

JavaScript Validation Libraries


A running drawer of React component libraries, primitives, widgets, UI kits, and references — grouped by the job you're trying to do. Not a "install all of these" list. It's a place to check what already exists before building another half-modal, half-popover thing from scratch.

## Component primitives and foundations

These are the resources I look at when I want behavior, accessibility, and composition without importing someone else's entire visual system.

| Resource | Why it is useful |
| --- | --- |
| [Radix Primitives](https://www.radix-ui.com/primitives) | Unstyled primitives for dialogs, popovers, menus, tabs, sliders, switches, and other behavior-heavy UI. |
| [Ariakit](https://ariakit.com/) | Lower-level accessible components and examples. Good for understanding how composable component APIs can work. |
| [React Aria](https://react-aria.adobe.com/) | Adobe's accessibility-focused hooks and component primitives. Useful when you want strong behavior primitives without default styling. |
| [Base UI](https://base-ui.com/) | Unstyled accessible components from the MUI team. Worth watching for design-system foundations. |
| [Reach UI](https://github.com/reach/reach-ui) | Historically important accessible React primitives. I would mostly treat it as lineage and API reference now. |
| [Reakit](https://reakit.io/) | The predecessor lineage to Ariakit. Still useful for seeing an older low-level accessible component model. |
| [styleless-ui](https://github.com/styleless-ui/react-styleless-ui) | Another take on styleless/headless React components. |
| [libreact](https://github.com/streamich/libreact) | A utility-heavy collection of React components and hooks. Good for spelunking small patterns. |

The main reason to keep these in the drawer: primitives save you from rebuilding keyboard navigation, focus management, portals, ARIA wiring, and controlled/uncontrolled component state.

## Copyable and Tailwind-oriented components

These are useful when you want a strong starting point and are comfortable owning the source or the styling conventions.

| Resource | Why it is useful |
| --- | --- |
| [shadcn/ui](https://ui.shadcn.com/) | Copy components into your app and own the code. Especially useful if you already like Radix and Tailwind. |
| [shadcn Dialog primitive docs](https://ui.shadcn.com/docs/primitives/dialog) | Good example of composing Radix primitives into app-owned components. |
| [Tailus UI](https://ui.tailus.io/react/components/switch/) | Radix/Tailwind-flavored React components and examples. |
| [Preline](https://preline.co/docs/dark-mode.html) | Tailwind-based components and UI behaviors, with dark-mode examples. |
| [daisyUI](https://github.com/saadeghi/daisyui) | Tailwind component classes. Useful when you want fast styling conventions without writing every class from scratch. |
| [Aceternity UI code block](https://ui.aceternity.com/components/code-block) | Nice source of copyable, polished UI examples. |
| [Shopify Hydrogen Button example](https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/Button.client.jsx) | A small real-world component example from a production-oriented starter. |

This category is less about "install a library" and more about having implementation references when you want to move fast.

## Full UI kits and design systems

Sometimes you do not need a bespoke component system. You need a lot of conventional UI, quickly.

| Resource | Why it is useful |
| --- | --- |
| [Mantine](https://mantine.dev/) | Large React component and hooks library. Good for app dashboards, forms, layout, and general product UI. |
| [React Spectrum](https://react-spectrum.adobe.com/) | Adobe's full design system and component implementation. Useful when accessibility and consistency matter. |
| [HeroUI](https://www.heroui.com/) | The project formerly known as NextUI. Useful for polished default components. |
| [Base Web](https://baseweb.design/) | Uber's React component system. Good reference for broad component API surface. |
| [PrimeReact](https://primereact.org/) | Large component suite with lots of examples, especially for app/admin-style screens. |
| [Zendesk Garden](https://garden.zendesk.com/) | Clean design-system reference with production product constraints. |
| [Vechai UI](https://github.com/vechai/vechaiui) | Radix-based component library reference. |
| [Availity React](https://github.com/Availity/availity-react) | A useful collection of React utilities and app components. |
| [Talend UI components](https://github.com/Talend/ui/tree/master/packages/components) | Enterprise component-library reference. |
| [Vision UI Dashboard Chakra](https://github.com/creativetimofficial/vision-ui-dashboard-chakra) | Full dashboard kit built around Chakra. |
| [GNUI](https://github.com/nordcloud/GNUI) | Component/design-system reference from Nordcloud. |
| [Yoga](https://github.com/Gympass/yoga) | Another design-system/component-library reference. |

These are especially useful when you are building internal tools, admin surfaces, dashboards, or operational workflows where breadth matters more than bespoke visual identity.

## Calendars and date pickers

Date UI always looks simple until localization, keyboard behavior, disabled ranges, formatting, and mobile interactions show up.

| Resource | Why it is useful |
| --- | --- |
| [calendarx](https://github.com/mfix22/calendarx) | Tiny calendar reference. |
| [natscale react-calendar](https://github.com/natscale/react-calendar) | Lightweight calendar component. |
| [FullCalendar demos](https://fullcalendar.io/demos) | Heavy-duty calendar and scheduling examples. |
| [datepicker](https://github.com/uselessdev/datepicker) | Date picker implementation reference. |
| [react-nice-dates](https://github.com/hernansartorio/react-nice-dates) | Date picker library with clean examples. |

## Layout and complex surfaces

These are the links I want when the UI stops being a static page and starts acting like a workspace.

| Resource | Why it is useful |
| --- | --- |
| [Split.js](https://github.com/nathancahill/split) | Split panes without taking over your whole app. |
| [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels) | Resizable panel layouts from Brian Vaughn. |
| [React Virtuoso](https://github.com/petyosi/react-virtuoso) | Virtualized lists and tables. |
| [Muuri](https://github.com/haltu/muuri) | Draggable/filterable/sortable grid layouts. |
| [Packery](https://packery.metafizzy.co/) | Bin-packing grid layouts. |
| [FlexLayout](https://github.com/caplin/FlexLayout) | Docking and tabbed layout manager for app-like interfaces. |
| [react-split-pane](https://github.com/tomkp/react-split-pane) | Older split-pane reference. |
| [react-stacked](https://github.com/LinusU/react-stacked) | Stacked layout reference. |
| [LYTS](https://github.com/christiankaindl/LYTS) | Layout experiment/reference. |
| [Vaul](https://vaul.emilkowal.ski/) | Drawer component with a nice interaction model. |

I tend to check these before inventing a new layout primitive. Layout bugs are the kind that quietly eat entire days.

## Drag, drop, and selection

Drag behavior is one of those areas where the browser gives you just enough rope to regret your weekend.

| Resource | Why it is useful |
| --- | --- |
| [dnd kit](https://dndkit.com/) | Modern drag-and-drop toolkit for React. |
| [Selecto](https://github.com/daybrush/selecto) | Drag selection for selectable elements. |
| [Shopify Draggable](https://shopify.github.io/draggable/examples/drag-events.html) | Drag-and-drop examples and interaction reference. |

## Tooltips, floating UI, and toasts

Floating things are full of edge cases: viewport collision, scroll containers, focus, pointer behavior, and layering.

| Resource | Why it is useful |
| --- | --- |
| [Floating UI](https://floating-ui.com/) | Positioning engine for tooltips, popovers, menus, and floating elements. |
| [Sonner](https://sonner.emilkowal.ski/) | Polished toast component. |
| [react-hot-toast](https://react-hot-toast.com/) | Popular toast library with a simple API. |
| [react-toast](https://github.com/hanseo0507/react-toast) | Tiny emoji-oriented toast reference. |
| [Reapop](https://louisbarranqueiro.github.io/reapop/) | Notification/toast system reference. |
| [react-light-toast](https://github.com/fuadpashayev/react-light-toast) | Tiny toast implementation reference. |

## Inputs, forms, and wizards

The resources in this bucket are useful when the form is more than a few inputs and a submit button.

| Resource | Why it is useful |
| --- | --- |
| [Uniforms unstyled package](https://github.com/vazco/uniforms/tree/master/packages/uniforms-unstyled/src) | Naked form components worth studying if you like schema-driven forms. |
| [react-range](https://github.com/tajo/react-range) | Range input behavior without building slider mechanics yourself. |
| [react-inline-edit](https://github.com/afeiship/react-inline-edit) | Inline editing reference. |
| [react-use-wizard](https://github.com/devrnt/react-use-wizard#examples) | Wizard/step-flow utility. |

## Editors, code, and document UI

Editors are their own universe. I try very hard not to build one casually.

| Resource | Why it is useful |
| --- | --- |
| [Editor.js](https://editorjs.io/) | Block-style editor. |
| [Slate](https://github.com/ianstormtaylor/slate) | Highly customizable rich text editor framework. |
| [phiresky CodeBlock example](https://github.com/phiresky/blog/blob/master/client/components/CodeBlock.tsx) | Nice reference for a React code-highlighting component. |

## Command palettes, progress, imports, animation, and controls

This is the miscellaneous drawer. Not everything needs to be a design system.

| Resource | Why it is useful |
| --- | --- |
| [cmdk](https://cmdk.paco.me/) | Command menu component. |
| [kbar](https://github.com/timc1/kbar) | Command palette / "genie bar" reference. |
| [NProgress](https://ricostacruz.com/nprogress/) | Classic top-page loading indicator. |
| [react-importer](https://github.com/czhu12/react-importer) | CSV importer component. |
| [react-transition-state](https://github.com/szhsin/react-transition-state) | Tiny transition state utility. |
| [react-scrollama](https://github.com/jsonkao/react-scrollama) | Scroll-driven story/visual trigger reference. |
| [moveTo](https://github.com/hsnaydd/moveTo) | Smooth scrolling utility reference. |
| [react-move](https://react-move-docs.netlify.app/demos/node-group) | Animation examples for React. |
| [Leva](https://github.com/pmndrs/leva) | Controls panel for tweaking values, especially useful in creative/devtool interfaces. |
| [Retoggle](https://github.com/Raathigesh/retoggle) | Component toggle/devtool reference. |
| [react-native-web](https://github.com/necolas/react-native-web) | React Native primitives rendered on the web. Useful when thinking across native/web boundaries. |
| [tw-universal-tokens](https://github.com/itaditya/tw-universal-tokens) | Design-token utility reference. |

A curated drawer of React component libraries, primitives, widgets, design systems, and UI utilities worth knowing about.

React Resources

Copyable and Tailwind-oriented components

Command palettes, progress, imports, animation, and controls

David Wells

Builder of things

Software architect
& product wrangler

Resources

Frontend and React