Skip to content

前端工具库

SkeletOnReact - 快速生成动画骨架加载组件

该工具可以轻松创建动画骨架屏幕组件,取代通常的加载,为用户提供更好的体验,为页面提供线框,如内容和图像的占位符框。支持 React、React Native、Vue 和 HTML。

https://skeletonreact.com/

instant.page - 实时预加载

一行代码提速你的网站转化,在用户单击页面之前预加载页面,一般人鼠标放到要点击的链接上,从真正点击下去有预计 100ms 的瞬间延迟,利用此时间差去预加载。

vizzu-lib - 数据可视化动画库

数据可视化动画库,功能强大,用来制作数据图表的动画。

https://lib.vizzuhq.com/latest/

Termir - 命令行应用

Temir 提供了与 Vue 在浏览器基于组件的 UI 构建体验相同,但是它面向的是命令行应用。

https://github.com/webfansplz/temir/blob/main/README.zh-CN.md

cors-anywhere - Node 反向代理

一个 NodeJS 反向代理,它将 CORS 头添加到代理的请求中。

https://instant.page/

Vime - 播放器

一个可定制的、可扩展的、可访问的、与框架无关的播放器。

https://vimejs.com/

filters.css - 滤镜样式库

一个可以实现超多中颜色滤镜的纯 CSS 样式库

https://bansal.io/filters-css#blur

Visx - 低代码可视化组件集

Visx 是 Airbnb 开源的可复用的低代码可视化组件集,将 D3 的强大功能与 React 虚拟 DOM 更新的优势结合起来。

https://github.com/airbnb/visx

Zipson - Json 压缩工具

Zipson 是一个让原本 JSON.parse/stringify 增加了压缩和流媒体支持的临时替代方案,感觉前后端传输中,接口先压缩吐出数据,前端通过解压获取 Json,可让传输数据变小 50%

https://github.com/jgranstrom/zipson

BlurHash - 图片懒加载占位符

BlurHash 是将原有会会的占位图,变成模糊漂亮的彩色

https://github.com/woltapp/blurhash

FingerprintJS - 浏览器指纹库

灵活的浏览器指纹库,从浏览器指纹生成用户的唯一标识符

https://github.com/fingerprintjs/fingerprintjs

react-dev-inspector - 点击页面元素在编辑器打开对应代码

只需简单点击即可直接从浏览器 React 组件跳到本地 IDE 代码

https://github.com/zthxxx/react-dev-inspector

Whirl - CSS 动画效果

具有 108 种 Loading 动画效果

https://whirl.netlify.app/

roughViz - 手绘风格图标库

可重复使用的 JavaScript 库,用于在浏览器中创建粗略/手绘样式的图表。

https://github.com/jwilber/roughViz

better-scroll - 下拉刷新

BetterScroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。

https://github.com/ustbhuangyi/better-scroll

x-render - 表单、表格、图表解决方法

阿里 - 很易用的中后台「表单 / 表格 / 图表」解决方案

https://xrender.fun

headlessui - 无样式组件库

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

https://headlessui.com/

lucky-canvas - 抽奖插件

一个基于 JavaScript 的跨平台 ( 大转盘 / 九宫格 / 老虎机 ) 抽奖插件

https://100px.net/

styled-components - 构建样式化组件

提供了一种在 React 应用中使用 CSS-in-JS 的方式,使得组件的样式可以与组件本身一起定义和管理

https://github.com/styled-components/styled-components

postcss-pxtorem - 移动端适配

一款 PostCSS 插件,用于将 px 单位转化为 rem 单位

https://github.com/cuth/postcss-pxtorem

F2ELint - 《阿里巴巴前端规约》的配套 Lint 工具

以为项目一键接入规约、一键扫描和修复规约问题,保障项目的编码规范和代码质量。

https://www.npmjs.com/package/f2elint

react-three-fiber - Three.js 的 React 渲染器

使用 react 来写 three.js

https://github.com/pmndrs/react-three-fiber

中文网字计划 - Web Font 的形式为网站开发者提供美丽字体

中文网字计划是收录众多中文字体并通过 Web Font 的形式为网站开发者提供美丽字体的项目。

https://chinese-font.netlify.app/

spy-debugger - 调试、抓包工具

微信调试,各种 WebView 样式调试、手机浏览器的页面真机调试。便捷的远程调试手机页面、抓包工具,支持:HTTP/HTTPS,无需 USB 连接设备。

https://github.com/wuchangming/spy-debugger

remark42 - 轻量的评论插件

可以方便插入到现有博客系统中

https://remark42.com/demo/

CSS Layout - CSS 生成工具

自定义 grid 布局

https://layout.bradwoods.io/customize

mo.js - 运动效果的动画库

一个写运动效果的动画库

https://mojs.github.io/

gantt - 甘特图组件

一个简单、交互式、现代的网络甘特图库

https://github.com/frappe/gantt

emoji-mart - 自定义表情

一个组件来挑选所有组件

https://github.com/missive/emoji-mart

fuzzysort - 模糊文本搜索的 JS 库

JavaScript 的快速 SublimeText 模糊搜索

https://github.com/farzher/fuzzysort

bun - 高性能 JS 运行时

使用 Bun 可以更快地构建

https://bun.sh/

qnm - node_modules 目录的 cli 实用程序

用于查询 node_modules 目录的 cli 实用程序

https://github.com/ranyitz/qnm

Million - 轻巧的 React 替代品

一款非常快速和轻量级(< 4kb)的虚拟 DOM,它使 React 组件的速度提高了 70%

https://millionjs.org/

Gimli Tailwind - 调试 Tailwind 工具

一款调试 TailwindCSS 的谷歌浏览器工具

https://chrome.google.com/webstore/detail/gimli-tailwind/fojckembkmaoehhmkiomebhkcengcljl