A list of personal npm package recommendations and alternatives

Utility libraries

Dates

• date-fns ⭐ - Date utility library
• moment.js - Parse, validate, manipulate, and display dates and times

Generic

• lodash ⭐ - Generic utility library
• ramda - Functional utility library

Validation

• joi - Object schema description language and validator for JavaScript objects
• yup - Dead simple Object schema validation
• superstruct - A simple and composable way to validate data

Styling

• polished - Styling utility library

Mocking/Faking

• faker ⭐ - generate realistic fake data in Node.js and the browser
• casual - fake data generator for javascript

Frontend

Misc

• what-input - utility for tracking the current input method (mouse/pointer, keyboard or touch). can be used to provide outlines for keyboard usage and kinda act like a polyfill for :focus-visible

Data visualization

• d3 - Data visualization library

Animation

• greensock - Site of tools for scripted, high-performance animations in all major browsers
• anime - JavaScript animation engine

Canvas

• three.js - JavaScript 3D library
• babylon.js - JavaScript 3D library
• fabric.js - Powerful and simple 2D canvas library

Editing

• slate - A completely customizable framework for building rich text editors

React

Boilerplates

• create-react-app ⭐ - Set up a react app with a single command
• @rescripts/cli ⭐ - Allow custom build configs for create-react-app applications
• next.js - Server-rendered react framework

Static site generators

• gatsby ⭐ - Site generator for React
• react-static - A progressive static site generator for React
• phenomic - Modular website compiler

Hook Collections

• beautiful-react-hooks - A collection of beautiful and (hopefully) useful React hooks

Components

Component libraries

• material-ui ⭐ - React components that implement Google's material design
• reakit - Accessible, composable components that implement the WAI-ARIA 1.1 standards
• eui - Design library in use at Elastic to build internal products
• chakra ui - Chakra UI is a simple, modular and accessible component library that gives you all the building blocks you need
• antd - React UI library that contains a set of high quality components and demos following the Ant Design specification
• office-ui-fabric - Official component library to build experiences that fit seamlessly into Office and Office 365
• atlaskit - Technical implementation of Atlassians UI guidelines as React components
• blueprint - React-based UI toolkit for the web
• react-bootstrap - React components for the most used CSS library in the world
• smooth-ui - Style system & UI library that works with styled-components or emotion

Data visualization

• nivo ⭐ - Rich set of dataviz components, built on top of d3
• react-vis - A composable charting library
• vx - A set of reusable low-level visualization components
• victory - Components for modular charting and data visualization
• recharts - A composable charting library built on React components

Maps

• pigeon-maps ⭐ - ReactJS maps without external dependencies
• react-leaflet - An abstraction of Leaflet as React components
• react-mapbox-gl - React wrapper for mapbox-gl-js

Virtualization

• react-window ⭐ - Components for efficiently rendering large lists and tabular data
• react-virtualized - Components for efficiently rendering large lists and tabular data
• react-virtuoso - virtualized list component that can handle variable heights, sticky group headers and content resizing

Tables/datagrids

• react-table - Hooks for building fast and extendable tables and datagrids for React
• reactabular - A framework for building the React table you need
• ag-grid - Fully features, highly customizable data grid. Free and enterprise versions

Misc

• react-helmet ⭐ - Manage changes to the document head
• react-media - CSS media queries for React
• downshift - Primitive to build simple, flexible, enhanced input React components
• react-joyride - Create guided tours for your apps
• react-aria-live - ARIA live message announcer for React apps

Component development

• storybook ⭐ - Developing UI components in isolation
• styleguidist - Isolated React component development environment

Routing

• react-router ⭐ - Most used routing library
• @reach/router - Routing library with focus on a11y
• navi - Routing library with focus on asynchronous routing & data fetching

CSS-in-JS

• styled-components ⭐ - CSS-in-JS library for modular, component-based styling
• emotion ⭐ - CSS-in-JS library for modular, component-based styling
• linaria - Zero runtime css in js library
• astroturf - Write CSS in your JavaScript files without adding any runtime layer
• rebass - React primitive UI components built with styled-system

Forms

• formik ⭐ - Build forms in React, without the tears
• react-final-form ⭐ - High performance subscription-based form state management for React
• react-hook-form - Performant, flexible and extensible forms with easy to use validation.
• redux-form - Form handling for redux

I18N

• react-intl ⭐ - React components and API to format dates, numbers, and strings, including pluralization
• fbt - Facebook's internationalization framework

State Management

• redux ⭐ - Predictable, unidirectional data flow state management based on the flux pattern
• mobx - Functional reactive programming state management
• mobx-state-tree - Model driven state management
• redux-observable - RxJS based middleware for redux

Animations

• react-spring ⭐ - A spring physics based React animation library
• framer-motion - A simple, CSS-like animation library

Data fetching

• react-query - Hooks for fetching, caching and updating asynchronous data in React
• swr - React Hooks for Remote Data Fetching

3D

• react-three-fiber - a react renderer for three.js

Testing

• jest ⭐ - JavaScript testing framework
• cypress ⭐ - JavaScript end to end testing framework, running in Chrome

Asynchronous Requests

GraphQL

• apollo ⭐ - GraphQL implementation for client & server
• urql - Customizable GraphQL client for react
• graphql-code-generator - Generate code from your graphql schema

fetch/XHR

• axios ⭐ - Promise-based XHR client with a lot of options
• ky - Tiny and elegant HTTP client based on the browser Fetch API
• cross-fetch - Universal WHATWG Fetch API for Node, Browsers and React Native
• make-fetch-happen - Nodejs fetch with HTTP Cache support, request pooling, proxies, retries etc
• needle - Streamable HTTP client

Node.js

Misc

• node-re2 - fast, safe alternative to backtracking regular expression engines
• dotenv - load environment variables from .env file
• jsonwebtoken - JSON web token implementation

Web frameworks

• express - Fast, unopinionated, minimalist web framework) - most used
• hapi - A rich framework for building applications and services
• koa - Next generation web framework from the team behind express
• helmet - Security toolbox for express web apps

Database

• mongoose - Object modeling for MongoDB
• mongoose-patch-history - Save a history of JSON patches in an associated "patches" collection
• sequelize - ORM for Postgres, MySQL, MariaDB, SQLite and Microsoft SQL Server
• knex - SQL query builder

Logging

• debug - Debugging utility modeled after Node.js core's debugging technique
• morgan - HTTP request logger middleware
• winston - Universal logging library, useable with multiple transports
• pino - Low overhead logging with a focus on performance

CLI

• yargs - Yargs helps you build interactive command line tools and parses arguments
• inquirer - A collection of common interactive command line user interfaces
• enquirer - Stylish, intuitive and user-friendly prompts
• cross-spawn - A cross platform solution to node's spawn and spawnSync

Image processing

• sharp - High performance Node.js image processing

AST-based transformations

• remark - Plugin-based markdown processor that can generate and transform markdown
• rehype - Plugin-based HTML processor that can generate and transform HTML

Tooling

Commandline

• diff-so-fancy - Human readable terminal diffs
• tldr - Simplified and community-driven man pages

Load testing

• autocannon - fast HTTP/1.1 benchmarking tool

Project

JavaScript project tooling

• prettier - Code formatter
• eslint - Code linter
• husky - Define git hooks in package.json
• commitlint - Helps adhering to commit conventions by linting commit messages
• lint-staged - Runs linters, formatters or other commands on staged files
• standard-version - Automatic semantic versioning and CHANGELOG generation
• lerna - A tool for managing JavaScript projects with multiple packages
• size-limit - Enables a build step that checks bundle sizes
• plop - Template-based code generator framework

Github

Applications that can be embedded into github workflows (automatically commenting on PRs etc)

• bundlesize - Enables a build step that checks bundle sizes
• dependabot - Creates pull requests to keep dependencies secure and up-to-date
• snyk - Automates finding & fixing vulnerabilities in your dependencies
• renovate - Automates dependency updates in software projects
• greenkeeper - Real-time monitoring and automatic updates for npm dependencies
• codecov - Tools to group, merge and compare coverage reports

Build

• webpack - Highly configurable asset bundler
• babel - JavaScript compiler
• rollup - Module bundler
• sucrase - Super fast babel alternative
• swc - Another fast babel alternative

Webpack plugins

• webpack-bundle-analyzer - Visualizes size of webpack output files with an interactive treemap
• nodemon-webpack-plugin - Uses nodemon to start and reload a server
• webpack-license-plugin - Helps you with the management of open source dependencies
• clean-webpack-plugin - Remove your build folder before building

Babel plugins & presets

• babel-preset-env - Automatically target compile environments
• babel-plugin-macros - Allows you to build compile-time libraries without having to add a babel plugin
• babel-preset-typescript - Preset used to compile typescript with babel

Npm scripts

• shx - Unix-like, cross-platform commands
• cross-env - Set and use environment variables across platforms