React 前端导航

前端开源项目

WangEditor

基于 slate.js 和 snabbdom.js 实现的开源富文本编辑器,支持 JS、Vue 和 React 框架。开箱即用仅需几行代码,就能实现一个功能齐全的富文本编辑器。

富文本typescript
Vxe-Table

Vue 表格组件,支持增删改查、虚拟列表、大数据懒加载、数据校验、分页、弹窗等功能的 Vue 表格组件。

vue3typescript
Regex-Vis

在线可视化正则编辑器。该项目可将输入的正则表达式,自动生成对应的可视化图形,支持通过编辑图形节点修改正则表达式,以及对正则表达式进行测试等功能。

reacttypescript
Naive-Ui

仅支持 Vue3 的组件库。拥有完善的 TypeScript 类型推导的 Vue3 组件库,拥有 80 多种组件、中文文档,如果你想换换“口味”可以试试它。

vue3typescriptvite
Mjml

能够快速制作出响应式邮件的框架。邮件样式是一个让人头疼的问题,而通过这个项目制作的邮件,可以正常地显示在不同的邮件客户端。它还提供了在线编辑器,以及多种邮件模版和丰富的组件,能够帮你快速制作出精美、移动端优先、响应式的邮件。

dicebear

供设计师和开发者使用的头像库。可根据传入的字符串,自动生成对应用户头像的库,还有免费的接口服务。支持多种不同的风格,比如:像素、冒险家、标识等。

typescript
payload

TypeScript +Node.js+React+MongoDB 编写的 CMS 系统,提供了完整的内容管理功能。相较于传统的 CMS 系统 Django,它实现了前后端分离,让后端程序员可以更加专注于接口开发。

nodetypescriptreactmongoDB
FFCreator

轻量级的视频加工库。完全基于 Node.js 实现的快速制作视频的工具,能够根据添加的图片、视频和音乐,轻松地制作出新的视频。

node
visual-drag-demo

教你做低代码平台的项目。低代码平台的核心功能就是拖拽组件生成页面,该项目用 Vue 实现了一个可视化拖拽组件库,不仅如此还有配套讲解技术要点和原理分析的文章。

低代码vue
react-illustration-series

图解 React 源码。作者从 React 项目结构和运行机制入手,先介绍 React 的整体结构,然后讲解运行核心、数据管理以及用到的高频算法。篇篇到“肉”干货满满,推荐给想要深入学习 React 源码的小伙伴。

react
type-challenges

在线挑战 TypeScript 类型问题。该项目包含了不同难度的关于 TypeScript 类型的问题以及答案,通过这些挑战可以更好地理解 TypeScript 的类型系统。

typescript
bytemd

掘金社区开源的 Markdown 编辑器组件。基于 Svelte 构建的 Markdown 编辑器组件,功能齐全还可以通过插件扩展功能,默认安全且兼容 SSR,适用于 React、Vue 和 Angular 框架

Markdowntypescript
fortune-sheet

类似 Excel 的电子表格组件。使用简单无需繁琐的配置,内置多种 Excel 常用功能,并且支持在线协同编辑

Excelwebpackreactmongodb
xterm.js

功能齐全的终端前端组件。用 TypeScript 编写的前端组件,提供了完整的终端功能、支持鼠标事件、丰富的 Unicode 支持。在众多流行开源项目中都能看到它的身影,比如 VS Code、Hyper 和 Theia 等

typescriptwebpackexpress
WebGAL

易于开发的网页端视觉小说引擎。无需开发基础分分钟就能学会所有语法,立马开始创作自己的 Galgame。

typescriptvitereact
rubiks-cube

使用 Three.js 制作的 3D 魔方。

typescriptrollupthree.js
charts

简单、零依赖、响应式的 SVG 图表库

svgrollup
tinykeys

极小的键盘事件监听库

typescript
reveal.js

一款 HTML 演示框架。让你摆脱传统死板的 PPT 制作方法,可以方便地使用 HTML、Markdown 语言制作 PPT

gulprollup
chameleon

一端所见即多端所见。适应不同环境的跨端整体解决方案,支持 Web、小程序、快应用 等平台

小程序
lax.js

用于滚动时创建平滑和好看动画的库。简单轻量仅 4KB 大小,但功能齐全且灵活

log

浏览器 console.log 风格的 CSS 库

coffee-scriptgrunt
yn

面向程序员的本地 Markdown 笔记工具。一款适合程序员的笔记工具,拥有和其它工具不一样的体验。

typescriptviteelectronnodekoa
noclip.website

电子游戏关卡的数字博物馆。该项目包含了很多游戏的场景模型,可在线自由浏览。

typescriptwebpack
handle

汉字版 Wordle 游戏

typescriptvitevue3
lottery

年会抽奖程序。基于 Express + Three.js 的 3D 球体抽奖项目,能够自定义文字、图片和抽奖规则,还支持一键导入抽奖人员和导出抽奖结果。

nodeexpressthree.jswebpack
mometa

前端代码可视化编辑器。一款低代码辅助开发的工具,可通过拖拽的方式构建和编辑页面。

reacttypescriptwebpack低代码
resume

在线简历生成器。轻松实现在线简历,支持在线预览、编辑和下载 PDF 简历。

reacttypescriptgastby
js-sdsl

实用的 JavaScript 数据结构库。实现了 LinkList、Queue、Set、Map 等数据结构,严格的单元测试提供了正确性和性能的保证,可用于各种需要用到高级数据结构的场景

typescriptrollup
shepherd

用来引导用户浏览网站的 JavaScript 库

svelterollup
prisma

适用于 Node.js 和 TypeScript 的 ORM。支持主流数据库可用于开发 REST API、GraphQL API、gRPC API 等任何需要连接数据库的程序,项目还包括了数据迁移工具和管理数据的 GUI 工具

nodetypescript
arco-design

基于 ArcoDesign 的 React/Vue UI 组件库。包含 60 多个开箱即用的高质量组件,还提供了可视化的样式配置平台,可用于快速构建企业级管理后台。

reactvue3webpack
context-note

带上下文的网页笔记浏览器插件。大多数时候我们使用书签来标记网站链接,但在一些特定的场景中比如阅读文章和浏览信息时,就需要对特定的句子及其上下文进行标记。这个项目提取了信息的内容和位置,有上下文容易回顾,一键跳转方便溯源

vue3vite
S2

高性能多维交叉分析表格工具。提供 KPI 趋势表、占比表、对比表等多种表格样式,开箱即用上手简单拥有详细的文档。通过按需渲染和虚拟滚动等方式,实现在百万级数据量秒级渲染、滚动不卡顿。

reactvue3typescriptviterollup
colorfu

自动生成由文字/颜色/图片/纹理元素组成的壁纸。

vue2
vue-color-avatar

纯前端实现的矢量风格头像生成网站。可以通过搭配不同的素材,生成个性化头像。该项目使用 Vite + Vue3 开发,能够帮助前端初学者熟悉 Vue3 语法并掌握项目搭建的相关知识

vue3vite
automa

通过图形化界面拖拽功能模块,实现浏览器自动操作的扩展工具。轻松实现自动填表、截图、定时执行等操作。让浏览器自动完成预设工作流的插件,从而减少重复性操作提高效率

vue3webpack
Leaflet

对移动端友好的交互式地图 JavaScript 库。它久负盛名且简单易用,别看它小但包含了地图常用功能。Leaflet 极易上手,几行代码就能实现地图功能,且支持多种地图数据源。很多大厂都在用它,可放心在生产环境中使用

rollup
lexer

在线编程语言词法分析器。基于 DFA 算法实现支持多语言扩展,可用于代码编辑器的语法高亮等场景。同时项目的代码量少还有详细的源码讲解文档,适合对词法分析感兴趣的小伙伴学习。

city-roads

自动生成任意城市的道路图。采用 OpenStreetMap 的免费数据实现城市道路可视化,还支持导出图片用这些图片做壁纸感觉很酷

vue3vite
towxml

可将 HTML 和 Markdown 转为微信小程序 WXML 的库。用于解决在微信小程序上 Markdown、HTML 不能直接渲染的问题

小程序
React95

复古的 Win95 样式 React 组件。

reactrollup
sharedb

基于 JSON 数据 OT 算法的实时数据库。简单来说就是实时协同数据框架,可用来实现当页面因用户操作发生数据变化时,实时把数据同步展示到其它用户页面上,其中 OT 算法就是解决此协同过程中问题的通用算法。常见的场景比如:多用户之间的状态同步、在线协作文档、离线后数据改动同步等

node
30-Days-Of-JavaScript

30 天 JavaScript 编程挑战。该教程虽然是英文教程但是图文并茂通俗易通,内容循序渐进包含练习题,适合零基础想要学习 JavaScript 的同学

YesPlayMusic

高颜值的第三方网易云播放器。它不仅拥有简洁美观的外观,还有丰富的功能

electronvue2
javascript

Airbnb 开源的 JavaScript 风格指南

react
spy-debugger

远程调试手机页面和抓包的工具。操作简单仅需手机和电脑在同一个 WIFI 下,即可在实现真机调试页面

nodeexpress
nanoid

用于生成随机 ID 的 JS 库

nexe

可将 Node.js 应用程序,打包成一个可执行文件的命令行工具

nodetypescript
rough

手绘风格的图形库。可以让你用素描、类似手绘的风格来绘制图形

typescriptrollupcanvas
cnchar

小巧的汉字处理 JS 库。支持简体字拼音、多音字、笔画数等功能

typescriptvu2webpackgulp
limu

limu is short of love immutable, born for efficient creation and operation of immutable object.

typescriptrollup
CSIJS

CSI.JS是一个前端日志系统,它将错误信息记录于本地localStorage中。无任何依赖、无入侵性。使用非常简单,很容易引入你的系统中,而且不会造成任何影响。 它可以帮你快速重建犯罪现场。

rollup
concent

内置依赖收集,可预测、零入侵、渐进式、高性能的react状态管理框架,提炼了各大框架精华和社区公认的最佳实践,通过良好的模块设计,既保证最佳性能又允许用户灵活的解耦UI逻辑与业务逻辑,从整体上提高代码的可读性、可维护性和可扩展性。

reactrollup
Awesome-1kb

收集各种小巧而精致的 1kb javascript小库,麻雀虽小五脏俱全。

InkPaint

InkPaint是一个运行在node.js端的轻量级Canvas图形渲染库。使用InkPaint可以在服务端动态合成各种图片、pdf等。同时,InkPaint是node.js和浏览器之间的通用库,在浏览器端依然可以正常运行。

nodecanvas
run-wasm

run-wasm 是一个易于使用的工具,用于在浏览器中运行基于 WASM 的代码执行。 该项目的目标是构建一种通过 WebAssembly 在浏览器中执行各种编程语言的简单方法。 人们应该能够使用这个项目轻松地在他们的网站上嵌入可执行代码片段!

typescript
TransX

一个小巧玲珑的 vue 组件切换动画库, 支持 10 几种动画切换方式, 效果十分炫酷并且非常轻量哦~

vue3
C2F

对于初学者来说,flutter widget的复杂样式代码真的很难记。我们想建立一个在线将css样式代码转换为flutter样式代码的网站。它可以帮助那些 Web 开发人员快速入门flutter。

reactflutter
视搭

一个视频可视化搭建项目。您可以通过简单的拖拽方式快速生产一个短视频,使用方式就像易企秀或MAKA等 h5 搭建工具一样的简单。

vue2nodekoa
zx

2021年度流行项目是 zx,一个由谷歌推出的全新的工具,可用于以 JavaScript 或 TypeScript 编写简单的命令行脚本。基本上它可以让你在代码中嵌入任何 bash 表达式(ls, cat, git...等任何命令!),并 await 使用 JavaScript 模板字符串 的结果。

node
tauri

用于为所有主要桌面平台构建超小型快速二进制文件的框架。开发人员可以集成可编译为 HTML,JS 和 CSS 的任何前端框架,以构建其用户界面。该应用程序的后端是带有锈源的二进制文件,带有可与前端进行交互的 API。Tauri 应用程序中的用户界面目前 winit 在 macOS 和 Windows 上以及 gtk 在 Linux 上通过 Tauri-team 培养并维护的 WRY 作为窗口处理库加以利用,WRY 可以利用 macOS 上的 WebKit,Windows 和 Linux 上的 WebKitGTK。

typescript
nocodb

NocoDB 是 Airtable 的开源替代方案,可以“一键”将 MySQL、PostgreSQL、SQL Server、SQLite 和 MariaDB 转换为智能电子表格,提供了丰富的电子表格界面,支持搜索、排序、过滤、隐藏列等功能。

nodeexpress
slidev

为开发者打造的演示文稿工具。Slidev (slide + dev, /slʌɪdɪv/) 是基于 Web 的幻灯片制作和演示工具。它旨在让开发者专注在 Markdown 中编写内容,同时拥有支持 HTML 和 Vue 组件的能力,并且能够呈现像素级完美的布局,还在你的演讲稿中内置了互动的演示样例。它使用了功能丰富的 markdown 文件来生成精美的幻灯片,具有即时重载的体验。它还拥有很多内置的集成功能,如实时编码、导出 PDF、演讲录制等。由于 Slidev 是由 web 驱动的,因此你可以使用它进行任何操作 —— 具有无限的可能性。

typescript
slate

用于构建富文本编辑器的完全可定制的框架。

typescriptreactrollup
react-query

在 React 中获取、缓存和更新异步数据的钩子。

typescriptreactrollup
react-hook-form

用于表单状态管理和验证的 React Hooks (Web + React Native)。

typescriptreactrollup
awesome-react-components

React 组件和库的精选列表。

react
docusaurus

快速构建以内容为核心的最佳网站。Markdown 驱动、使用 React 构建、翻译就绪。

reacttypescript
formik

Formik 是世界上最流行的 React 和 React Native 开源表单库。

reactreact nativetypescript
preact

具有相同现代 API 的快速 3kB React 替代方案。组件和虚拟 DOM。

react
gatsby

Gatsby是一个基于反应的自由和开源框架,帮助开发人员构建炽热的快速网站和应用程序。它将动态呈现的网站的控制和可扩展性与静态站点生成的速度结合起来,创建了一个全新的可能性网络。

reacttypescript
react-use

必不可少的 React Hooks 集合. 移植 libreact。

reacttypescript
React Location

基于 React 的框架,用于构建由 Shopify 驱动的动态自定义店面。

reacttypescriptrollup
Programming Fonts

在浏览器中在线测试驱动编程字体。所有字体都集中在一个地方。

Hieroglyphy

用于将字符串、数字和脚本转换为 ()[]{}+! 的等效序列的工具和 javascript 库!在浏览器中运行的字符。

next-cms-ghost

使用 Next.js 和 Ghost CMS 发布快速的博客。

nodenexttypescriptreact
just

一个只做一件事的无依赖 JavaScript 函数库。

nodetypescriptrollup
free-programming-books

免费可用编程书籍列表,它已经成长为GitHub最受欢迎的存储库之一。

budibase

Budibase 是一个开源的低代码平台,用于在几分钟内创建内部应用程序。支持 PostgreSQL, MySQL, MSSQL, MongoDB, Rest API, Docker, K8s 🚀

typescriptsvelterollup
OpenUI5

OpenUI5 可让您构建企业级 Web 应用程序,响应所有设备,几乎可以在您选择的任何浏览器上运行。

gruntcoffee-script
mercurius

使用 Fastify 实现 GraphQL 服务器和网关。

nodetypescriptFastify
GitHub Readme Stats

为您的 GitHub 自述文件动态生成的统计信息

Spark Joy

为你的产品添加设计风格、用户满意度和奇思妙想的简单方法!

Dripsy

React Native + Web 的响应式、无样式的 UI 原语。

typescriptreact native
it

一组实用程序,用于让使用可迭代对象更易于使用。

typescriptlerna
hydrogen

基于 React 的框架,用于构建由 Shopify 驱动的动态自定义店面。

typescriptreact
quicktype

quicktype 从 JSON、JSON Schema、TypeScript 和 GraphQL 查询生成强类型模型和序列化程序,这使得在许多编程语言中以类型安全的方式使用 JSON 变得轻而易举。

typescriptnode
Checka11y.css

一个CSS样式表,可以快速突出所有关注的内容。

css
animated-emojis

带有动画表情符号的库。

css
use-mui

Material UI 的 React 钩子。对于每个状态,每个钩子都接受一个可选的默认状态并返回一个状态设置实用程序函数。

reacttypescriptrollup
typescript-boilerplate

现代 TypeScript 项目设置,适用于 Node.js 和浏览器(使用 esbuild)。

nodetypescript
ml5-library

ml5.js 旨在让机器学习对广大艺术家、创意编码人员和学生来说变得容易上手。该库提供对浏览器中机器学习算法和模型的访问,构建在 TensorFlow.js 之上。

webpack
FrontEndCollection

前端软件工程师注意事项。涵盖常见的数据结构和算法、基本的 Web 概念、HTML & CSS & JavaScript。

fragstore

Tiny (~800 B),简单易用的库来管理你的 React 状态。store 更新后 -> 仅呈现使用更新属性的组件。

reacttypescript
headlessui

完全无样式、完全可访问的 UI 组件,旨在与 Tailwind CSS 完美集成。

react
react-hooks-in-svelte

在 Svelte 中使用 React hooks 的示例.

reactsvelterollup
sucrase

Sucrase 而不是编译大量的 JS 功能,以便能够在 Internet Explorer 中使用最近的浏览器或最近的 Node.js 版本。

typescriptnode
sharedb

基于 JSON 数据 OT 算法的实时数据库。简单来说就是实时协同数据框架,可用来实现当页面因用户操作发生数据变化时,实时把数据同步展示到其它用户页面上,其中 OT 算法就是解决此协同过程中问题的通用算法。常见的场景比如:多用户之间的状态同步、在线协作文档、离线后数据改动同步等

node
30-Days-Of-JavaScript

30 天 JavaScript 编程挑战。该教程虽然是英文教程但是图文并茂通俗易通,内容循序渐进包含练习题,适合零基础想要学习 JavaScript 的同学

YesPlayMusic(Vue版)

高颜值的第三方网易云播放器。它不仅拥有简洁美观的外观,还有丰富的功能

vue2
JavaScript风格指南

Airbnb 开源的 JavaScript 风格指南。

react
react-beautiful-dnd

漂亮易用的 React 列表拖拽库。

react
flat

前后端完全开源、功能丰富的在线教室项目。通过它可以快速完成支持多人视频、语音、白板互动、录制回放等功能的在线教室。

reacttypescriptvitewebpackrollup
milkdown

一款清爽所见即所得的 Markdown 编辑器。不同于大多数 Markdown 编辑器它是插件驱动的,类似开源可自由扩展的 Typora。项目由 prosemirror+remark 构建,入门开发者从中可以学习到如何使用 prosemirror 来开发富文本编辑器,以及如何设计一个针对编辑器的插件系统。

typescriptviterollup
iDataV

大屏数据可视化项目集合。

Didact

教你从零写一个 React 框架。通过一系列的文章和代码,教授如何实现 React 框架,从而能够更好的理解 React。

react
木及简历(React)

一款用 `Markdown`就能写出好看简历(resume)的在线工具。

reactwebpack
后台数据管理系统

react+redux+express+MongoDB,又一套 CRUD(增删改查)后台数据管理系统,只不过用到的技术栈比较新(目前我所理解的最佳实践),具有一定的参考意义。

nodeexpressreactmongodb
纯浏览器图片压缩工具

react实现的浏览器端图片压缩工具

reactvite
中国古典颜色在线手册

使用 React 构建,支持 PWA

reactwebpack
React实现甜(Tu)言(Wei)蜜(Qing)语(Hua)生成器

土味情话,在线生成。

reactwebpack
React弹幕

基于 CSS3 Animation,使用 React 构建,可扩展,高性能。

reactrollup
局域网聊天室

koa + vue开发的局域网聊天室,支持群聊、文件传输、粘贴截图、文件列表、聊天记录(本地存储文本文件模拟数据库)等模块

nodekoa2vue2
node-jenkins

使用nodejs模拟的jenkins打包vue项目功能

nodekoa2
成都房协网数据分析

前端React+后端Koa实现的成都房协网数据分析网站。

nodekoa2reactwebpacktypescript
全网影视采集解析播放的开源项目

技术栈是 koa + swig模板引擎 + jQuery

nodekoa2
婚礼大屏互动,微信请柬一站式解决方案

项目分为微信端和大屏端。微信端可以作为电子请柬提前分享给大家,部署的服务器域名最好有备案,不然容易被屏蔽。大屏端是放在婚礼现场的大屏幕上,现场的宾客可以刷弹幕上墙,并且有照片播放页,迎宾页,抽奖页面。另外微信端也作为现场互动的入口,扫码签到可参与抽奖,发弹幕送祝福上大屏幕。

gruntnode
铜钟聚合音乐(React)

一个网站,三家平台的音乐

expressnodereact