awesome
A curated list of awesome frontend development resources.
https://github.com/trendmicro-frontend/awesome
Last synced: 3 days ago
JSON representation
AI
React Components
- awesome-chatgpt-prompts - This repo includes ChatGPT prompt curation to use ChatGPT better.
- CodeFormer - [NeurIPS 2022] Towards Robust Blind Face Restoration with Codebook Lookup Transformer. https://replicate.com/sczhou/codeformer
- draw-a-ui - Draw a mockup and generate html for it
- modelcontextprotocol - The Model Context Protocol (MCP) is an open protocol that enables seamless integration between LLM applications and external data sources and tools. Whether you're building an AI-powered IDE, enhancing a chat interface, or creating custom AI workflows, MCP provides a standardized way to connect LLMs with the context they need.
- modelcontextprotocol/servers - Model Context Protocol Servers. https://modelcontextprotocol.io
- github-mcp-server - GitHub's official MCP Server
- agents - sharing current agents in use
- everything-claude-code - Complete Claude Code configuration collection - agents, skills, hooks, commands, rules, MCPs. Battle-tested configs from an Anthropic hackathon winner.
- agency-agents - A complete AI agency at your fingertips - From frontend wizards to Reddit community ninjas, from whimsy injectors to reality checkers. Each agent is a specialized expert with personality, processes, and proven deliverables.
- Agent-Reach - Give your AI agent eyes to see the entire internet. Read & search Twitter, Reddit, YouTube, GitHub, Bilibili, XiaoHongShu — one CLI, zero API fees.
- codebase-memory-mcp - High-performance code intelligence MCP server. Indexes codebases into a persistent knowledge graph — average repo in milliseconds. 158 languages, sub-ms queries, 99% fewer tokens. Single static binary, zero dependencies. https://deusdata.github.io/codebase-memory-mcp/
- dashi-taskboard - 现代化可灵活嵌入的任务面板,支持 Codex、DeepSeek Harness
- dashi-ppt-skill - An AI-agent skill that generates browser-editable presentations from multiple visual themes, exportable to HTML, PDF, and PPTX.
- Graft - Turbocharge Claude Code, Cursor, Codex, Gemini & every coding agent: faster, cheaper, with contextual understanding specific to your codebase. https://graft.nanonets.ai/
- OpenMontage - World's first open-source, agentic video production system. 12 production pipelines, 100+ tools, 700+ agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio. https://www.openmontage.video/
- orca - Orca is the ADE for working with a fleet of parallel agents. Run any coding agent with your own subscription. Available on desktop, mobile and remote runtime. https://onorca.dev/
Algorithms
React Components
- @trekhleb/javascript-algorithms - Algorithms and data structures implemented in JavaScript with explanations and links to further readings.
- @mgechev/javascript-algorithms - JavaScript implementation of different computer science algorithms.
- AlgorithmVisualizer - Algorithm Visualizer.
Animation
React Components
- scenejs - 🎬 Scene.js is JavaScript & CSS timeline-based animation library. http://daybrush.com/scenejs/
Audio
React Components
- Tone.js - A Web Audio framework for making interactive music in the browser.
Authentication
React Components
- passport - Simple, unobtrusive authentication for Node.js.
Automation
React Components
- chromeless - 🖥 Chrome automation made simple. Runs locally or headless on AWS Lambda.
- headless-recorder - Headless recorder is a Chrome extension that records your browser interactions and generates a Puppeteer or Playwright script.
- playwright - Node.js library to automate Chromium, Firefox and WebKit with a single API. https://playwright.dev/
- probot - 🤖 A framework for building GitHub Apps to automate and improve your workflow. https://probot.github.io
- puppeteer - Headless Chrome Node API.
- puppeteer-recorder - Puppeteer recorder is a Chrome extension that records your browser interactions and generates a Puppeteer script.
- robotjs - Node.js Desktop Automation. Control the mouse, keyboard, and read the screen.
Awesome
React Components
- awesome-creative-coding - 🎨 Creative Coding, Generative Art, Interaction Design, Resources.
- awesome-docker - A curated list of Docker resources and projects.
- awesome-iot - A curated list of awesome Internet of Things projects and resources.
- awesome-programming-for-kids - A curated list of resources for teaching kids programming.
- awesome-react - A collection of awesome things regarding React ecosystem.
- awesome-vue - A curated list of awesome things related to Vue.js.
- awesome - A curated list of awesome lists.
- awesome-electron - Useful resources for creating apps with Electron.
- awesome-nodejs - A curated list of delightful Node.js packages and resources.
- awesome-redux - Awesome list of Redux examples and middlewares.
Boilerplate
React Components
- babel-plugin-boilerplate - A setup to get you started on building babel plugins.
- html5-boilerplate - A professional front-end template for building fast, robust, and adaptable web apps or sites.
- electron-react-boilerplate - Live editing development on desktop app.
Books
React Components
- You-Dont-Know-JS - A book series on JavaScript. @YDKJS on twitter.
- react-in-patterns - A free book that talks about design patterns/techniques used while developing with React. https://www.gitbook.com/book/krasimir/react-in-patterns/
Build Tools
React Components
- eslint - A fully pluggable tool for identifying and reporting on patterns in JavaScript.
- gulp - The streaming build system.
- lodash-webpack-plugin - Smaller modular Lodash builds.
- node-gyp - Node.js native addon build tool.
- node-pre-gyp - Node.js tool for easy binary deployment of C++ addons.
- parallel-webpack - Builds multi-config webpack projects in parallel.
- rollup - Next-generation ES6 module bundler. http://rollupjs.org
- size-limit - Prevent JS libraries bloat. If you accidentally add a massive dependency, Size Limit will throw an error.
- webpack - A module bundler that bundles JavaScript and other assets for the browser.
- webpack-blocks - 📦 Configure webpack using functional feature blocks.
- webpack-dashboard - A CLI dashboard for webpack dev server.
- extract-text-webpack-plugin - Extract text from bundle into a file.
- browserify - Browser-side require() the node.js way.
Cheatsheet
React Components
- react-native-styling-cheat-sheet - Most of the React Native styling material in one page.
- modern-js-cheatsheet - Cheatsheet for the JavaScript knowledge you will frequently encounter in modern projects.
- react-component-composition-cheatsheet - React component composition cheatsheet.
- react-redux-cheatsheet - React Redux Cheat Sheet on Workflow & Concept.
Color
React Components
- color - 🌈 Javascript color conversion and manipulation library
- color-name - A JSON with color names.
- colornames - Map color names to HEX color values.
Command-line & Terminal Utilities
React Components
- shelljs - Portable Unix shell commands for Node.js.
- blessed - A high-level terminal interface library for node.js.
- chalk - Terminal string styling done right.
- cli-table - Pretty unicode tables for the CLI with Node.js.
- commander.js - Node.js command-line interfaces made easy.
- Inquirer.js - A collection of common interactive command line user interfaces.
- playwright-cli - CLI for common Playwright actions. Record and generate Playwright code, inspect selectors and take screenshots.
- terminalizer - 🦄 Record your terminal and generate animated gif images.
Compiler
React Components
- emscripten - Emscripten: An LLVM-to-JavaScript Compiler. http://kripken.github.io/emscripten-site/
Computer Vision
React Components
- node-opencv - OpenCV Bindings for node.js.
- tracking.js - A modern approach for Computer Vision on the web.
Control Flow
React Components
CSS
React Components
- styled-components - Comparing different ways to style components.
- 30-seconds-of-css - A curated collection of useful CSS snippets. https://atomiks.github.io/30-seconds-of-css/
- css-modules - A CSS file in which all class names and animation names are scoped locally by default.
- normalize.css - A collection of HTML element and attribute style-normalizations.
- postcss - Transforming styles with JS plugins.
- purifycss - Remove unused CSS. Also works with single-page apps.
- animate.css - A cross-browser library of CSS animations. As easy to use as an easy thing.
CSS Preprocessor
React Components
Data Visualization
React Components
- c3 - A D3-based reusable chart library.
- Chart.js - Simple HTML5 Charts using the <canvas> tag. http://www.chartjs.org/
- d3 - Bring data to life with SVG, Canvas and HTML.
- d3-node - Server-side D3 for static chart/map generation.
- recharts - Redefined chart library built with React and D3. http://recharts.org
Date
React Components
- moment - Parse, validate, manipulate, and display dates in javascript.
- moment-timezone - Timezone support for moment.js.
Debugging
React Components
- ndb - ndb is an improved debugging experience for Node.js, enabled by Chrome DevTools.
Deep Learning
React Components
- convnetjs - Deep Learning in Javascript. Train Convolutional Neural Networks (or ordinary ones) in your browser.
Documentation
React Components
- apidoc - RESTful web API Documentation Generator.
- documentation - Beautiful, flexible, powerful js docs.
DOM
React Components
- component-delegate - Event delegation component.
- dom-events - DOM event binding and emitting.
- offset - Get the xy offset of an element.
- class-list - A cross-browser class list.
- delegate-dom - Event delegation library.
- dom-classes - Cross-browser element class manipulation.
- dom-select - Select DOM.
- dom-style - Library to manipulate CSS properties.
- dom-value - Get / set form input values.
- dom-to-image - Generates an image from a DOM node using HTML5 canvas.
- in-view - Get notified when a DOM element enters or exits the viewport.
- is-dom - Check if the given object is a dom node.
- synthetic-dom-events - Create DOM events for builtin event types.
- element-class - Like .addClass and .removeClass from jquery but without dependencies.
- jsdom - A JavaScript implementation of the WHATWG DOM and HTML standards, for use with Node.js.
Electron
React Components
- electron-tabs - Simple tabs for Electron applications.
- electron-util - Useful utilities for Electron apps and modules.
Feature Control - LaunchDarkly
React Components
- featureflags - The guide to decoupling feature rollout from code deployment for feature flag-driven development. Feature flags give a software organization the power to reduce risk, iterate quicker, and get more control.
- js-client-sdk - LaunchDarkly Client-side SDK for Browser JavaScript.
- js-sdk-common - Code shared between all LaunchDarkly client-side JS-based SDKs.
- node-server-sdk - LaunchDarkly Server-side SDK for Node.js.
- node-client-sdk - LaunchDarkly Client-side SDK for Node.js.
- react-client-sdk - LaunchDarkly Client-side SDK for React.js.
Frontend Performance
React Components
- Front-End-Performance-Checklist - 🎮The only Front-End Performance Checklist that runs faster than the others.
Game
React Components
Graphics
React Components
- charts - Simple, responsive, modern SVG Charts with zero dependencies (https://frappe.github.io/charts).
- node-canvas - Node canvas is a Cairo backed Canvas implementation for NodeJS.
- obelisk.js - JavaScript library for building pixel isometric graphics with HTML5 canvas.
- sigma.js - A JavaScript library dedicated to graph drawing.
- three.js - JavaScript 3D library.
Grid
React Components
- grid - Drag and drop library for two-dimensional, resizable and responsive lists.
HTTP
React Components
- node-fetch - A light-weight module that brings window.fetch to node.js and io.js.
- node-http-proxy - A full-featured http proxy for node.js
- request - Simplified HTTP request client.
- superagent - Ajax with less suck - (and node.js HTTP client to match).
I18n
React Components
- i18next - An internationalization framework.
- i18next-scanner - Scan your code, extract translation keys/values, and merge them into i18n resource files.
Icon Fonts
React Components
- feather - Simply beautiful open source icons. https://feathericons.com
- font-awesome - The iconic font and CSS toolkit.
Image Processing
React Components
- cropper - A simple jQuery image cropping plugin.
- cropperjs - JavaScript image cropper.
- pixelmatch - The smallest, simplest and fastest JavaScript pixel-level image comparison library.
- zooming - Image zoom that makes sense. http://desmonding.me/zooming/
- color-thief - Grabs the dominant color or a representative color palette from an image. Uses javascript and canvas.
Inversion of Control
React Components
- awilix - Extremely powerful Inversion of Control (IoC) container for Node.JS.
- awilix-express - Awilix helpers/middleware for Express.
IoT
React Components
- Espruino - The Espruino JavaScript interpreter.
- johnny-five - JavaScript Robotics and IoT programming framework.
- node-hid - Access USB HID devices through Node.JS.
- node-red - A visual tool for wiring the Internet of Things
- node-usb - Improved USB library for NodeJS.
- cylon - JavaScript framework for robotics, drones, and the Internet of Things (IoT).
- node-serialport - Node.js package to access serial ports for reading and writing OR Welcome your robotic JavaScript overlords.
Job Scheduling and Queues
React Components
- agenda - ightweight job scheduling for Node.js.
- agendash - Agenda Dashboard.
- agenda-rest - Scheduling as a Service.
- bull - Premium Queue package for handling distributed jobs and messages in NodeJS.
Json Web Token (JWT)
React Components
- express-jwt - connect/express middleware that validates a JsonWebToken (JWT) and set the req.user with the attributes.
- node-jsonwebtoken - JsonWebToken implementation for node.js.
- socketio-jwt - Authenticate socket.io incoming connections with JWTs.
Logging
React Components
- universal-logger - A universal logging library for Node and the browser.
- universal-logger-browser - Browser plugins for universal logger.
- winston - A multi-transport async logging library for node.js.
Machine Learning
React Components
- brain.js - 🤖 Neural networks in JavaScript http://brain.js.org
- ml5-library - Friendly machine learning for the web! 🤖 https://ml5js.org
- tfjs - A WebGL accelerated, browser based JavaScript library for training and deploying ML models. https://js.tensorflow.org
- tfjs-examples - Examples built with TensorFlow.js. https://js.tensorflow.org/
React Components
- nodemailer - Send e-mails with Node.JS – easy as cake!
Markdown
React Components
- render-markdown-javascript - Renders markdown files to HTML with highlighted code blocks BUT ALSO RENDERS THE JAVASCRIPT ONES.
Math
React Components
- big - A small, fast JavaScript library for arbitrary-precision decimal arithmetic.
- expr-eval - Mathematical expression evaluator in JavaScript.
- frac - ➗ Rational approximation with bounded denominator. http://oss.sheetjs.com/frac/
- bignumber.js - A JavaScript library for arbitrary-precision decimal and non-decimal arithmetic.
Messaging Applications
React Components
- amqp.node - AMQP 0-9-1 library and client for Node.js. https://squaremo.github.io/amqp.node/
Micro Frontend
React Components
- single-spa-examples
- oc - OpenComponents, serverless in the front-end world for painless micro-frontends delivery. https://opencomponents.github.io/
- qiankun - 📦🚀Blazing fast, simple and completed solution for micro frontends.
- simple-single-spa-webpack-example - A simple example of how to use webpack with single-spa.
- single-spa - Microfrontends made easy. https://single-spa.js.org/
- tailor - A streaming layout service for front-end microservices. http://www.mosaic9.org
Micro-generator Framework
React Components
- plop - Micro-generator framework that makes it easy for an entire team to create files with a level of uniformity.
Notifications
React Components
- HTML5-Desktop-Notifications - Desktop notifications plugin for Chrome, Safari, Firefox and IE9.
- notify.js - A handy wrapper for the Web Notifications API.
- push.js - A compact, cross-browser solution for Javascript desktop notifications.
Object
React Components
- defaults-deep - Like extend but recursively copies only the missing properties/values to the target object.
- pretty-format - ✨ Stringify any JavaScript value.
- flat - 🚂 Flatten/unflatten nested Javascript objects
- merge-deep - Recursively merge values in a JavaScript object.
- omit-deep - Recursively omit specified keys from an object.
- sort-object - Sort the keys in an object.
- sortobject - Deeply sort an object by its keys without mangling any arrays inside of it.
- pretty-format - ✨ Stringify any JavaScript value.
P2P
React Components
- p2p-graph - Real-time P2P network visualization with D3.
- peerjs - Simple peer-to-peer with WebRTC.
- discovery-channel - Search for a key across multiple discovery networks and find peers who answer.
- discovery-server - A tcp/utp server that auto announces itself using discovery-channel.
- discovery-swarm - A network swarm that uses discovery-channel to find peers.
Polyfill
React Components
- babel-polyfill - Provides polyfills necessary for a full ES2015+ environment.
- es5-shim - ECMAScript 5 compatibility shims for legacy (and modern) JavaScript engines.
- es6-shim - ECMAScript 6 compatibility shims for legacy JavaScript engines.
- es6-symbol - ECMAScript 6 Symbol polyfill.