148 Repositories
JavaScript headless-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
๐ Building a Headless CMS with all the essential features for business representative websites to make ๐
Isomera - headless CMS for business representative websites SaaS that is hosted on the cloud and built by community. To make developer life easy. โ ๏ธ A
๐ฐThe Shopify-like Digital Commerce engine provides an Open-Source ๐ and Headless/Modular Architecture โก
๐ฐ The Shopify-like Digital Commerce โก ๐ฐ The Shopify-like Digital Commerce engine provides an Open-Source ๐ and Serverless Architecture โก ๐ฏ The Sho
A bodacious, secure, headless content management system.
A bodacious, secure, headless content management system. Cassiopeia allows you to create your blog with a customizable interface and comes with a dyna
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
A thin, opinionated headless wiki with few features.
thinwiki A thin, opinionated headless wiki with few features. Git used as a backing store Markdown files with front matter used for pages index.md pag
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
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
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 site where you can watch Naruto. Inspired by Netflix.
A Mini Netflix clone built with Solid.js, Astro and deployed on Netlify. ๐ I'm using Directus as a headless CMS here, though, I'm using the free vers
Headless UI components without writing a single line of JavaScript.
Zerolines.js Headless UI components without writing a single line of JavaScript. See Oficial Site: Zerolines.js Components Tab Modal Dropdown Drawer O
Meogic-tab-manager is an extensible, headless JavaScript tab manager framework.
MeogicTabManager English document MeogicTabManagerๆฏไธไธชๆๅฏๆๅฑๆง็ใheadless็JavaScriptๆ ็ญพ้กต็ฎก็ๆกๆถใ MeogicTabManagerๆจๅจๆไพๅฏ่ช็ฑ็ป่ฃ ้กต้ขๆกๆถใ่ชๅฎไน้กต้ข็ปไปถใ็่ณ่ฆ็ๆกๆถ่ชๅธฆไบไปถๅๅบ็ๅผๅไฝ้ชใ Meogi
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.
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:/
๐ฉโ๐ค Headless, type-safe, UI components for the next generation Web3.Storage APIs.
Headless, type-safe, UI components for the next generation Web3.Storage APIs. Documentation beta.ui.web3.storage Examples React Sign up / Sign in Sing
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 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 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
๐ฒ 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:
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
An e-commerce storefront starter built with Qwik and Vendure
Vendure Qwik Storefront Starter๏ธ An e-commerce storefront for Vendure built with Qwik & Qwik City. ๐ qwik-storefront.vendure.io To do Cart โ Checkout
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
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
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
A minimal e-commerce store using Gatsby, SANITY, Stripe, Use-Shopping-Cart and Netlify
๐ช Gatsby Starter Stripemart Like a supermarket but for Stripe. No ongoing monthly costs. Perfect for artists, creators and independent builders doing
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.
Update & Revalidate Content from a Headless CMS in Next.js with Incremental Static Regeneration
Update & Revalidate Content from a Headless CMS in Next.js with Incremental Static Regeneration Demo for tutorial How to Update & Revalidate Content f
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
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
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
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
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 (
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_
๐ 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
A bot builder on top of puppeteer's headless web browser mimicing your web.whatsapp.com functionalities.
Welcome to the BizBook365 WhatsApp bot project A bot builder on top of puppeteer's headless web browser mimicing your web.whatsapp.com functionalities
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-
โช Rewinds โ Remix Tailwind Starter Kit with Tailwind CSS, Headless UI, Radix UI, and more
โช Rewinds โ Remix Tailwind Starter Kit Rewinds is a Remix starter kit with Tailwind CSS v3 family of libraries. This is an example demo to combine the
Medusa on steroid, take your medusa project to the next level with some badass features ๐
medusa-extender Full documentation website Medusa on steroid, take your medusa project to the next level with some badass features ๐ The extender pro
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
A headless, single-page dashboard application for Shoplix
Configure API address cd ui-domain vi api.js set api address // development environment export const dev = { base: 'your api address', seller: 'yo
A plugin for Strapi Headless CMS that provides the ability to transform the API request or response.
strapi-plugin-transformer A plugin for Strapi that provides the ability to transform the API request and/or response. Requirements The installation re
A headless, single-page dashboard application for Shoplix
Configure API address cd ui-domain vi api.js set api address // development environment export const dev = { base: 'your api address', seller: 'yo
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
An npm module to run Snowflake in a headless browser to help censored users connect to the Tor network.
snowflake-cli An npm module to run Snowflake in a headless browser to help censored users connect to the Tor network. Note: depending on your environm
A simple template to get started with a non-profit website.
Next.js Non-Profit Website A non-profit website template powered by the Cosmic headless CMS. Uses Next.js, Tailwind CSS, and Stripe for donation payme
๐ 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
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
Remix starter kit with Tailwind CSS family of libraries: Headless UI, Radix UI, VechaiUI, daisyUI, and more
Remix Tailwind Starter Kit Remix starter kit with Tailwind CSS v3 family of libraries. Example demo to combine the best Tailwind-related ecosystem suc
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
Custom HTML elements for generic components (dropdown, modal...) without style.
Headless elements The goal of this project is to create a library of Custom Elements to stop reinventing the wheel (starting by reinventing the wheel
Builder.io + Shopify Hydrogen - headless visual page building example
Builder.io + Shopify Hydrogen - headless visual page building example Example repo using Builder.io for drag and drop page building with Shopify hydro
Script para colocar la altura maxima entre el conjunto de elementos.
set-height-elements Script para colocar la altura maxima entre el conjunto de elementos. La principal funciรณn de este script es hacer que todos los el
DoMe is a ToDo App. you can add, delete and reorder elements of the todo list using drag and drop. You can also toggle between dark&light mode
DO ME Todo App Live Preview : DO ME Built With : - ReactJS - TailwindCSS Make sure you have: - Git - Nodejs version 14 or higher (we recommend using
A simple copy of the Reddit app using it's API in React Native
A simple copy of the Reddit app using it's API in React Native
A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mechanism to manipulate DOM elements
JavaScript Project to Manipulate DOM Elements DFlex A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mech
This Next.js app replicates the WordPress Template Hierarchy, but in JavaScript
Next.js WordPress Template Hierarchy Routing This Next.js app replicates the WordPress Template Hierarchy, but in JavaScript! Requirements WordPress P
The high efficent browser driver on top of puppeteer, ready for production scenarios.
browserless is an efficient driver for controlling headless browsers built on top of puppeteer developed for scenarios where performance matters. High
Purple haze is a TypeScript, Markdown, JS generative bundler that works in headless browser
Purple haze Inspired by generative programming and weed :). So I was learning Elm language at home usually in the evening and now I am missing all thi
Physics on web page elements.
MatterDropdown 0.1 Applies physics to DOM elements and lets you bounce them around with the mouse. Built with matter.js and ismailman/decompose-dommat
Drag and drop page builder and CMS for React, Vue, Angular, and more
Drag and drop page builder and CMS for React, Vue, Angular, and more Use your code components and the stack of your choice. No more being pestered for
๐งพ My personal CLI app to manage my invoices via Web Scraping.
ALM Invoices CLI My personal CLI (Command Line Interface) app to manage my invoices via Web Scraping. WIP (Work in Progress): For now only the list co
Clarity is a scalable, accessible, customizable, open source design system built with web components
Clarity is an open source design system that brings together UX guidelines, design resources, and coding implementations with Web Components
Lightweight web components library built with LitElement.
Aybolit Aybolit is a lightweight, standards-based, framework agnostic UI components library built with LitElement. Aybolit is a fictional character fr
Material Design implemented in Web Components (Custom Elements v1)
Material Web Components Material Design implemented in Web Components (Custom Elements v1) https://dannymoerkerke.github.io/material-webcomponents/ Ge
A small jQuery plugin that will automatically cast a shadow creating depth for your flat UI elements
#Flat Shadow by Pete R. A small jQuery plugin that will automatically cast a shadow creating depth for your flat UI elements Created by Pete R., Found
A tiny javascript library for obfuscating and revealing text in DOM elements
baffle.js A tiny javascript library for obfuscating and revealing text in DOM elements. camwiegert.github.io/baffle ~1.8kb gzipped โก Dependency-free ?
An easy way to animate SVG elements.
Walkway I loved the animations for the polygon ps4 review a few months back and decided to create a small library to re-create them (simple demo). It
curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.
What is it ? Shaders are the new front-end web developpment big thing, with the ability to create very powerful 3D interactions and animations. A lot
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
A plugin for Strapi Headless CMS that provides ability to sign-in/sign-up to an application by link had sent to email.
Strapi PasswordLess Plugin A plugin for Strapi Headless CMS that provides ability to sign-in/sign-up to an application by link had sent to email. A pl
A simple guide to HTML head elements
๐คฏ HEAD A simple guide to HTML head elements Table of Contents Recommended Minimum Elements Meta Link Icons Social Facebook Open Graph Twitter Card
Chart.js plugin to display labels on data elements
Overview Highly customizable Chart.js plugin that displays labels on data for any type of charts. Requires Chart.js 3.x. Documentation Introduction Ge
๐ค Detection of elements in viewport & smooth scrolling with parallax.
Locomotive Scroll Detection of elements in viewport & smooth scrolling with parallax effects. Installation โ ๏ธ Scroll-hijacking is a controversial prac
Slide-element - A ~700 byte Promise-based library for animating elements with dynamic heights open & closed. Basically, a modern variant of jQuery's slideUp(), slideDown(), and slideToggle().
slide-element A tiny, accessible, Promise-based, jQuery-reminiscent library for sliding elements with dynamic heights open & closed. To see it in acti
Vue-cursor-fx - ๐ฑ An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible
๐ Vue Cursor Fx An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible Installation This package is a