skip to content

Search

欢迎访问 Kreedzt 的个人网站

Find me on

Posts

Notes

Rust 相关技术选型页面

What is real? How do you define real? If you’re talking about what you can feel, what you can smell, what you can taste and see, then real is simply electrical signals interpreted by your brain.
This is the world that you know. The world as it was at the end of the twentieth century. It exists now only as part of a neural-interactive simulation that we call the Matrix. You’ve been living in a dream world.
This is the world as it exists today… Welcome… to the desert… of the real.
We have only bits and pieces of information but what we know for certain is that at some point in the early twenty-first century all of mankind was united in celebration. We marveled at our own magnificence as we gave birth to AI.

AI? You mean artificial intelligence?

A singular consciousness that spawned an entire race of machines. We don’t know who struck first, us or them. But we know that it was us that scorched the sky. At the time they were dependent on solar power and it was believed that they would be unable to survive without an energy source as abundant as the sun. Throughout human history, we have been dependent on machines to survive. Fate, it seems, is not without a sense of irony. The human body generates more bio-electricity than a 120-volt battery and over 25,000 BTUs of body heat. Combined with a form of fusion, the machines have found all the energy they would ever need. There are fields, endless fields, where human beings are no longer born. We are grown. For the longest time I wouldn’t believe it, and then I saw the fields with my own eyes. Watch them liquefy the dead so they could be fed intravenously to the living. And standing there, facing the pure horrifying precision, I came to realize the obviousness of the truth.
What is the Matrix?
Control.
The Matrix is a computer generated dream world built to keep us under control in order to change a human being into battery.

Web 前端开发相关技术选型

Web 前端开发技术选型

前端框架 (Frontend Frameworks)

通用框架 (General Frameworks)

  • vue - 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
  • react
  • angular
  • svelte
  • solid
  • qwik
  • mithril.js - A JavaScript Framework for Building Brilliant Applications
  • rax - 🐰 Rax is a progressive framework for building universal application. https://rax.js.org
  • marko - A declarative, HTML-based language that makes building web apps fun
  • ember.js - Ember.js - A JavaScript framework for creating ambitious web applications
  • san - A fast, portable, flexible JavaScript component framework
  • regular - regularjs: a living template engine that helps us to create data-driven component.
  • htmx
  • hyperapp - 1kB-ish JavaScript framework for building hypertext applications
  • ractive

服务端渲染框架 (SSR Frameworks)

  • next.js - The React Framework
  • nuxt - The Intuitive Vue Framework.
  • astro
  • hono
  • leptos
  • umi - A framework in react community ✨
  • vuepress - 📝 Minimalistic Vue-powered static site generator

微前端框架 (Micro Frontend Frameworks)

  • qiankun - 📦 🚀 Blazing fast, simple and complete solution for micro frontends.
  • single-spa
  • million - Optimize React performance and make your React 70% faster in minutes, not months.
  • nue - Standards first web framework taking HTML, CSS, JS, and WASM to their absolute peak
  • stencil - A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards.
  • avalon - an elegant efficient express mvvm framework
  • taro - 开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
  • preact-iso - Isomorphic utilities for Preact

构建工具 (Build Tools)

  • vite
  • webpack
  • esbuild
  • rollup
  • parcel
  • tsdx
  • tsup
  • imagemin
  • eleventy - A simpler site generator. Transforms a directory of templates (of varying types) into HTML.
  • bun - Incredibly fast JavaScript runtime, bundler, test runner, and package manager – all in one
  • swc - Rust-based platform for the Web
  • svgo - ⚙️ Node.js tool for optimizing SVG files
  • autoprefixer - Parse CSS and add vendor prefixes to rules by Can I Use
  • postcss - Transforming styles with JS plugins
  • terser
  • lightningcss - An extremely fast CSS parser, transformer, bundler, and minifier written in Rust.
  • rspack - The fast Rust-based web bundler with webpack-compatible API 🦀️
  • snowpack - ESM-powered frontend build tool. Instant, lightweight, unbundled development. ✌️
  • ncc - Compile a Node.js project into a single file. Supports TypeScript, binary addons, dynamic requires.
  • pkg - Package your Node.js project into an executable
  • madge - Create graphs from your CommonJS, AMD or ES6 module dependencies
  • browserslist - 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env
  • minipack - 📦 A simplified example of a modern module bundler written in JavaScript

代码质量与测试 (Code Quality & Testing)

代码质量 (Code Quality)

  • ESLint
  • Prettier
  • Biome
  • Stylelint
  • EditorConfig
  • husky
  • standard
  • cz-cli
  • lint-staged
  • knip - ✂️ Find unused files, dependencies and exports in your JavaScript and TypeScript projects. Knip it before you ship it!
  • sql-formatter - A whitespace formatter for different query languages
  • TypeStat - Converts JavaScript to TypeScript and TypeScript to better TypeScript. 🧫
  • oxc - ⚓ A collection of JavaScript tools written in Rust.
  • parallel-prettier - Concurrent prettier runner
  • stc - Speedy TypeScript type checker
  • ts-migrate - A tool to help migrate JavaScript code quickly and conveniently to TypeScript
  • csslint - Automated linting of Cascading Stylesheets
  • typescript-eslint - :sparkles: Monorepo for all the tooling which enables ESLint to support TypeScript
  • prettier-eslint - Code :arrow_right: prettier :arrow_right: eslint --fix :arrow_right: Formatted Code :sparkles:

测试工具 (Testing Tools)

  • vitest
  • jest
  • mocha
  • ava
  • jasmine
  • karma
  • nightwatch
  • Detox
  • tape
  • nyc
  • msw - Industry standard API mocking for JavaScript.
  • ts-jest - A Jest transformer with source map support that lets you use Jest to test projects written in TypeScript.
  • c8 - output coverage reports using Node.js’ built in coverage
  • webdriverio - Next-gen browser and mobile automation test framework for Node.js
  • playwright - Playwright is a framework for Web Testing and Automation.
  • javascript-testing-best-practices - 📗🌐 🚢 Comprehensive and exhaustive JavaScript & Node.js testing best practices (July 2023)
  • sinon - Test spies, stubs and mocks for JavaScript.
  • mochawesome - A Gorgeous HTML/CSS Reporter for Mocha.js.
  • pollyjs - Record, Replay, and Stub HTTP Interactions.

React 测试 (React Testing)

UI 组件库与样式方案 (UI Component Libraries & Styling Solutions)

UI 框架 (UI Frameworks)

  • bootstrap
  • semantic-ui
  • amphtml
  • TW-Elements - 𝙃𝙪𝙜𝙚 collection of Tailwind MIT licensed (free) components, sections and templates 😎
  • skeleton - Skeleton is an adaptive design system powered by Tailwind CSS
  • park-ui - Beautifully designed components built with Ark UI and Panda CSS
  • awesome-shadcn-ui - A curated list of awesome things related to shadcn/ui.
  • daisyui - 🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library
  • rippleui - Clean, modern and beautiful Tailwind CSS components.
  • preline - Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
  • spartan - Cutting-edge tools powering Angular full-stack development.
  • ark - Build your design system with React, Svelte, Vue, and Solid. Powered by State Machines
  • tamagui - Style React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.
  • keep-react - Keep React is an open-source component library built on Tailwind CSS and React.js.
  • langui - UI for your AI. Open Source Tailwind components tailored for your GPT, generative AI, and LLM projects.
  • mantine - A fully featured React components library
  • heroui - 🚀 Beautiful, fast and modern React UI library. (Previously NextUI)
  • ui - A set of beautifully-designed, accessible components and a code distribution platform.
  • primitives - Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps.
  • material-kit-react - Minimal Dashboard - build with React Material UI components.
  • MASA.Blazor - Blazor UI component library based on Material Design.
  • headlessui - Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
  • semi-design - 🚀A modern, comprehensive, flexible design system and React UI library.
  • flowbite - Open-source UI component library and front-end development framework based on Tailwind CSS
  • material-tailwind - @material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design.
  • element-plus - 🎉 A Vue.js 3 UI Library made by Element team
  • react-bootstrap - Bootstrap components built with React
  • ant-design - An enterprise-class UI design language and React UI library
  • pro-components - 🏆 Use Ant Design like a Pro!
  • react-data-grid - Feature-rich and customizable data grid React component
  • bootstrap-vue - BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js.
  • vant-weapp - 轻量、可靠的小程序 UI 组件库
  • chameleon - 🦎 一套代码运行多端,一端所见即多端所见
  • buefy - Lightweight UI components for Vue.js based on Bulma
  • ng-zorro-antd - Angular UI Component Library based on Ant Design
  • ng-alain - NG-ZORRO admin panel front-end framework
  • vue-material - Vue.js Framework - ready-to-use Vue components with Material Design, free forever.
  • react-uwp - 📱⌨ React Components that Implement Microsoft’s UWP Design & Fluent Design.
  • react-widgets - Polished, feature rich, accessible form inputs built with React
  • react-toolbox - A set of React components implementing Google’s Material Design specification with the power of CSS Modules
  • fixed-data-table-2 - A React table component designed to allow presenting millions of rows of data.
  • draft-js - A React framework for building text editors.
  • rebass - :atom_symbol: React primitive UI components built with styled-system.
  • evergreen - 🌲 Evergreen React UI Framework by Segment
  • spectre - Spectre.css - A Lightweight, Responsive and Modern CSS Framework
  • bulma - Modern CSS framework based on Flexbox
  • gestalt - A set of React UI components that supports Pinterest’s design language
  • quasar - Quasar Framework - Build high-performance VueJS user interfaces in record time
  • vuetify - 🐉 Vue Component Framework
  • iview-weapp - 一套高质量的微信小程序 UI 组件库
  • styled-components - Visual primitives for the component age.
  • vuesax - New Framework Components for Vue.js 2
  • iview - A high quality UI Toolkit built on Vue.js 2.0
  • material-ui - Material UI: Comprehensive React component library that implements Google’s Material Design.
  • ant-design-mobile - Essential UI blocks for building mobile web apps.
  • ag-grid - The best JavaScript Data Table for building Enterprise Applications.
  • components - Component infrastructure and Material Design components for Angular
  • material - Material design for AngularJS
  • angular-cli - CLI tool for Angular
  • Semantic-UI - Semantic is a UI component framework based around useful principles from natural language.
  • materialize - Materialize, a CSS Framework based on Material Design
  • pure - A set of small, responsive CSS modules that you can use in every web project.
  • weui - A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.
  • framework7 - Full featured HTML framework for building iOS & Android apps
  • jquery - jQuery JavaScript Library
  • zepto - Zepto.js is a minimalist JavaScript library for modern browsers, with a jQuery-compatible API
  • jQuery-menu-aim - jQuery plugin to fire events when user’s cursor aims at particular dropdown menu items.
  • downshift
  • react-modal
  • sonner - An opinionated toast component for React.
  • emoji-mart - 🏪 One component to pick them all
  • floating-ui - A JavaScript library to position floating elements and create interactions for them.
  • tui.grid - 🍞🔡 The Powerful Component to Display and Edit Data.
  • react-select-material-ui - A react SELECT component based on react-select and looking like a material-ui component
  • formik-mui - Bindings for using Formik with Material-UI
  • react-datasheet - Excel-like data grid (table) component for React
  • reach-ui - The Accessible Foundation for React Apps and Design Systems
  • react-kawaii - Cute SVG React Components
  • fluentui - Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
  • react-jsonschema-form - A React component for building Web forms from JSON Schema.
  • react-toastify - React notification made easy 🚀 !
  • blueprint - A React-based UI toolkit for the web
  • react-weui - weui for react
  • react-responsive - CSS media queries in react - for responsive design, and more.
  • react-dates - An easily internationalizable, mobile-friendly datepicker library for the web
  • recharts - Redefined chart library built with React and D3
  • react-native-elements - Cross-Platform React Native UI Toolkit
  • echarts-for-react - ⛳️ Apache ECharts components for React wrapper.
  • vue-swipe - A touch slider for vue.js.
  • vue-amap - 🌍 基于 Vue 2.x 和高德地图的地图组件
  • cube-ui - :large_orange_diamond: A fantastic mobile ui lib implement by Vue
  • vue-element-admin - :tada: A magical vue admin https://panjiachen.github.io/vue-element-admin
  • vue-awesome - Awesome SVG icon component for Vue.js, built-in with Font Awesome icons.
  • ng-nest - NG-NEST 是一个开源的 Web 应用程序框架,基于 Angular 和 Nest
  • angularfire - Angular + Firebase = ❤️
  • covalent - Covalent - A Design System for Teradata
  • ng-bootstrap - Angular powered Bootstrap
  • primeng - The Most Complete Angular UI Component Library
  • protractor - E2E test framework for Angular apps
  • devextreme-angular - Angular UI and data visualization components
  • solid-toast - Customizable Toast Notifications for SolidJS
  • suid - A port of Material-UI (MUI) built with SolidJS.

Icons (图标库)

  • twbs/icons
  • svgl - 🧩 A beautiful library with SVG logos. Built with Sveltekit & Tailwind CSS.
  • lucide - Beautiful & consistent icon toolkit made by the community.
  • dashboard-icons - Your definitive source for dashboard icons.
  • heroicons - A set of free MIT-licensed high-quality SVG icons for UI development.
  • fluentui-system-icons - Fluent System Icons are a collection of familiar, friendly and modern icons from Microsoft.
  • tabler-icons - A set of over 5800 free MIT-licensed high-quality SVG icons.
  • IconPark - 🍎Transform an SVG icon into multiple themes, and generate React icons,Vue icons,svg icons
  • feather - Simply beautiful open-source icons
  • simple-icons - SVG icons for popular brands.
  • icones - ⚡️ Icon Explorer with Instant searching, powered by Iconify
  • css.gg - 700+ Pure CSS, SVG & Figma UI Icons.
  • eva-icons - A pack of more than 480 beautifully crafted Open Source icons.
  • react-native-vector-icons - Customizable Icons for React Native.
  • material-design-icons - Material Design icons by Google (Material Symbols)
  • vivid - a JavaScript library which is built to easily customize and use the SVG Icons with a blaze.
  • Font-Awesome - The iconic SVG, font, and CSS toolkit

CSS 解决方案 (CSS Solutions)

  • tailwindcss
  • unocss
  • less
  • sass
  • stylus
  • neatcss - Rapidly build efficient sites with Neat, the minimalist css framework.
  • magick.css - magically playful, yet simple styling. all in one file.
  • open-props - CSS custom properties to help accelerate adaptive and consistent design.
  • css-hooks - Hook into advanced CSS features from native inline styles.
  • csstree - A tool set for CSS including fast detailed parser, walker, generator and lexer.
  • CSS-Inspiration - CSS Inspiration,在这里找到写 CSS 的灵感!
  • goober - 🥜 goober, a less than 1KB 🎉 css-in-js alternative with a familiar API
  • github-markdown-css - The minimal amount of CSS to replicate the GitHub Markdown style
  • modern-normalize - 🐒 Normalize browsers’ default style
  • NES.css - NES-style CSS Framework | ファミコン風CSSフレームワーク
  • css-modules - Documentation about css-modules
  • cssnano - A modular minifier, built on top of the PostCSS ecosystem.
  • iCSS - 不止于 CSS
  • fonts.css - 跨平台 CSS 中文字体解决方案
  • weui-wxss - A UI library by WeChat official design team, includes the most useful widgets/modules.
  • px2rem - According to one stylesheet, generate rem version and @1x, @2x and @3x stylesheet.
  • 30-seconds-of-css - Short CSS code snippets for all your development needs
  • rough - Create graphics with a hand-drawn, sketchy, appearance
  • CSS-Secrets - 📖 《CSS 揭秘》这本书的大本营。
  • mdb-ui-kit - Bootstrap 5 & Material Design UI KIT
  • normalize.css - A modern alternative to CSS resets
  • emotion
  • awesome-styled-components - A curated list of awesome styled-components resources 💅

数据管理 (Data Management)

数据请求与通信 (Data Fetching & Communication)

  • axios
  • sockjs-client
  • msw - Industry standard API mocking for JavaScript.
  • trpc - 🧙‍♀️ Move Fast and Break Nothing. End-to-end typesafe APIs made easy.
  • firecrawl - 🔥 Turn entire websites into LLM-ready markdown or structured data.
  • reader - Convert any URL to an LLM-friendly input.
  • msgpackr - Ultra-fast MessagePack implementation.
  • seroval - Stringify JS values
  • socket.io - Realtime application framework (Node.JS server)
  • json-server - Get a full fake REST API with zero coding.
  • ioredis - 🚀 A robust, performance-focused, and full-featured Redis client for Node.js.
  • protobuf.js - Protocol Buffers for JavaScript & TypeScript.
  • htmlparser2 - The fast & forgiving HTML and XML parser
  • apollo-client - :rocket: A fully-featured, production ready caching GraphQL client.
  • express-graphql - Create a GraphQL HTTP server with Express.
  • ky - 🌳 Tiny & elegant JavaScript HTTP client based on the Fetch API
  • socket.io-client - Realtime application framework (client)
  • swr - React Hooks for Data Fetching
  • query - 🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web.
  • insomnia - The open-source, cross-platform API client.
  • hoppscotch - Open source API development ecosystem.
  • stomp-websocket - Stomp client for Web browsers and node.js apps
  • grpc-node - gRPC for Node.js
  • node-fetch - A light-weight module that brings the Fetch API to Node.js
  • fetch - A window.fetch JavaScript polyfill.
  • got - 🌐 Human-friendly and powerful HTTP request library for Node.js
  • teambition-sdk - Isomorphic JavaScript SDK for Teambition APIs
  • graphql-js - A reference implementation of GraphQL for JavaScript
  • websocket - Package gorilla/websocket is a fast, well-tested and widely used WebSocket implementation for Go.
  • ws - Simple to use, blazing fast and thoroughly tested WebSocket client and server for Node.js
  • graphql-engine - Blazing fast, instant realtime GraphQL APIs on all your data.
  • awesome-graphql - Awesome list of GraphQL
  • graphql-playground - 🎮 GraphQL IDE for better development workflows
  • graphiql - GraphiQL & the GraphQL LSP Reference Ecosystem.
  • anyproxy - A fully configurable http/https proxy in NodeJS
  • node-soap - A SOAP client and server for node.js.
  • vue-resource - The HTTP client for Vue.js
  • request - 🏊🏾 Simplified HTTP request client.
  • superagent - Ajax for Node.js and browsers (JS HTTP client).
  • cheerio - The fast, flexible, and elegant library for parsing and manipulating HTML and XML.

数据校验与解析 (Data Validation & Parsing)

  • zod
  • yup
  • joi - The most powerful data validation library for JS
  • vest - Vest ✅ Declarative validations framework
  • ajv - The fastest JSON schema Validator.
  • validator.js - String validation
  • lol-html - Low output latency streaming HTML parser/rewriter.
  • formidable - The most used, flexible, fast and streaming parser for multipart form data.
  • markdown-it - Markdown parser, done right.
  • PapaParse - Fast and powerful CSV (delimited text) parser.
  • turndown - 🛏 An HTML to Markdown converter.
  • snarkdown - :smirk_cat: A snarky 1kb Markdown parser.
  • marked - A markdown parser and compiler.
  • orgajs - parse org-mode content into AST
  • mathjs - An extensive math library for JavaScript and Node.js

国际化 (Internationalization)

  • i18next - i18next: learn once - translate everywhere
  • formatjs - The monorepo home to all of the FormatJS related libraries.
  • js-lingui - 🌍 📖 A readable, automated, and optimized (3 kb) internationalization for JavaScript

状态管理 (State Management)

  • immutable
  • immer - Create the next immutable state by mutating the current one
  • signals - Manage state with style in every framework
  • daxus - Daxus is a server state management library for React.
  • zustand - 🐻 Bear necessities for state management in React
  • jotai - 👻 Primitive and flexible state management for React
  • redux-toolkit - The official, opinionated, batteries-included toolset for efficient Redux development
  • Recoil - Recoil is an experimental state management library for React apps.
  • immutable-js - Immutable persistent data collections for Javascript.
  • redux-observable - RxJS middleware for action side effects in Redux.
  • reselect - Selector library for Redux
  • redux - A JS library for predictable global state management
  • xstate - Actor-based state management & orchestration for complex app logic.
  • dva - 🌱 React and redux based, lightweight and elm-style framework.
  • platform - Reactive State for Angular
  • awesome-redux - Awesome list of Redux examples and middlewares
  • vue-rx - 👁️ RxJS integration for Vue.js.
  • awesome-rxjs - Awesome list of RxJS 5
  • unstated - State so simple, it goes without saying
  • mobx-react - React bindings for MobX
  • retalk - 🐤 The Simplest Redux
  • mobx - Simple, scalable state management.
  • vuex - 🗃️ Centralized State Management for Vue.js.
  • WatermelonDB - 🍉 Reactive & asynchronous database for powerful React and React Native apps ⚡️

路由管理 (Routing)

  • react-router
  • tanstack-router - 🤖 Fully typesafe Router for React (and friends).
  • wouter - 🥢 A minimalist-friendly ~2.1KB routing for React and Preact
  • chicane - A simple and safe router for React and TypeScript.
  • page.js - Micro client-side router inspired by the Express router
  • react-navigation - Routing and navigation for React Native and Web apps
  • vue-router - 🚦 The official router for Vue 2
  • history - Manage session history with JavaScript
  • path-to-regexp - Turn a path string such as /user/:name into a regular expression

表单处理 (Form Handling)

可视化与动画 (Visualization & Animation)

可视化 (Visualization)

  • echarts - Apache ECharts is a powerful, interactive charting and data visualization library.
  • chart.js - Simple HTML5 Charts using the tag
  • d3 - Bring data to life with SVG, Canvas and HTML.
  • fabric.js - Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
  • plotly.js - Open-source JavaScript charting library.
  • vega - A visualization grammar.
  • react-konva - React + Canvas = Love.
  • penrose - Create beautiful diagrams just by typing notation in plain text.
  • chartbrew - Open-source web platform used to create live reporting dashboards.
  • tldraw - whiteboard SDK / infinite canvas SDK
  • visx - 🐯 visx | visualization components
  • excalidraw - Virtual whiteboard for sketching hand-drawn like diagrams
  • billboard.js - 📊 Re-usable, easy interface JavaScript chart library based on D3.js
  • konva - Konva.js is an HTML5 Canvas JavaScript framework.
  • SandDance - Visually explore, understand, and present your data.
  • victory - A collection of composable React components for building interactive data visualizations
  • react-vis - Data Visualization Components
  • model-viewer - Easily display interactive 3D models on the web and in AR!
  • kepler.gl - Kepler.gl is a powerful open source geospatial analysis tool.
  • flowchart.js - Draws simple SVG flow chart diagrams.
  • react-diagrams - a super simple, no-nonsense diagramming library written in react.
  • G2 - 📊 The concise and progressive visualization grammar.
  • zdog - Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
  • highcharts - Highcharts JS, the JavaScript charting framework
  • tensorspace - Neural network 3D visualization framework.
  • zrender - A lightweight graphic library providing 2d draw for Apache ECharts
  • carbon - :black_heart: Create and share beautiful images of your source code
  • react-color - :art: Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more
  • js-code-to-svg-flowchart - js2flowchart - a visualization library to convert any JavaScript code into beautiful SVG flowchart.
  • pixijs - The HTML5 Creation Engine.
  • spritejs - A cross platform high-performance graphics system.
  • echarts-for-weixin - 基于 Apache ECharts 的微信小程序图表库
  • BizCharts - Powerful data visualization library based on G2 and React.
  • two.js - A renderer agnostic two-dimensional drawing api for the web.
  • css-doodle - 🎨 A web component for drawing patterns with CSS.
  • skia-canvas - A GPU-accelerated 2D graphics environment for Node.js
  • p5.js - p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code.
  • raphael - JavaScript Vector Library
  • pts - A library for visualization and creative-coding
  • cax - Canvas 渲染引擎,支持 SVG,兼容了小程序、小游戏和 Web

动画效果 (Animation)

  • anime - JavaScript animation engine
  • lottie-web - Render After Effects animations natively on Web, Android and iOS, and React Native.
  • GSAP - GSAP (GreenSock Animation Platform), a JavaScript animation library.
  • popmotion - Simple animation libraries for delightful user interfaces
  • svg.js
  • remotion - 🎥 Make videos programmatically with React
  • motion - A modern animation library for React and JavaScript
  • flipClock - 翻牌效果时钟的演示,包含原生JavaScript、Vue、React三种实现方式。
  • leonsans - Leon Sans is a geometric sans-serif typeface made with code.
  • lax.js - Simple & lightweight vanilla JavaScript library to create smooth & beautiful animations when you scroll.
  • aos - Animate on scroll library
  • mojs - The motion graphics toolbelt for the web
  • vivus - JavaScript library to make drawing animation on SVG
  • velocity - Accelerated JavaScript animation.
  • scrollreveal - Animate elements as they scroll into view.
  • particles.js - A lightweight JavaScript library for creating particles
  • paper.js - The Swiss Army Knife of Vector Graphics Scripting.
  • react-move - Beautiful, data-driven animations for React
  • react-spring - ✌️ A spring physics based React animation library
  • react-motion - A spring that solves your animation problems.
  • pulltorefresh.js - A quick and powerful plugin for your pull-to-refresh needs.
  • swiper - Most modern mobile touch slider.
  • animate.css - 🍿 A cross-browser library of CSS animations.
  • lottie-react-native - Lottie wrapper for React Native.

其他前端工具 (Other Frontend Tools)

  • monaco-editor - A browser based code editor
  • ace - Ace (Ajax.org Cloud9 Editor)
  • trix - A rich text editor for everyday writing
  • highlight.js - JavaScript syntax highlighter.
  • quill
  • cherry-markdown
  • plate - A rich-text editor powered by AI
  • roosterjs - roosterjs is a framework-independent javascript rich text editor.
  • woofmark - :dog2: Barking up the DOM tree. A modular, progressive, and beautiful Markdown and HTML editor
  • editor.js - A block-style editor with clean JSON output
  • hogan.js - A compiler for the Mustache templating language
  • tinymce - The world’s #1 JavaScript library for rich text editing.
  • wangEditor - wangEditor, open-source Web rich text editor
  • yn - A highly extensible Markdown editor.
  • tui.editor - 🍞📝 Markdown WYSIWYG Editor.
  • editor.md - The open source embeddable online markdown editor.
  • kindeditor - Try Lake, the new editor I developed
  • slate - A completely customizable framework for building rich text editors.
  • vue-quill-editor - @quilljs editor component for @vuejs(2)
  • yjs - A framework for shared data types.
  • firepad - Collaborative Text Editor Powered by Firebase

图像处理 (Image Processing)

  • upscayl - 🆙 Upscayl - #1 Free and Open Source AI Image Upscaler.
  • tui.image-editor - 🍞🎨 Full-featured photo image editor using canvas.
  • avif.js - 🚢 AVIF polyfill for the browser
  • avif-cli - Command line utility to convert images to AVIF
  • JavaScript-Load-Image - Load images provided as File or Blob objects or via URL.
  • squoosh - Make images smaller using best-in-class codecs, right in the browser.
  • svgo-gui - Node-WebKit based GUI for SVGO
  • UPNG.js - Fast and advanced PNG (APNG) decoder and encoder.
  • AlloyImage - 基于HTML5的专业级图像处理开源引擎。
  • html2canvas - Screenshots with JavaScript
  • sharp - High performance Node.js image processing.
  • jimp - An image processing library written entirely in JavaScript for Node.

拖拽功能 (Drag and Drop)

  • Sortable - Reorderable drag-and-drop lists for modern browsers and touch devices.
  • dnd-kit - The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
  • react-grid-layout - A draggable and resizable grid layout with responsive breakpoints, for React.
  • react-beautiful-dnd - Beautiful and accessible drag and drop for lists with React
  • react-sortable-hoc - A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️
  • react-dnd - Drag and Drop for React
  • draggable - The JavaScript Drag & Drop library your grandparents warned you about.
  • Luy-dragger - dragger with a render props
  • hammer.js - A javascript library for multi-touch gestures.
  • react-dropzone
  • react-draggable

虚拟滚动 (Virtual Scrolling)

用户体验增强 (User Experience Enhancements)

  • shepherd - Guide your users through a tour of your app
  • intro.js - Lightweight, user-friendly onboarding tour library
  • tota11y - an accessibility (a11y) visualization toolkit
  • quicklink - ⚡️Faster subsequent page-loads by prefetching in-viewport links.
  • react-a11y - Identifies accessibility issues in your React.js elements
  • waypoints - Waypoints is a library that makes it easy to execute a function whenever you scroll to an element.
  • fastclick - Polyfill to remove click delays on browsers with touch UIs
  • driver.js - A light-weight, no-dependency, vanilla JavaScript engine to drive user’s focus across the page
  • nprogress - For slim progress bars like on YouTube, Medium, etc

其他通用工具 (Other General Tools)

  • dayjs
  • date-fns
  • moment
  • luxon
  • tesseract - Pure Javascript OCR for more than 100 Languages.
  • leaflet - 🍃 JavaScript library for mobile-friendly interactive maps
  • fullpage - Create fullscreen pages fast and simple
  • localForage - 💾 Offline storage, improved. Wraps IndexedDB, WebSQL, and localStorage.
  • clipboard - ✂️ Modern copy to clipboard. No Flash. No dependencies.
  • async - Async utilities for node and the browser.
  • rxjs - A reactive programming library for JavaScript.
  • imaskjs - vanilla javascript input mask
  • pinyin - 汉字拼音转换工具
  • hotkeys-js - A robust Javascript library for capturing keyboard input.
  • chance - Chance - Random generator helper for JavaScript
  • randomColor - A color generator for JavaScript.
  • ProjectVisBug - FireBug for designers › Edit any webpage, in any state
  • postlight/parser - 📰 A readability tool for the web
  • color - Javascript color conversion and manipulation library
  • coordtransform - 百度地图、高德地图、腾讯地图、和真实坐标之间的互相转换
  • fontfaceobserver - Load fonts with confidence
  • xregexp - Extended JavaScript regular expressions
  • prom-client - Prometheus client for node.js
  • workerpool - Offload tasks to a pool of workers on node.js and in the browser
  • html-dom - Common tasks of managing HTML DOM with vanilla JavaScript.

跨端与桌面开发 (Cross-Platform & Desktop Development)

  • wails - Create beautiful applications using Go
  • dioxus - Fullstack app framework for web, desktop, mobile, and more.
  • nw.js - Call all Node.js modules directly from DOM/WebWorker.
  • tauri - Build smaller, faster, and more secure desktop and mobile applications with a web frontend.
  • vue-native-core - Vue Native is a framework to build cross platform native mobile apps using JavaScript
  • react-native-video - A
  • react-nodegui - Build performant, native and cross-platform desktop applications with native React.
  • lottie-react-native - Lottie wrapper for React Native.
  • react-native-vector-icons - Customizable Icons for React Native.
  • create-react-native-app - Create React Native apps that run on iOS, Android, and web
  • awesome-react-native - Awesome React Native components, news, tools, and learning material!
  • electron-webpack - Scripts and configurations to compile Electron applications using webpack
  • fiddle - :electron: 🚀 The easiest way to get started with Electron
  • electron-react-boilerplate - A Foundation for Scalable Cross-Platform Apps
  • update.electronjs.org - 📡 A free service that makes it easy for open-source Electron apps to update themselves.
  • forge - :electron: A complete tool for building and publishing Electron applications
  • awesome-electron - Useful resources for creating apps with Electron
  • rcedit - Command line tool to edit resources of exe
  • electron-sample-apps - Sample apps for Electron
  • react-unity-webgl - React Unity WebGL provides a modern solution for embedding Unity WebGL builds in your React Application.
  • react-native-modals - A react native modals library.
  • react-navigation - Routing and navigation for React Native and Web apps
  • react-native-elements - Cross-Platform React Native UI Toolkit
  • facebook/metro - 🚇 The JavaScript bundler for React Native
  • metro - 🚇 The JavaScript bundler for React Native
  • reactotron - A desktop app for inspecting your React JS and React Native projects.
  • react-native-debugger - The standalone app based on official debugger of React Native.
  • hermes - A JavaScript engine optimized for running React Native.

专业领域 (Specialized Domains)

音视频处理 (Audio/Video Processing)

  • xgplayer - A HTML5 video player.
  • APlayer
  • ffmpeg.wasm - FFmpeg for browser, powered by WebAssembly
  • DPlayer - :lollipop: Wow, such a lovely HTML5 danmaku video player
  • p5.js-sound - p5.sound brings the Processing approach to Web Audio and p5.js.
  • hls.js - HLS.js is a JavaScript library that plays HLS in browsers.
  • chimee - a video player framework aims to bring wonderful experience on browser
  • howler.js - Javascript audio library for the modern web.
  • Tone.js - A Web Audio framework for making interactive music in the browser.
  • flv.js - HTML5 FLV Player
  • video.js - Video.js - open source HTML5 video player

数据库 (Databases)

  • alasql - AlaSQL.js - JavaScript SQL database for browser and Node.js.
  • sharedb - Realtime database backend based on Operational Transformation (OT)
  • lowdb - Simple and fast JSON database
  • rxdb - A fast, local first, reactive Database for JavaScript Applications.
  • node-mongodb-native - The official MongoDB Node.js driver

2D 绘图 (2D Drawing)

  • two.js - A renderer agnostic two-dimensional drawing api for the web.
  • css-doodle - 🎨 A web component for drawing patterns with CSS.
  • skia-canvas - A GPU-accelerated 2D graphics environment for Node.js
  • p5.js - p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code.
  • raphael - JavaScript Vector Library
  • pts - A library for visualization and creative-coding
  • cax - Canvas 渲染引擎,支持 SVG,兼容了小程序、小游戏和 Web

3D/VR/游戏开发 (3D/VR/Game Development)

  • three.js - JavaScript 3D Library.
  • babylon.js - Babylon.js is a powerful, beautiful, simple, and open game and rendering engine.
  • cesium - An open-source JavaScript library for world-class 3D globes and maps :earth_americas:
  • aframe - :a: Web framework for building virtual reality experiences.
  • webxr
  • phaser - Phaser is a fun, free and fast 2D game framework for making HTML5 games.
  • matter.js - a 2D rigid body physics engine for the web.
  • potree
  • MiKaPo - Real-time MMD motion capture on Web
  • react-three-fiber - 🇨🇭 A React renderer for Three.js
  • phenomenon - ⚡️ A fast 2kB low-level WebGL API.

文件处理 (File Processing)

  • pdfjs - PDF Reader in JavaScript
  • jsPDF - Client-side JavaScript PDF generation.
  • exceljs - Excel Workbook Manager
  • xlsx - 📗 SheetJS Spreadsheet Data Toolkit.
  • jszip - Create, read and edit .zip files with Javascript
  • EasyTransfer - 🫣An open-source, anonymous, encrypted, and easy-to-use E2EE file transfer tool.
  • MinerU - A high-quality tool for convert PDF to Markdown and JSON.
  • spacedrive - Spacedrive is an open source cross-platform file explorer.
  • StreamSaver.js - StreamSaver writes stream to the filesystem directly asynchronous
  • FileSaver.js - An HTML5 saveAs() FileSaver implementation
  • resumable.js - A JavaScript library for providing multiple simultaneous, stable, fault-tolerant and resumable/restartable uploads.