214 Repositories
JavaScript dom-elements Libraries
Discover a vast library of open-source Tailwind CSS components and Mobile UI design elements 🚀
SundarUI 😍 Discover a vast library of open-source Tailwind CSS components and Mobile UI design elements 🚀 What is SundarUI? Sundar UI is a library o
A lightweight function that executes callback when we see specific DOM elements.
did-i-see A lightweight function that executes callback when we see specific DOM elements. Built with IntersectionObserver. 🔴 Demo: https://did-i-see
In this project, I implement a Simple To Do List with the CRUD (create, read, update, delete) methods. All the elements of the user interface are fully functional.
To Do list: add & remove In this project, I implement a Simple To Do List with the CRUD (create, read, update, delete) methods. All the elements of th
In this project, I built a to-do list app, which is inspired by the minimalist website. Build withHTML/CSS & JavaScript best practices: Correct use of tags, elements, properties and syntax.
Webpack Exercise In this project, I built a to-do list app, which is inspired by the minimalist website. Built With HTML/CSS & JavaScript best practic
Awesome Books project : An online Book Library. Storing book information using local storage and displaying it as a list on HTML page
This is project is my based on building an online Book Library. Storing book information using local storage and displaying it as a list on html page
This is a basic app that allows user add/remove books from a list of books. It was created by using JavaScript arrays and objects to dynamically modify the DOM.
Awesome-Books This application lets you compile a dynamic collection of books using JavaScript. It is a single page app. You enter your book title & a
Incredible resources (with links) to help up-skill yourselves on various fields. Resources like programming, designing, engineering and much more and completely Open Source.
Shiryoku Incredible resources (with links) to help up-skill yourselves on various fields. Resources like programming, designing, engineering and much
A simple todo list app written in javascript and html with basic CSS styling This project makes use of webpack to bundle the code. I implemented 3 functionalities on the this project namely: Add task edit task delete task using Js
My To-Do List A simple todo list app written in javascript and html with basic CSS styling This project makes use of webpack to bundle the code. I imp
Add class(es) to DOM elements while waiting for async action. Promise or callback.
jquery.loading Add class(es) to DOM elements while waiting for async action. Promise or callback. Install The simplest way is to include loading.js in
A pure javascript class for paginating through any number of DOM elements
PurePajinate A pure javascript class for paginating through any number of DOM elements. Inspired by Pajinate, a plugin for jQuery. Options Option Type
Create a deep copy of a set of matched elements with the dynamic state of all form elements copied to the cloned elements.
jq-deepest-copy FUNCTION: Create a deep copy of a set of matched elements while preserving the dynamic state of any matched form elements. Example Use
adds the *scrollin* and *scrollout* events to jquery, which will fire when any given element becomes (respectively) visible and invisible in the browser viewpori
jQuery.scrolling This plugin adds the scrollin and scrollout events to jquery: these events will fire when any given element becomes visible/invisible
jQuery plugin to allow dragging and dropping of elements and sorting of lists and other nested structures.
Drag and Drop Basic jQuery plugin to allow drag and drop: dragging dropping of dragged elements sorting of lists and other nested html structures (ul,
A JavaScript library to watch the DOM changes in a single callback
watchmydom A Javascript library to watch the DOM changes in a single callback Demo Click here to see the detailed demo. Download Minified script file
A powerful and simple JavaScript library provides a history for undo/redo functionality. Just like a time machine! 🕐
UndoRedo.js A powerful and simple Javascript library provides a history for undo/redo functionality. Just like a time machine! 🕐 Installation: Node.j
Creates a table of contents in a DOM element optionally linked to with anchors. No jQuery or other dependencies.
HTML-Contents Creates a table of contents in a DOM element optionally linked to with anchors. No dependencies. @psalmody Get It We're on npm: npm i ht
Provides event handling and an HTMLElement mixin for Declarative Shadow DOM in Hotwire Turbo.
Turbo Shadow Provides event handling and an HTMLElement mixin for Declarative Shadow DOM support in Hotwire Turbo. Requires Turbo 7.2 or higher. Quick
Basic website that allows users to add/remove books from a list. Achieved using JavaScript objects and arrays, dynamically modifying the DOM and adding basic events.
Awesome Books Basic website that allows users to add/remove books from a list. Achieved using JavaScript objects and arrays, dynamically modifying the
Raaghu is a micro frontend design system for modern web apps
Raaghu is a micro frontend design system for modern web apps, which is an open source, Bootstrap 5.x enabled collection of reusable elements and components guided by clear standards, capable of giving the designers the necessary tools to develop beautiful, responsive and engaging product experiences. Single source of truth for truly scalable and consistent UI language for your application.
Web application that manages your sales team efficiently.
Sales Incentive Management System Overview • Entities • APIs • Demo • Application Properties • Development • Build Overview Problem Statement Creating
Dynamic form elements generate with jQuery
Demo Advance Form Demo. Basic Form Demo. script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"/script script src="https:/
Sort tailwind classes for each elements className list by a given order-config
eslint-plugin-tailwind-classname-order This eslint plugin automatically orders the tailwind classes included in the className tags from each element b
jQuery-plugin for add/remove dom-items with renaming form-elements (arrays)
dynamicrows jQuery-plugin for add/remove rows by cloning existing row / renaming form-elements (arrays). Requirements jQuery =2.0 if move-action used
A little JavaScript plugin to generate PDF, XLS, CSV and DOC from JavaScript Object or DOM element only from the frontend!
💫 JavaScript Object to csv, xls, pdf, doc and DOM to html generator 💫 A little JavaScript plugin to generate PDF, XLS, CSV and DOC from JavaScript O
A JavaScript library allowing the creation of manually resizable div elements.
Resizable.js A JavaScript library allowing the creation of resizable html divs. Try the live demo! Setup Link to both resizable.js and resizable-style
A JavaScript library to shuffle the text content of a DOM element with an animated effect.
shuffle-letters.js A JavaScript library to shuffle the text content of a DOM element with an animated effect. NOTE: This library is a port to vanilla
A library for panning and zooming elements using CSS transforms :mag:
Panzoom Examples Panzoom is a small library (~3.7kb gzipped) to add panning and zooming functionality to an element. Rather than using absolute positi
Colorful shadows for your images. 🎨
cosha Colorful shadows for your images. 🎨 cosha lets you add colorful shadows to your images. Try it out and look for yourself—it really couldn't be
A DOM-merging algorithm
Idiomorph Idiomorph is a javascript library for morphing one DOM tree to another. It is inspired by other libraries that pioneered this functionality:
🎲 Extract one or more random elements from a weighted array (aka loot table or gacha)
wrand Extract one or more random elements from a weighted array. const items = [ { original: "Bronze", weight: 20 }, { original: "Silver", weight:
Minimally viable DOM Document implementation for NativeScript.
DOMiNATIVE Minimally viable DOM Document implementation for NativeScript NOTE THIS IS STILL EXPERIMENTAL. Installation Via npm: npm install dominative
Movie application consuming The Movie DB's API
Movie application consuming The Movie DB's API
Awesome-book is an online library website where a user can store a collection of books. Different book can be added and removed. Built with JavaScript using Dom
Awesome-book Description Awesome-book is an online library website where a user can store a collection of books. Differents book can be added and remo
Million is a lightweight (1kb) Virtual DOM. It's really fast and makes it easy to create user interfaces.
🎦 Watch Video 📚 Read the docs 💬 Join our Discord What is Million? Million is a lightweight (1kb) Virtual DOM. It's really fast and makes it easy t
Lightweight and easy to use vanilla js library to add css animations to elements on scroll.
Scrollrisen Trigger css animations on scroll as elements enter the viewport. Zero dependencies, lightweight and easy to use and customize Installation
Tiny js library to make DOM elements movable and resizable .
resizedrag.js Tiny js library to make DOM elements movable and resizable . Demo Here . This library has added resizing functionalities to the existing
A Javascript library to export svg charts from the DOM and download them as an SVG file, PDF, or raster image (JPEG, PNG) format. Can be done all in client-side.
svg-exportJS An easy-to-use client-side Javascript library to export SVG graphics from web pages and download them as an SVG file, PDF, or raster imag
A lightweight JavaScript utility to fade elements in and out of view on page scroll.
ScrollFade ScrollFade is used to fade elements in and out of view while scrolling through a page. Tag any elements you want to fade with the class scr
An easy-to-use JavaScript library aimed at making it easier to draw on SVG elements.
svg-pen-sketch An easy-to-use JavaScript library aimed at making it easier to draw on SVG elements when using a digital pen (such as the Surface Pen).
🖱 A JavaScript library for interactively picking DOM elements
pick-dom-element A JavaScript library (written in TypeScript) for interactively picking DOM elements. Usage Create an instance of the ElementPicker cl
The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 5 support
bootstrap-select The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with
Necktie – a simple DOM binding tool
👔 Necktie – a simple DOM binding tool Necktie is a library that binds your logic to the Document Object Model elements in an easy way. It has only ~3
A vanilla-js module for adding zoom-on-wheel and pan-on-drag behavior to inline SVG elements.
svg-pan-zoom-container A vanilla-js module for adding zoom-on-wheel and pan-on-drag behavior to inline SVG elements. No need to write scripts. Just ma
Converts select multiple elements into dropdown menus with checkboxes
jquery-multi-select Converts select multiple elements into dropdown menus with a checkbox for each option. The original select element is hidden
Javascript library for switching fixed elements on scroll through sections. Like Midnight.js, but without jQuery
Library for Switching Fixed Elements on Scroll Sometimes designers create complex logic and fix parts of the interface. Also they colour page sections
A javascript library to animate elements on scroll page events
ScrollJS by Sam Sirianni ScrollJS is a library written in Javascript. With ScrollJS you can animate elements on scroll events. Visit the ScrollJS webs
Small library for making box selections on HTML elements in JavaScript
Box Selection Small JavaScript library for making box selections on HTML elements. Makes use of CSS transforms so there is no paint flashing. Installa
An open-source Typing-effect Library, That enables potential users to add a typing effect to mere DOM Elements.
Typing Effect Library An open-source Typing-effect Library I created. That enables potential users to add a typing effect to mere DOM Elements. Tool P
A work-in-progress HTML sanitizer that strives for: performance like window.Sanitizer, readiness like DOMPurify, and ability to run in a WebWorker like neither of those.
Amuchina A work-in-progress HTML sanitizer that strives for: performance like window.Sanitizer, readiness like DOMPurify, and ability to run in a WebW
This project will be a basic website that allows users to add/remove books from a list. The main objective is to understand how to use JavaScript objects and arrays and dynamically modify the DOM and add basic events.
Awesome-books Awesome Books This project will be a basic website that allows users to add/remove books from a list. This project is part of the Microv
Resurrection of mediagroup / MediaController (renamed) which can be used to sync and control multiple audio / video elements.
media-group (examples) Resurrection of the mediagroup attribute and MediaController API (but renamed) which can be used to sync and control multiple a
Resurrection of mediagroup / MediaController (renamed) which can be used to sync and control multiple audio / video elements.
media-group (examples) Resurrection of the mediagroup attribute and MediaController API (but renamed) which can be used to sync and control multiple a
A Bootstrap plugin to create input spinner elements for number input
bootstrap-input-spinner A Bootstrap / jQuery plugin to create input spinner elements for number input. Demo page with examples Examples with floating-
A super tiny Javascript library to make DOM elements draggable and movable. ~500 bytes and no dependencies.
dragmove.js A super tiny Javascript library to make DOM elements draggable and movable. Has touch screen support. Zero dependencies and 500 bytes Gzip
JavaScript library to resize, reduce, or change ranges of DOM elements.
Range.js JavaScript library to resize, reduce, or change ranges of DOM elements using the HTML5 input type="range" element. Usage: Include range.js
A javascript plugin to filter elements from a "masonry" grid.
Isolde Isolde is a lightweight, flexible, and responsive javascript plugin allow you to filter elements from a "masonry" grid. Quick start Install Thi
Adds `long-press` event to the DOM in 1k of pure JavaScript
long-press-event A 1k script that adds a long-press event to the DOM using CustomEvent and pure JavaScript. Works in IE9+, Chrome, Firefox, Safari as
Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.
wired-elements 👉 wiredjs.com Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups,
This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer.
The HTML5 Shiv The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explo
`raaghu-mfe` is an opensource micro front end framework built on top of `raaghu-elements`, Bootstrap 5 and Storybook offering highly customizable UI components and built-in pages
`raaghu-mfe` is an opensource micro front end framework built on top of `raaghu-elements`, Bootstrap 5 and Storybook offering highly customizable UI components and built-in pages. Raaghu mfe can be used as a base to build complex components and UI layouts whilst maintaining a high level of reusability,flexibility with ease of maintenance.
Lightweight basic CSS style sheets.
Styled CSS Base Lightweight basic CSS style sheets. If you get tired of setting up a comprehensive styling scaffold, you may try returning back to thi
An extension of DOM-testing-library to provide hooks into the shadow dom
Why? Currently, DOM-testing-library does not support checking shadow roots for elements. This can be troublesome when you're looking for something wit
Minimalist Virtual DOM library with JSX and factory pattern for stateful components.
Reflex Reflex JS is a tiny virtual-dom library with factory based functional components. See this example running See more complex demos Table of cont
The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 5 support.
bootstrap-select The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with
Screenshots with JavaScript
html2canvas Homepage | Downloads | Questions JavaScript HTML renderer The script allows you to take "screenshots" of webpages or parts of it, directly
Generates an image from a DOM node using HTML5 canvas
DOM to Image What is it dom-to-image is a library which can turn arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image, written in Java
Domvas implements the missing piece that connects the DOM and Canvas.
Domvas Overview Domvas implements the missing piece that connects the DOM and Canvas. It gives to the ability to take arbitrary DOM content and paint
A ScrollSpy library for detecting enter/exit of elements in the viewport when the user scrolls
jquery-scrollspy A jQuery plugin for detecting enter/exit of elements in the viewport when the user scrolls. New Features Added a couple new features:
📃 Fold up DOM elements like paper
OriDomi Fold up DOM elements like paper Dan Motzenbecker, MIT License @dcmotz Visit oridomi.com for examples, documentation and notes. Read the annota
zoom in on any element in the DOM
zoom.js Enables a minimal JS API for zooming in on specific points or DOM elements. Note that this is only a proof of concept so don't use it for anyt
CSS classes to move your DOM!
CSShake Some CSS classes to move your DOM! Live Demo Download Center You could download the complete csshake.css file or separated files for each shak
Animate elements as they scroll into view.
Animate elements as they scroll into view. Introduction ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the vie
Custom Vitest matchers to test the state of the DOM, forked from jest-dom.
vitest-dom Custom Vitest matchers to test the state of the DOM This library is a fork of @testing-library/jest-dom. It shares that library's implement
little-planet Custom Element: interactive panorama viewer
little-planet This project is a Custom HTML Element (AKA Web Component) that renders an interactive view of a panoramic photo. Can be used with no J
📸 Generate image using HTML5 canvas and SVG
egami → image README | 中文文档 Generate image using HTML5 canvas and SVG Fork from html-to-image Installation pnpm pnpm add egami npm npm i egami Usage i
Simple, Fast, Secure, Flat-File CMS
Bludit Simple, Fast and Flexible CMS. Bludit is a web application to build your own website or blog in seconds, it's completely free and open source.
The missing CLI for beautiful, interactive API docs powered by with Stoplight Elements
Elements CLI The missing CLI for beautiful, interactive API docs powered by with Stoplight Elements Installation Install using npm as global package:
Add the `className` to all JSX elements in your project
Babel Plugin Transform JSX Classes This babel plugin adds the className in each JSX element. Before After function FancyComponent () { return (
Custom alert box using javaScript and css. This plugin will provide the functionality to customize the default JavaScript alert box.
customAlertBoxPlugin Custom Alert Box Plugin Using JavaScript and CSS Author: Suraj Aswal Must Include CSS Code/Default Custom Alert Box Class: /* mus
LiveJSON provides LiveView-like updating for JSON objects rather than DOM elements.
live_json LiveJSON provides LiveView-like updating for JSON objects rather than DOM elements. It works within your existing LiveViews - just use push_
🗿 Surreal - Hyper minimalist jQuery alternative
🗿 Mini jQuery alternative for devs who 💙 ergonomics. Use direct elements or arrays transparently! Locality of behavior (LoB) using me()! It's vanilla querySelector but better!
🗂 Universal Media Library as a web component.
Kondonizer Kondonizer is a custom element (a native HTML tag) that can be integrated in any frontend code. It displays a media library based on a Medi
💊 Event-driven DOM programming in a new style
Capsule v0.5.3 Event-driven DOM programming in a new style Features Supports event-driven style of frontend programming in a new way. Supports event d
Search/Filter beer for beerpong
Beer for Beerpong 🍺 You can search beer to play beer pong 🍻 🏓 You sink it, they drink it LINK Technologies 🚀 React React Router Dom Beer Animation
A peroidic-table api built with Nodejs & Mongodb to help make frontend requests dealing with chemistry...
A peroidic-table api for frontend apps Usage Example (GET all elements) // GET /api/elements const ajio = require("ajio") ajio.baseUrl("https://apis-
Keep track of the movies you've watched and create your own movies lists!
Cinematek Keep track of the movies you've watched and create your own movies lists! All the movies informations are provided by The Movie Database Dep
An application that allow users to manage their daily task.
An application that allow users to manage their daily task. They can add and delete a specific task, and even delete all those which already completed buiilt with JavaScript, webpack and experiments with Jest as a unit testing framework
Fast & tiny DOM differ
swapdom Fast & tiny DOM swapper. import swap from './swap-inflate.js' swap(parentNode, oldNodes, newNodes, endNode) swap-deflate.js strategy is small
A simple library that I use for web scraping. Uses htmlparser2 to parse dom.
Docpa A simple library that I use for web scraping. Uses htmlparser2 to parse dom. Usage const Docpa = require("docpa") const doc = new Docpa(`html
An app to manage tasks. A user can add, delete and edit a task and mark it as completed, It uses simple GUI and relies on DOM manipulation in pure JS and using local storage.
An app to manage tasks. A user can add, delete and edit a task and mark it as completed, It uses simple GUI and relies on DOM manipulation in pure JS and using local storage.
A JavaScript library for adding ripple effects to HTML elements based on mouse events.
About project Ripplejs is an open source javascript library created for the purpose of adding ripple effects to html elements based on mouse events. L
NiftyKit's Web Components Collection
NiftyKit Web Components NiftyKit's Web Components Collection Installation Install via npm npm install @niftykit/components Import via CDN script type
🌓 Add dark mode/night mode custom elements to your website.
dark-mode A custom element that allows you to easily put a Dark Mode 🌒 toggle. so you can initially adhere to your users' preferences according to pr
Mini Social Media App with a liitle bit of facebook components (Still Developing)
Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np
A small javascript DOM manipulation library based on Jquery's syntax. Acts as a small utility library with the most common functions.
Quantdom JS Quantdom is a very small (about 600 bytes when ran through terser & gzipped) dom danipulation library that uuses a Jquery like syntax and
This experimental library patches the global custom elements registry to allow re-defining or reload a custom element.
Redefine Custom Elements This experimental library patches the global custom elements registry to allow re-defining a custom element. Based on the spe
Utility to track the boundaries of html-elements in SolidJS
solid-boundaries Helps you to track the size and position of html-elements in solid-js. What does it do? See it in action here, or see it on CodeSandb
A lightweight extension to automatically detect and provide verbose warnings for embedded iframe elements in order to protect against Browser-In-The-Browser (BITB) attacks.
Enhanced iFrame Protection - Browser Extension Enhanced iFrame Protection (EIP) is a lightweight extension to automatically detect and provide verbose
A simple component for making elements draggable.
React Draggable Component A simple component for making elements draggable. Demo stackblitz Installation $ npm install drag-react # yarn add drag-reac
📜 A tiny custom element for all your scrollytelling needs!
scroll-scene element A tiny custom element for all your scrollytelling needs! The successor to @newswire/scroller. Key features 🐜 Less than 700 byt