JS/TS tooling overview

An overview of tooling for JavaScript and TypeScript projects. Mostly about React.

Library Build tools

• Parcel: Zero-config bundler using swc (rust)
• Vite: Bundler using esbuild (go)
• Webpack: Bundler
• rspack: Webpack-like bundler written in Rust
  • Modern Module Tools: Rspack wrapper with sane defaults
• tsup: Bundler using esbuild (go)
• wmr: Bundler using rollup (js)
• tsc: TypeScript compiler
• publint: Validate if an npm package is published correctly
• Are the Types Wrong?: Validate if the types of an npm package are published correctly

React App Build tools

• Nextjs
  • Nextra
• Remix
• Vite
• Docusaurus
• Modern.js
  • Modern.js Doc

React Headless UI Libraries

• Radix
• Ariakit
• React Aria
• Headless UI
• Tanstack Table

React UI Libraries

• Chakra UI: Emotion based
• Flowbite: Tailwind CSS based
• MUI: Emotion based
  • Material React Table
• Joy UI: Emotion based
• Mantine: Emotion based
  • Mantine React Table
• Tailwind Radix: Tailwind CSS based
• Tremor: Tailwind CSS based
• shadcn/ui: Tailwind CSS & Radix based

React Specialized Components

• React Mosaic: Tiling window manager for React
• React Flow: React component for building node-based graphs
• Dnd Kit: React drag and drop library

CSS Utilities

• Tailwind CSS: Utility first CSS framework
  • Tailwind Merge: Tailwind CSS plugin for merging utilities

Testing

• Vitest: Vite based test runner
• Playwright: E2e testing
• Fast Check: Property based testing

Utilities

• contentlayer: MDX tooling
• tslog: TypeScript logging utility
• patch-package: apply patches to npm dependencies
• pnpm: disk space efficient package manager
• remeda: Typescript-first utility library
• cicada: TypeScript-first CI/CD pipelines
• TS-Collection: Typescript-first data structures
• mnemonist: Typescript-first data structures
• Typescript Collections: Typescript-first data structures
• ts-pattern: Pattern matching
• already: Promise utilities
• luxon: Time and date library
• neverthrow: For if you never want to throw an error

CLI Tools

• oclif: CLI framework
• zx: CLI scripting

Fake Data

• falso: Generate fake data
• prando: Pseudo random number generator

Search

• minisearch
• orama
• fuse

State Management

• redux-toolkit: event based + large ecosystem
• zustand: event based
• preact signals: signal based
• signia: signal based
• valtio: proxy based
• jotai: atom based
• recoil: atom based
• Tanstack Query: query based

Network Tools (User to User)

• openapi-typescript-any-client: Generate TypeScript client from OpenAPI spec
• YJS: Conflict-free replicated data types
• PeerJS: WebRTC abstraction
• partykit: Framework for collaborative applications

Package Managers

• pnpm
• yarn
• npm
• bun
• yalc: Linking local packages
• turbo: monorepo tooling

AST

• syntax-tree: A collection of AST utilities
• magicast: High level AST manipulation
• structured types: Utilities for converting Typescript to AST and docs