awesome-frontend

发表于 更新于 分类于 ，

官方文档

Web技术

ECMAScript

CSS

  • 框架

    • tailwindcss - 一个功能类优先的 CSS 框架。
    • bulma - 基于 Flexbox 的现代CSS框架。

  • 动画

    • animate.css - 跨浏览器CSS动画库。简单易用。
    • Hover.css - 一个悬停效果的CSS3集合，可应用于链接、按钮、徽标、SVG、特色图像等。提供CSS、Sass等版本。
    • Loaders.css - 令人愉快的、注重性能的纯 css 加载动画。

数字

  • Numeral.js - 格式化和操作数字。
  • bignumber.js - 用于任意精度十进制和非十进制算术的 JavaScript 库。
  • decimal.js - JavaScript的任意精度的十进制类型。
  • big.js - 一个小型，快速的JavaScript库，用于任意精度的十进制算术运算。
  • round-to - 将数字四舍五入到指定的小数位数：1.234→1.2`。
  • unique-random - 生成连续唯一的随机数。
  • random-int - 生成随机整数。
  • random-float - 生成随机浮点数。

    数学运算

  • mathjs - 广泛的数学运算库。
  • ndarray - 多维数组。
  • algebra - 代数结构。
  • multimath - 在WebAssembly和JS中进行快速图像数学运算。

    日期 和 时间

  • moment - 解析、校验、操作和显示日期。
  • dayjs - 仅2KB，不可变的日期时间库。使用与Moment.js同样的API，Moment.js的替代库。
  • date-fns - 现代JavaScript日期工具库。
  • luxon - 用于处理日期和时间的库。
  • timeago.js - timeago.js是一个很小的（2.0 kb）库，用于使用 *** time ago 语句格式化日期。
    • timeago-react - 简单高效的react组件使用 *** time ago 语句格式化日期。 例如：’3 hours ago’。
  • ms - 毫秒转换工具。
  • dateformat - 日期格式化。
  • pretty-ms - 将毫秒转换为人类可读的字符串，如: 1337000000 → 15d 11h 23m 20s。
  • strftime - JavaScript版时间格式化Strftime。
  • date-utils - 用于Node.js和浏览器的日期垫片（Polyfills）。

    JavaScript框架

  • vue - Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
  • react - 用于构建用户界面的 JavaScript 库。 (你也许会喜欢 awesome-react)
  • angular - 现代 Web 开发平台。
  • svelte - Svelte 是一种全新的构建用户界面的方法，增强的Web应用程序。
  • preact - Preact 是 React 的轻量化替代方案，仅有 3KB。并且提供了相同的 ES6 API，还具有组件和 Virtual DOM。
  • petite-vue - Vue子集，优化渐进增强，仅 5kb。

    表单相关

    上传

  • uppy - Uppy 是一款时尚的模块化 JavaScript 文件上传器，可与任何应用程序无缝集成。 它快速、易于使用，让您可以考虑比搭建文件上传器更重要的问题。
  • dropzone - Dropzone 是一个易于使用的拖放库。 它支持图像预览并显示漂亮的进度条。
  • webuploader - WebUploader是一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。
  • plupload - Plupload 是用于构建文件上传器的 JavaScript API。 它支持多文件选择、文件过滤、分块上传、客户端图像缩小，并且在必要时可以回退到替代运行时，如 Flash 和 Silverlight。

    微前端

  • qiankun - 快速、简单和完整的微前端解决方案。
  • single-spa - 简单微前端的路由器。
  • emp - 这是一个面向未来的，基于Webpack5 Module Federation搭建的微前端解决方案。
  • piral - 使用微前端的下一代 Web 应用程序框架。
  • garfish - 一个功能强大的微前端框架。🚚

    Canvas

  • fabric.js - Javascript Canvas 库，SVG-to-Canvas（和 canvas-to-SVG）解析器。
  • konva - Konva.js是一个 HTML5 Canvas JavaScript 框架，它通过为桌面和移动应用程序启用画布交互来扩展2d上下文。

    WebGL

  • three.js - JavaScript 3D库。
  • pixijs - HTML5创意引擎：用最快、最灵活的2D WebGL渲染器创建漂亮的数码内容。
  • gl-matrix - 用于操作矩阵和向量，开发高性能的 WebGL 应用程序的JavaScript库。
  • Oasis Engine - Oasis Engine 是一个Web优先 和 移动端优先的高性能实时开发平台。

    动画

  • anime.js - JavaScript 动画引擎。
  • lottie-web - 在Web、Android和iOS以及React Native上渲染After Effects动画。
  • mojs - 用于Web的动态图形工具。
  • velocity - Velocity是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API，但它不依赖jQuery，可单独使用。
  • svg.js - 用于操作和使SVG动画的轻量级库。
  • dynamics.js - 创建基于物理的动画。
  • animsition - 一个简易的jQuery插件用于CSS页面切换过渡效果
  • TweenJS - 一个简单但功能强大的tweening/animation库。CreateJS库套件的一部分。

    视觉差

  • parallax - 对智能设备的方向做出响应的视觉差引擎。
  • rellax - 轻量、原生Javascript的视觉差库。

    数据可视化

你也许会喜欢 awesome-react数据可视化

  • 引擎
    • D3.js - 一个可以基于数据来操作文档的 JavaScript 库。 (你也许会喜欢 awesome-d3)
      • visx - 🐯 visx | 可视化组件。
    • Raphaël - Raphaël 是一个小型 JavaScript 库，它可以简化您在网站上操作矢量图形的工作。
    • zrender - 2d 绘图的轻量级图形库。
    • g - 强大的渲染引擎，为 G2 和 G6 提供 Canvas 和 SVG 绘制。
  • 通用
    • ECharts - 来自百度的强大图表库。
      • v-charts - 基于 Vue2.0 和 ECharts 封装的图表组件。
      • vue-echarts - 使用 Apache ECharts 5，同时支持 Vue.js 2/3。
    • plotly.js - 开源 JavaScript 图形库。
    • HighCharts - 为您的 Web 项目轻松创建交互式图表。
  • 图表
    • Chart.js - 使用 <canvas> 标签创建 HTML5 图表。
    • charts - 简单、响应式、零依赖的现代 SVG 图表。
    • G2 - JavaScript 中的图形语法。
      • BizCharts - 基于 G2 和 React 的强大数据可视化库。
      • g2plot - 一个交互式响应式的图表库。
      • viser - Viser 是一个适用于数据可视化工程师的工具。
    • ApexCharts - 基于 SVG 的交互式 JavaScript 图表。
    • F2 - 一个优雅的、交互式的、灵活的移动图表库。
    • uPlot - 小而快速的图表k库，可制作时序图、折线图、面积图、OHLC图和饼图。
    • flot - 基于jQuery的优雅的JavaScript图表库。
    • Peity - 渐进式 svg 饼图、圆环图、条形图和折线图。
  • 关系图
    • Sigma - Sigma 是一个专门用于关系图绘制的 JavaScript 库。
    • G6 - 便捷的关系数据可视化引擎与图分析工具。
      • graphin - 基于 G6 封装的React图分析应用组件。
    • cytoscape.js - 用于可视化和分析的图论（网络）库。
    • Springy - 一个力导图布局算法。
    • WebCola - Javascript版约束图形布局。
  • 地图
    • Leaflet - Leaflet 是对移动端友好的开源领先的交互式地图库。
    • deck.gl - WebGL2 支持的地理空间可视化层。
    • OpenLayers - 高性能、功能丰富的库，用于在 Web 上创建交互式地图。
    • cesium - 用于世界级 3D 地球仪和地图的开源 JavaScript 库。
    • L7 - 基于 WebGL 的开源大规模地理空间数据可视分析开发框架。
    • tangram - 用于创造性制图的WebGL地图绘制引擎。
  • 其他
    • mermaid - 以与 Markdown 类似的方式从文本生成图表和流程图。
    • js-sequence-diagrams - 从图表表示的文本中绘制简单的 SVG 序列图。

      游戏

  • phaser - Phaser 是一个有趣、免费且快速的 2D 游戏框架，用于为桌面和移动的浏览器制作 HTML5 游戏，支持 Canvas 和 WebGL 渲染。
  • Babylon.js - Babylon.js 是一个功能强大、美观、简单、开放的游戏和渲染引擎。
  • cocos2d-html5 - 用于 Web 浏览器的 Cocos2d。 使用 JavaScript 构建。
  • limejs - 网页和iOS的HTML5游戏框架。

    代码查看/代码高亮

  • highlight.js - 语言自动检测 和 零依赖的 JavaScript 语法高亮器。
  • prism - 轻量级、健壮、优雅的语法高亮。

    编辑器

  • 富文本编辑器
    • quill - 为兼容性和可扩展性而构建的现代所见即所得(WYSIWYG)编辑器。
    • slate - 一个完全可定制的框架，用于在浏览器中构建富文本编辑器。
    • draft.js - Draft.js 是一个 JavaScript 富文本编辑器框架，为 React 构建并由不可变模型支持。
    • medium-editor - 从Medium.com 所见即所得编辑器 克隆 而出。使用 contenteditable API 实现富文本解决方案。
    • wangEditor - 轻量级web富文本框。
    • tinymce - 用于富文本编辑的 JavaScript 库。 适用于 React、Vue 和 Angular。
    • ckeditor4 - 最好的企业级所见即所得编辑器。完全可定制的无数功能和插件。
    • simditor - 一个简单快速的所见即所得(WYSIWYG)编辑器。
    • ckeditor5 - 最好的企业级所见即所得编辑器。 完全可定制的无数功能和插件。
    • substance - 用于基于 Web 的内容编辑的 JavaScript 库。
    • neditor - 基于ueditor的更现代化的富文本编辑器，支持HTTPS。
  • 代码编辑器
    • monaco-editor - 基于浏览器端代码编辑器。
    • ace - Ace是使用JavaScript编写的独立代码编辑器。
    • CodeMirror - 浏览器端代码编辑器。
  • Markdown编辑器
    • stackedit - 浏览器端Markdown编辑器。
    • Editor.md - 开源可嵌入在线编辑器（组件）。
    • Markdown Plus - 具有额外功能的 Markdown 编辑器。
    • bytemd - 一个用 Svelte 构建 (hackable) 的 Markdown 编辑器组件。

      办公软件

  • Excel/电子表格
    • sheetjs - 电子表格数据工具箱。
    • handsontable - 带有电子表格外观的 JavaScript 数据网格。 适用于 React、Angular 和 Vue。
    • Luckysheet - Luckysheet，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。
    • exceljs - Excel工作表管理工具。
    • xlsx-populate - Excel XLSX生成和解析工具，可运行在Node和浏览器。
  • PDF
  • 演示/幻灯片
    • reveal.js - HTML展示框架。
    • impress.js - 它是一个基于现代浏览器中CSS3 transforms和transitions的强大功能的展示框架。
    • slidev - 为开发者准备的演示幻灯片。
    • deck.js - 现代HTML演示文稿。
    • bespoke.js - DIY展示的微框架。
    • shower - Shower HTML演示引擎。

      Web Components

(你也许喜欢 awesome-webcomponents)

  • polymer - Web Component 库。
  • stencil - Stencil 是一个简单的编译器，用于生成 Web Components和静态站点生成的渐进 Web 应用程序(PWA)。
  • lit - Lit是一个简易的用于构建快速、轻量的Web Components库。
  • skatejs - Skate 是基于 Web Components 标准的函数式响应式抽象，使您能够使用流行的视图库（如 React、Preact 和 LitHTML一样）编写小型、快速和可扩展的 Web 组件。
  • x-tag - 现代浏览器自定义组件。
  • slim.js - Slim是一个用于Web Components开发的超快，原生和优雅的库。