Skip to content

Latest commit

 

History

History
388 lines (340 loc) · 31.4 KB

javascript.md

File metadata and controls

388 lines (340 loc) · 31.4 KB
Raw

JavaScript

Template Engine

  • eta - Embedded JS template engine for Node, Deno, and the browser. Lighweight, fast, and pluggable. Written in TypeScript.

Headless UI

  • ark - Universal headless UI components for the web. Powered by Zag.js.

UI Components

  • daisyui - The most popular, free and open-source Tailwind CSS component library.
  • Tailwind-Elements - Huge collection of Tailwind components, sections and templates.
  • hyperui - Free Tailwind CSS components for application UI, ecommerce and marketing with support for dark mode, RTL and Alpine JS.
  • pines - The Pines UI library.
  • floatui - Beautiful and responsive UI components and templates for React and Vue (soon) with Tailwind CSS.
  • framework7 - Full featured HTML framework for building iOS & Android apps.
  • Fancyapps UI - A library of JavaScript UI components, includes the best lightbox - Fancybox5.
  • park-ui - Beautifully designed components built on Ark UI that work for the JS and CSS frameworks of your choice.
  • radix-vue - Vue port of Radix UI Primitives. An open-source UI component library for building high-quality, accessible design systems and web apps.
  • mantine - A fully featured React components library.
  • ariakit - Toolkit for building accessible web apps with React.
  • nextui - Beautiful, fast and modern React UI library.
  • yamada-ui - React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion.
  • shadcn/ui - Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
  • melt-ui - A set of headless, accessible component builders for Svelte.
  • Chakra UI - Simple, Modular & Accessible UI Components for your React Applications.
  • tremor raw - Copy & Paste React components to build dashboards and modern web applications.
  • Wedges - An ever-expanding, open-source React UI library built with the Wedges Design System, Radix primitives, and Tailwind CSS.
  • Tamagui - Style React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.
  • Open UI - Maintain an open standard for UI and promote its adherence and adoption.
  • Spark UI - Experience The Magic Of Animated Components. Crafted With Vue, TypeScript, TailwindCss And Vueuse Motion.

Web Components

  • better-select - A web component for a better select tag.
  • qr-code - A no-framework, no-dependencies, customizable, animate-able, SVG-based <qr-code> HTML element.
  • click-spark - Add a little spark to your clicks.
  • Cally - Small, feature-rich calendar components.

Sliders

  • Swiper - Most modern mobile touch slider with hardware accelerated transitions.
  • splide - Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.
  • keen-slider - The HTML touch slider carousel with the most native feeling you will get.
  • glide - A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more.
  • slider - A modern, light weight content slider.
  • reveal.js - The HTML Presentation Framework.

Typography

  • react-wrap-balancer - Simple React Component That Makes Titles More Readable.
  • react-curved-text - A React addon for creating circular / curved texts in React projects.
  • Hyphenopoly - Hyphenation for node and Polyfill for client-side hyphenation.
  • budoux - BudouX is the successor to Budou, the machine learning powered line break organizer tool.
  • alfaaz - The fastest multilingual word
  • fontsource - Self-host Open Source fonts in neatly bundled NPM packages.

Menus

  • mmenu-js - The best javascript plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp.
  • kmenu - An animated and accessible command menu.

Modals

  • Micromodal - Tiny javascript library for creating accessible modal dialogs.
  • a11y-dialog - A very lightweight and flexible accessible modal dialog script.

Toast

  • Sonner - An opinionated toast component for React.

Editors

  • BlockNote - A "Notion-style" block-based extensible text editor built on top of Prosemirror and Tiptap.
  • marked - A markdown parser and compiler. Built for speed.
  • novel - Notion-style WYSIWYG editor with AI-powered autocompletions.
  • mathlive - A web component for easy math input.
  • ckeditor5 - Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
  • Trix - A rich text editor for everyday writing.
  • Quill - Quill is a modern WYSIWYG editor built for compatibility and extensibility.
  • Rooster - roosterjs is a framework-independent javascript rich text editor.

Forms

Pickers

Validation

  • VineJS - VineJS is a form data validation library for Node.js.
  • validator.js - A library of string validators and sanitizers.

Animations

  • motionone - A new animation library, built on the Web Animations API for the smallest filesize and the fastest performance.
  • scenejs - Scene.js is JavaScript & CSS timeline-based animation library.
  • vivus - JavaScript library to make drawing animation on SVG.
  • rough-notation - Create and animate hand-drawn annotations on a web page.
  • typed.js - A JavaScript Typing Animation Library.
  • granim.js - Create fluid and interactive gradient animations with this small javascript library.
  • url-animations - Add loading animations to your website in your browser URL field.

Canvas

  • canvas-confetti - On-demand confetti gun.
  • lazy-brush - Smooth drawing with mouse, finger or other pointing device.
  • idraw - A simple JavaScript framework for Drawing on the web.
  • perfect-freehand - Draw perfect pressure-sensitive freehand lines.
  • atrament.js - A small JS library for beautiful drawing and handwriting on the HTML Canvas.
  • Signature Pad - HTML5 canvas based smooth signature drawing.

Images

  • node-vibrant - Extract prominent colors from an image.
  • fast-average-color - Fast Average Color.
  • cropperjs - JavaScript image cropper.
  • background-removal-js - Remove backgrounds from images directly in the browser environment with ease and no additional costs or privacy concerns.
  • image-dimensions - Get the dimensions of an image.
  • sharp - High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
  • faces.js - A JavaScript library for generating vector-based cartoon faces.
  • Fabric.js - Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser.

Video

  • responsive-video-poster - Responsive poster image for videos to improve performance and allow full control of video placeholders.
  • embetty - Embetty displays remote content like tweets or YouTube videos without compromising your privacy.
  • YouTube.js - Full-featured wrapper around YouTube's private API — reverse engineering InnerTube.
  • ffmpeg.wasm - FFmpeg for browser, powered by WebAssembly.

Audio

  • peaks.js - JavaScript UI component for interacting with audio waveforms.
  • siriwave - The Apple® Siri wave-form replicated in a JS library.
  • tonal - A functional music theory library for Javascript.

Charts

  • js-code-to-svg-flowchart - A visualization library to convert any JavaScript code into beautiful SVG flowchart. Learn other’s code. Design your code. Refactor code. Document code. Explain code.
  • plot - A concise API for exploratory data visualization.
  • Heat.js - A lightweight JavaScript library that generates customizable heat maps and charts to visualize date-based activity and trends.

Detection

  • what-input - A global utility for tracking the current input method (mouse/pointer, keyboard or touch).
  • detect-scroll - A performant and lightweight (~1.6kb) ES6 module for detecting scroll activity (direction + location) for X and/or Y axis.
  • Browser or Node.js - Check where your code is running. In the browser or in node.js environment.

Utilities

Array

  • fuzzysort - Fast SublimeText-like fuzzy search for JavaScript.

Object

Polyfills

  • scrollyfills - grab and go polyfill functions for web scroll features.
  • dom-parser - Fast dom parser based on regexps.
  • urlpattern-polyfill - This is a polyfill for the URLPattern API so that the feature is available in browsers that don't support it natively.
  • clipboard-polyfill - Simple copying on the web, with maximum browser compatibility. (You probably don't need this anymore!)
  • <selectlist> polyfill - Polyfill for the selectlist element.