Markdown

• :pencil2:**codepen.io** - CodePen is a **social development environment**for front-end designers and developers. 👋
• - The tiny all-in-one development tool for modern web apps, in a single 2mb file with no dependencies.
• **fountainjs** - One Yeoman generator for all your frontend projects
• **Sizzy** - A tool for developing responsive websites crazy-fast
• :pencil2:**jsfiddle** - online web developemnt editor
• :+1::+1::+1:**Emmet** - the essential toolkit for web-developers
• **BrowserStack** - Instant access to all real mobile and desktop browsers. Say goodbye to your lab of devices and virtual machines.
• **LogRocket** - Records everything users do on your site, helping you reproduce bugs and fix issues faster.

Models & serializers

• - typed models and serializers from JSON, JSON Schema, TypeScript, and GraphQL queries, making it a breeze to work with JSON type-safely in many programming languages.

TypeScript

• - migrate is a tool for helping migrate code to TypeScript. It takes a JavaScript, or a partial TypeScript, project in and gives a compiling TypeScript project out.](https://github.com/airbnb/ts-migrate)

Debug

• - end developer tool for mobile web page.](https://github.com/Tencent/vConsole)

APIs & Mock

• API Blueprint is simple and accessible to everybody involved in the API lifecycle. Its syntax is concise yet expressive. With API Blueprint you can quickly design and prototype APIs to be created or document and test already deployed mission-critical APIs.

Deploy

• Vercel - Develop, Preview, Ship - user performance.
• Heroku

Monitor

• - SigNoz is an open-source APM. It helps developers monitor their applications & troubleshoot problems, an open-source alternative to DataDog, NewRelic, etc. 🔥 🖥. 👉 Open source Application Performance Monitoring (**APM**) & Observability tool.
• - Session replay for developers](https://github.com/openreplay/openreplay): The most advanced open-source session replay to build delightful web apps.

Docs

• - Docusaurus is a project for building, deploying, and maintaining open source project websites easily.
• - Good Documentation for JavaScript](https://github.com/esdoc/esdoc)

Images

• Make images smaller using best-in-class codecs, right in the browser. by GoogleChormeLabs

Icons

• iconmonstr: Discover 4486+ free icons in 310 collections
• - licensed high-quality SVG icons for you to use in your web projects. Each icon is designed on a 24x24 grid and a 2px stroke.](https://github.com/tabler/tabler-icons)

IDE

• - CodeTour is a Visual Studio Code extension, which allows you to record and play back guided walkthroughs of your codebases. It's like a table of contents, that can make it easier to onboard (or re-board!) to a new project/feature area, visualize bug reports, or understand the context of a code review/PR change. A "code tour" is simply a series of interactive steps, each of which are associated with a specific directory, or file/line, and include a description of the respective code. This allows developers to clone a repo, and then immediately start learning it, without needing to refer to a CONTRIBUTING.md file and/or rely on help from others. Tours can either be checked into a repo, to enable sharing with other contributors, or exported to a "tour file", which allows anyone to replay the same tour, without having to clone any code to do it!

Save

• 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.
• 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.

Web DB

• Fingerprintjs2: odern & flexible browser fingerprinting library

• - roadmap](https://github.com/kamranahmedse/developer-roadmap)
• - 2020](https://github.com/luruke/browser-2020) - This repo contains a non-exhaustive list of less-known features implemented in browsers today.

WEB Security

JavaScript

API

API

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

Reactive

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

Reactive

• Foundation: The most advanced responsive front-end framework in the world.

Reactive

• - loaded 6kb library to help relocate resource intensive scripts into a web worker, and off of the main thread. Its goal is to help speed up sites by dedicating the main thread to your code, and offloading third-party scripts to a web worker.](https://github.com/Builderio/partytown)

CSS

• - first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.](https://tailwindcss.com/)
• - Tailwind CSS Components: Adds component classes like btn, card and more to Tailwind CSS
• - A modern, HTML5-ready alternative to CSS resets. Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.](http://necolas.github.io/normalize.css/)
• - to-copy CSS effects](https://github.com/jolaleye/cssfx)
• - browser default styling of HTML elements alongside useful defaults. It is developed alongside normalize.css, which means every normalization is included, and every normalization and opinion are clearly marked and documented.](https://github.com/csstools/sanitize.css)
• - first CSS framework. If you are already familiar with Tailwind CSS, think about Windi CSS as an on-demanded alternative to Tailwind, which provides faster load times, fully compatible with Tailwind v2.0 and with a bunch of additional cool features.](https://github.com/windicss/windicss)
• - Micro CSS util class for applying inflated fluffy 3D claymorphism styles to elements. Fully customizable and extensible with CSS variables. SASS mixin is also included for even more styling options.
• - The Next Generation of CSS-in-JS](https://github.com/emotion-js/emotion): Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.

JavaScript

• - Collection of essential Vue Composition Utilities.
• createjs: A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5.
• - based loading when not.](https://github.com/CreateJS/PreloadJS)
• - unctional utility library - modern, simple, typed, powerful

JavaScript Utils

• - component-decorator](https://github.com/edwinm/web-component-decorator) - Lightweight TypeScript decorators for easier handling of attribute changes and cleaner code

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.

Save

• **css loader** - Simple loaders for your web applications using only one div and pure CSS
• https://loading.io/

Save

• icones.js
• iconify: Unified icons framework. One library, over 100,000 vector icons. Modern replacement for icon fonts. Fast, easy to use.

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.

Tools

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.

Static Code Checking(Lint)

• - changelog/commitlint) - Lint commit messages:

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 衍生的開源繁體中文點陣字型，可用於像素風格的遊戲以及美術當中。

Static Code Checking(Lint)

• react-chrono-showcase

Static Code Checking(Lint)

• **bootstrap-material-design** - Material Design for Bootstrap is a theme for Bootstrap 3 which lets you use the new [Google Material Design

Vue

• Muse-UI: Material Design UI library for Vuejs 2.0

React

• - ui](https://github.com/chakra-ui/chakra-ui): Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to create websites and apps.
• - ui-fabric-react: React components for building experiences for Office and Office 365.](https://github.com/OfficeDev/office-ui-fabric-react)

Out-of-box UI solution

• ANT DESIGN PRO: An out-of-box UI solution for enterprise applications as a React boilerplate.

WeChat

• MinUI: MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库，适用场景广，覆盖小程序原生框架，各种小程序组件主流框架等，并且提供了专门的命令行工具

Others

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

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)

Code Highlight

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.

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)

Markdown

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.

Markdown

Markdown

Markdown

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

Markdown

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

Web DB

IDE

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

IDE

• **Macaca** - Solution for Automation Test with Ease
• 👍 **jest** - facebook Delightful JavaScript Testing
• WebPageTest

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.

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.

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)

Video Player

• - browser solution to this API, falling back to use older implementations if the user's browser does not support the new API.

Video Player

• - like API.

Web DB

• PouchDB is an open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser.
• rxdb: A **realtime** Database for the Web

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>

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.

Web DB

• rrweb is an open source web session replay library, which provides easy-to-use APIs to record user's interactions and replay it remotely.(Powerd by TypeScript)

Web DB

• - core/emscripten)
• - WasmEdge (previously known as SSVM) is a lightweight, high-performance, and extensible WebAssembly runtime for ❗️**cloud native, edge, and decentralized applications**❗️. It is the fastest Wasm VM today. WasmEdge is an official sandbox project hosted by the CNCF. Its use cases include serverless apps, embedded functions, microservices, smart contracts, and IoT devices.

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)

Web DB

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

Framework

• - side applications.](https://github.com/nestjs/nest)

Midddleware

• - proxy-middleware: Node.js proxying made simple. Configure proxy middleware with ease for connect, express, browser-sync and many more.](https://github.com/chimurai/http-proxy-middleware)

CLI

• - This command line interface enables you to package your Node.js project into an executable that can be run even on devices without Node.js installed.
• - Simple CLI for compiling a Node.js module into a single file, together with all its dependencies, gcc-style.
• - This is a silly little command line tool for sexy fonts in the console. Give your cli some love

CLI

• - Next generation markdown editor](https://github.com/marktext/marktext): A simple and elegant open-source markdown editor that focused on speed and usability. Available for Linux, macOS and Windows.
• - JSON Visio is a tool that generates graph diagrams from JSON objects. These diagrams are much easier to navigate than the textual format and to make it even more convenient, the tool also allows you to search the nodes. Additionally, the generated diagrams can also be downloaded or clipboard as image.
• - The Next-Gen Knowledge Base to Replace Notion & Miro.
• - An open-source Notion UI built with Vue 3.
• - Wappalyzer identifies technologies on websites, such as CMS, web frameworks, ecommerce platforms, JavaScript libraries, analytics tools and [more](https://www.wappalyzer.com/technologies).
• - source behavioral analytics library written in typescript, with two key goals: privacy & performance.
• - Create beautiful images of your source code
• - The #1 Open-Source CRM.