3D

Markdown

• - A JavaScript 3D Library which makes WebGL simpler.](https://threejs.org/)
• - accelerated graphics, and is cross-platform, cross-browser, and tuned for dynamic-data visualization.](https://github.com/CesiumGS/cesium):
• - fast 3D framework for Web Applications 🥇 & Games 🎮. Based on Three.js](https://github.com/WhitestormJS/whs.js)

Admin

Web DB

• - element-admin is a production-ready front-end solution for admin interfaces. It is based on vue and uses the UI Toolkit element-ui.](https://github.com/PanJiaChen/vue-element-admin)

Alert

Save

• **sweetalert** - A beautiful replacement for JavaScript's "alert"

Animations

Save

• motion - Tiny size. Huge performance.
• ❗️ **Velocity.js** - Velocity is an animation engine with the same API as jQuery's *\$.animate()*. It works with and without jQuery. It's incredibly fast, and it features **color animation**, **transforms**, **loops**, **easings**, **SVG support**, and **scrolling**. It is the best of jQuery and CSS transitions combined
• :thumbsup::thumbsup::thumbsup:**AniJS** - A Library to Raise your Web Design without Coding
• - A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.](https://github.com/IanLunn/Hover/)
• - JavaScript Animation Engine](https://github.com/juliangarnier/anime)
• - Motion: A spring that solves your animation problems.](https://github.com/chenglou/react-motion)
• cssfx: A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by **CSS with minimal markup**. Completely open source and MIT licensed.
• - a Javascript and CSS library for smoothly transitioning numbers](https://github.com/HubSpot/odometer)
• - based animations](https://github.com/michaelvillar/dynamics.js)
• - loaders** - A collection of loading spinners animated with CSS](https://github.com/lukehaas/css-loaders)
• - js/theatre) - heatre.js is an animation library for high-fidelity motion graphics. It is designed to help you express detailed animation, enabling you to create intricate movement, and convey nuance.
• - Fast animations with Javascript and CSS transforms](https://github.com/daniel-lundin/snabbt.js)
• - platform lightweight 2D render object model. Draw graphics on a canvas through simple object-oriented dom-like API. Vue & React/Preact supported.](https://github.com/spritejs/spritejs)
• cssfx: A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by **CSS with minimal markup**. Completely open source and MIT licensed.
• cssfx: A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by **CSS with minimal markup**. Completely open source and MIT licensed.
• cssfx: A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by **CSS with minimal markup**. Completely open source and MIT licensed.
• cssfx: A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by **CSS with minimal markup**. Completely open source and MIT licensed.
• cssfx: A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by **CSS with minimal markup**. Completely open source and MIT licensed.
• cssfx: A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by **CSS with minimal markup**. Completely open source and MIT licensed.
• cssfx: A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by **CSS with minimal markup**. Completely open source and MIT licensed.
• cssfx: A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by **CSS with minimal markup**. Completely open source and MIT licensed.
• cssfx: A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by **CSS with minimal markup**. Completely open source and MIT licensed.
• cssfx: A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by **CSS with minimal markup**. Completely open source and MIT licensed.
• cssfx: A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by **CSS with minimal markup**. Completely open source and MIT licensed.
• cssfx: A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by **CSS with minimal markup**. Completely open source and MIT licensed.
• cssfx: A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by **CSS with minimal markup**. Completely open source and MIT licensed.
• cssfx: A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by **CSS with minimal markup**. Completely open source and MIT licensed.
• ❗️ lottie for web: Render After Effects animations natively on Web, Android and iOS, and React Native
• ❗️ **Velocity.js** - Velocity is an animation engine with the same API as jQuery's *\$.animate()*. It works with and without jQuery. It's incredibly fast, and it features **color animation**, **transforms**, **loops**, **easings**, **SVG support**, and **scrolling**. It is the best of jQuery and CSS transitions combined
• cssfx: A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by **CSS with minimal markup**. Completely open source and MIT licensed.
• **animate.css** - A cross-browser library of CSS animations. As easy to use as an easy thing

AR & VR

Web DB

• - 60fps on mobile!](https://github.com/jeromeetienne/AR.js/)
• - ar-js) - For location-based AR and marker-based AR, checkout AR.js https://github.com/AR-js-org/AR.js

Audio & Video

Desktop Apps

• - TS demuxer, MPEG1 video & MP2 audio decoders, WebGL & Canvas2D renderers and WebAudio sound output. JSMpeg can load static videos via Ajax and allows low latency streaming (~50ms) via WebSockets.
• - khan/RecordRTC/): WebRTC JavaScript Library for Audio+Video+Screen+Canvas (2D+3D animation) Recording
• - browser/platform audio control in as little as 12 KB. BSD licensed.](https://github.com/scottschiller/soundmanager2/)

Video Player

• - An HTML5 & Flash video player](https://github.com/videojs/video.js)
• - A beautiful html5 music player](https://github.com/DIYgod/APlayer)
• - A JavaScript H.264 decoder](https://github.com/mbebenita/Broadway)
• - May be the world's most popular embeddable media player](https://github.com/jwplayer/jwplayer)
• - The HTML5 video player for the web](https://github.com/flowplayer/flowplayer)

Authentication

Save

• **satellizer** - A token-based AngularJS Authentication

Boilerplate

Web DB

• react-firebase-starter: Boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay

CDN

IDE

• **JSDELIVR** - A free super-fast CDNfor developers and webmasters

Chart & Data Visualization

JavaScript

• **D3.js** - A JavaScript library for manipulating documents based on data using HTML, SVG and CSS
• goiojs: A Declarative **3D** Globe Data Visualization Library built with Three.js
• **deck.gl** - A WebGL-powered framework for visual exploratory data analysis of large datasets.
• mermaid - Mermaid lets you create diagrams and visualizations using text and code.
• **chartist-js** - Simple responsive charts
• d3-flame-graph: A D3.js plugin that produces flame graphs from hierarchical data.
• **vega** - A *visualization grammar*, a declarative format for creating, saving, and sharing interactive visualization designs. Describe data visualizations in a JSON format, and generate interactive views using either HTML5 Canvas or SVG.
• flowchartjs: Draws simple SVG flow chart diagrams from textual representation of the diagram
• rough: Create graphics with a hand-drawn, sketchy, appearance
• revogrid: Powerful data grid component built with StencilJS. Support Millions of cells and thousands columns easy and efficiently for fast data rendering. Easy to use.
• mapbox-gl-js: Mapbox GL JS is a JavaScript library for interactive, customizable vector maps on the web. It takes map styles that conform to the Mapbox Style Specification, applies them to vector tiles that conform to the Mapbox Vector Tile Specification, and renders them using WebGL.Mapbox GL JS is part of the cross-platform Mapbox GL ecosystem, which also includes compatible native SDKs for applications on Android, iOS, macOS, Qt, and React Native. Mapbox provides building blocks to add location features like maps, search, and navigation into any experience you create. To get started with GL JS or any of our other building blocks, sign up for a Mapbox account.
• textures.js: Textures.js is a JavaScript library for creating SVG patterns. Made on top of d3.js, it is designed for data visualization.
• **Highcharts** - Interactive JavaScript charts for your web pages
• **echarts** - An easy of adding intuitive, interactive, and highly customizable charts
• NVD3 - Re-usable charts for d3.js
• **c3.js** - D3-based reusable chart library

Clipboard

Markdown

• **clipboard.js** - A modern approach to copy text to clipboard. No Flash. No frameworks. Just 3kb gzipped

Color

Markdown

• - color](https://github.com/casesandberg/react-color): 1. 13 Different Pickers - Sketch, Photoshop, Chrome and many more; 2.Make Your Own - Use the building block components to make your own
• - TinyColor is a small, fast library for color manipulation and conversion in JavaScript. It allows many forms of input, while providing color conversions and other color utility functions. It has no dependencies.

Commerce Apps

CLI

• - Modern Commerce with Next.js and Stripe as the backend.

Compatibility

Markdown

• **html5shiv** - This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer
• **es6 promise** - A polyfill for ES6-style Promises

Compile & Pack

Desktop Apps

• - apps/tauri): Tauri is a framework for building tiny, blazing fast binaries for all major desktop platforms. Developers can integrate any front-end framework that compiles to HTML, JS and CSS for building their user interface. The backend of the application is a rust-sourced binary with an API that the front-end can interact with.

IDE

• FLOW IS A STATIC TYPE CHECKER FOR JAVASCRIPT.
• Parcel: Blazing fast, zero configuration web application bundler
• Prepack: A tool for making JavaScript code run faster.
• - project/swc): is a super-fast typescript / javascript compiler written in rust. It's a library for rust and javascript at the same time. If you are using swc from rust, see rustdoc and for most users, your entrypoint for using library will be parser.
• Prettier is an opinionated code formatter
• esbuild: An extremely fast JavaScript bundle

Webpack

• Happypack: Happiness in the form of faster webpack build times.
• webpack-bundle-analyzer: Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap

Conversational

Markdown

Datetime & Step

Static Code Checking(Lint)

• react-chrono-showcase
• react-chrono - A Flexible timeline component for React.

Designer

JavaScript

• web-component-designer - A Design Framework Webcomponent, to Design HTML using Webcomponents

Drag

Others

• - draggable-plus](https://github.com/Alfred-Skyblue/vue-draggable-plus) - Drag and drop sorting module, support Vue>=v3 or Vue>=2.7

Drag and Drop

Flip

• react-flip-move: Effortless animation between DOM changes (eg. list reordering) using the FLIP technique. - flip-move?style=social)

Others

• - A framework-agnostic tool that converts any layout into a drag-to-swap one with just a few lines of code
• **Dragula** - Browser support includes every sane browser and **IE7+**. Framework support includes vanilla JavaScript, Angular, and React
• Vue.Draggable: Vue component allowing drag-and-drop sorting in sync with View-Model. Based on Sortable.js
• Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap.
• ✨🌟 react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React
• VvvebJs: Drag and drop website builder javascript library. http://www.vvveb.com/vvvebjs/editor.html

Dropload

Web DB

• ximan/dropload: a javascript implementation of pull to refresh and up to loadmore

Editor

Code Highlight

Flip

• Backlight
• WebComponents.dev - browser IDE to code web components in isolation with 58 templates available, supporting stories and tests.
• - featured code and syntax highlighting to help with reading and editing complex code. (语雀早期方案)
• Editor.js Next generation block styled editor. Free. Use for pleasure.
• **draft.js** - A framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences
• ckeditor: Smart **WYSIWYG** HTML editor
• Quill: Your powerful rich text editor.
• react-quill
• - Prism is a lightweight, robust, and elegant syntax highlighting library. It's a spin-off project from Dabblet.
• - based editor directly in the browser. You can define nodes and workers that allow users to create instructions for processing data in your editor without a single line of code.](https://github.com/retejs/rete)
• **Ace** - A standalone code editor written in JavaScript
• **draft.js** - A framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences
• **pell** - pell is the simplest and smallest WYSIWYG text editor for web, with no dependencies
• tinymce: The world's most popular JavaScript library for rich text editing. Available for React, Vue and Angular
• Microsoft/monaco-editor: A browser based code editor which powers **VS Code**

Markdown

• - browser Markdown editor](https://github.com/benweet/stackedit)
• - it](https://github.com/markdown-it/markdown-it) - Markdown parser done right. Fast and easy to extend.
• - Markdown Editor](https://github.com/sparksuite/simplemde-markdown-editor): A drop-in JavaScript textarea replacement for writing beautiful and understandable Markdown. The WYSIWYG-esque editor allows users who may be less experienced with Markdown to use familiar toolbar buttons and shortcuts. In addition, the syntax is rendered while editing to clearly show the expected result. Headings are larger, emphasized words are italicized, links are underlined, etc. SimpleMDE is one of the first editors to feature both built-in autosaving and spell checking.

Notion-Like Editor

• - Editor](https://github.com/Darginec05/Yoopta-Editor) - Open-source rich-text editor that's truly rich. Install and use it in your project. Easy to to use and fully customizable. Just relax, we're here to solve all your challenges with rich-text editors.

Emoji

Markdown

• **twemoji** - Twitter Emoji for Everyone

Figerprint

Web DB

• Fingerprintjs2: odern & flexible browser fingerprinting library

File

Save

• 👍👍 FileSaver.js: An HTML5 saveAs() FileSaver implementation

Upload

• react-dropzone - Simple React hook to create a HTML5-compliant drag'n'drop zone for files.
• **jQuery File Upload Plugin**
• Web Uploader - 一个以 HTML5 为主 FLASH 为辅, 各种老旧浏览器兼容性好(IE6+ Andorid 4+ IOS 6+)

Fingerprinting

Markdown

• - Supercookie uses favicons to assign a unique identifier to website visitors.
• demo

Font

Static Code Checking(Lint)

• - source Chinese font derived from Fontworks' Klee One. 一款基于 FONTWORKS 的 Klee One 的开源中文字体。
• - font](https://github.com/wordshub/free-font): 汉字字体制作是一个庞大的工程，不同于西文字库，汉字常用字库表就有 6763 个汉字，GBK标准中共有20902 个汉字，而新出版的 GB_18064，共有六万多个字符。而且汉字的字形相对较为复杂，一套中文字体的完成需要耗费大量专业人士的精力和时间，我们倡导大家使用正版字体，为中文字体的制作创造一个良性的环境。
• - K/Cubic-11) - 俐方體11號是基於 M⁺ gothic 12r 衍生的開源繁體中文點陣字型，可用於像素風格的遊戲以及美術當中。

Framework

API

• - The Fastest Way to Build Svelte Apps
• - The Fullstack React Framework](https://github.com/blitz-js/blitz): "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails
• - Tiny 200b functional event emitter / pubsub.

Reactive

• **Cycle.js** - A functional and reactive JavaScript framework for predictable code

Functional

Web DB

• ramda: Practical functional Javascript

Game && Engine

Web DB

• phaser: Phaser is a fun, free and fast **2D** game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.

Guidelines

• Auto Lab @JingDong: Front-End Coding Guidelines, HTML, CSS, JavaScript, Images, Names
• 👍 A set of best practices for JavaScript projects - guidelines?style=social" height="16">
• **mdo code guide** Standards for developing flexible, durable, and sustainable HTML and CSS. - guide?style=social" height="16">

Highlight

Markdown

• **Highlight.js** - Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It works with pretty much any markup, doesn’t depend on any framework and has automatic language detection.
• **HR.js** - Tiny JavaScript plugin for highlighting and replacing text in the DOM

HTTP Client/Request

IDE

• reqwest: All over again. Includes support for xmlHttpRequest, JSONP, CORS, and CommonJS Promises A. It is also isomorphic allowing you to require('reqwest') in Node.js through the peer dependency xhr2, albeit the original intent of this library is for the browser. For a more thorough solution for Node.js, see mikeal/request.

Icon

Save

• icones.js
• iconify: Unified icons framework. One library, over 100,000 vector icons. Modern replacement for icon fonts. Fast, easy to use.
• **Titanic** - A collection of animated icons + javascript library.
• **ionicons** - The premium icon font for Ionic Framework

Images

Compression

• **image-compressor** - A simple JavaScript image compressor. Uses the Browser's native canvas.toBlobhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob API to do the compression work. General use this to precompress a client image file before upload it.
• google-guetzli: Guetzli is a JPEG encoder that aims for excellent compression density at high visual quality. Guetzli-generated images are typically 20-30% smaller than images of equivalent quality generated by libjpeg. Guetzli generates only sequential (nonprogressive) JPEGs due to faster decompression speeds they offer.

Filters

• Instagram.css - **Pure CSS Instagram filters**. You can add all these Instagram-like filters to your photos with using CSS only. Thanks to the CSSgram for inspiration.

Lazyload

• jquery_lazyload: Vanilla JavaScript plugin for lazyloading images
• verlok/lazyload: LazyLoad is a fast, lightweight and flexible script that speeds up your web application by loading images as they enter the viewport. It's written in plain "vanilla" JavaScript, uses IntersectionObserver, and supports responsive images. It's also SEO-friendly and it has some other notable features.

Lightbox gallery

• spotlight: Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.

Save

• **Anime.js** (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API.It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
• **BigScreen** - A simple library for using the JavaScript Fullscreen API
• :thumber **imagemagick** - Use ImageMagick to create, edit, compose, or convert bitmap images
• 👏 **graphicsmagick** - is the swiss army knife of image processing. Comprised of 267K physical lines of source code in the base package (or 1,225K including 3rd party libraries) it provides a robust and efficient collection of tools and libraries which support reading, writing, and manipulating an image in over 88 major formats including important formats like DPX, GIF, JPEG, JPEG-2000, PNG, PDF, PNM, and TIFF.
• watermarkjs: Watermarking for the browser
• mo · js is a javascript motion graphics library that is a fast, retina ready, modular and open source. In comparison to other libraries, it have a different syntax and code animation structure approach. The declarative API provides you a complete control over the animation, making it customizable with ease. The library provides built-in components to start animating from scratch like html, shape, swirl, burst and stagger, but also bring you tools to help craft your animation in a most natural way. Using mojs on your site will enhance the user experience, enrich your content visually and create delightful animations precisely.
• 👏 **graphicsmagick** - is the swiss army knife of image processing. Comprised of 267K physical lines of source code in the base package (or 1,225K including 3rd party libraries) it provides a robust and efficient collection of tools and libraries which support reading, writing, and manipulating an image in over 88 major formats including important formats like DPX, GIF, JPEG, JPEG-2000, PNG, PDF, PNM, and TIFF.
• **PhotoSwipe** - JavaScript image gallery for mobile and desktop

Sprite

• sprintf-js is a complete open source JavaScript sprintf implementation for the browser and Node.js.

Static Code Checking(Lint)

• - changelog/commitlint) - Lint commit messages:

Tools

• webp2jpg-online: Online image format converter, jpeg, jpg, PNG, Gif, webp, svg, ICO, bmp files into Jpeg, PNG, webp, ICO, gif files. The conversion can be done locally without uploading the file Online picture format converter, can convert jpeg, jpg, png, gif, webp, svg, ico, bmp files into jpeg, png, webp, ico, gif files. No need to upload files, conversion can be done locally
• plaiceholder

Landing page templates

CLI

• - in-aigc/pagen-ai-landing-page-template) - It is built with Next.js and Shadcn UI.

Loader

Save

• **css loader** - Simple loaders for your web applications using only one div and pure CSS
• https://loading.io/
• **Single Element CSS Spinners** - Each spinner consists of a single `div` with a class of `loader` and content text of "Loading...". The text is for screen readers and can be used as a fallback state for older browsers
• SpinKit: A collection of loading indicators animated with CSS

Low Code

Web DB

• - h5](https://github.com/ly525/luban-h5): Mobile Page Builder&Generator with Drag&Drop

Machine Learning & AI

JavaScript

• cube.js: Cube.js is an open-source analytical API platform. It is primarily used to build internal business intelligence tools or add customer-facing analytics to existing applications.
• Neuro.js is machine learning framework for building AI assistants and chat-bots. - systems/neuro?style=social)

Math

Markdown

• - KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web.

Web DB

Menus

Flip

• **Snap.js** - A Library for creating beautiful mobile shelfs in Javascript (Facebook and Path style side menus)

Mock

IDE

• **Easy-Mock** - 一个可视化，并且能快速生成 **模拟数据** 的持久化服务。
• **Mock** - A simulation data generator

Modal

Others

• **animatedModal.js** :strong:Beautiful! - A jQuery plugin to create a fullscreen modal with CSS3 transitions
• **vex** - A modern dialog library which is highly configurable and easy to style

New Feature Introduction

Markdown

• **intro.js** - A better way for new feature introduction and step-by-step users guide for your website and project

News and Training

CLI

• CSS-Tricks - A “website about making websites”
• Frontend Dogma - News and tools for frontend (and web) developers
• Frontend Focus - A weekly newsletter for frontend developers
• Frontend Masters - Web development articles
• SitePoint - Updates on current web development trends and technologies
• Smashing Magazine - Magazine for web designers and developers
• WebGlossary.info - A glossary of (thousands of) web development terms