210 Repositories
JavaScript canvas-element Libraries
Cross-platform 2D editor that saves scenes to json
Webber's Map Editor 2D Load or create a new map Select your sprites' folder (recursively). Drag your sprites to the canvas to create instances. On the
This widget allows to conduct polls in Matrix rooms.
Matrix Poll This widget allows to conduct polls in Matrix rooms. But unlike MSC3381, it is designed for more complex scenarios, like polls with multip
Translate text in images using Vision API, Translation API and React with Canvas
manga-translator Manga translator app using Vision API, Translation API Rendered using React and canvas Installation Create a Google Cloud project, en
👾 Simple creating cards using canvas. Welcome, Rank, Info and so on.
⭐ discord-canvas-card Are you developing a bot using DiscordJS and you need beautiful images created using Canvas? You can create great welcome, goodb
A custom element (web component) for Shaka Player.
shaka-video A custom element (web component) for Shaka Player, which supports both HLS and DASH streaming protocols. The element API matches the HTM
This is my first website. It has helpful information, games, lots of pages & more.
Mitko.Vtori World This is my first website. It has helpful information, games, lots of pages & more. 🎞 Presentation & Introduction Here's link to my
A simple breakout game created using HTML, CSS and Javascript
BreakOut Game This game is created using HTML, CSS and Javascript Game Overview The game would consist of 3 lives in order to clear out all the blocks
An Exhibition Of Mathematical Beauty.
🪴 Fractal Garden 🪴 📐 An Exhibition Of Mathematical Beauty 📐 Fractals are awesome. They look beautiful and have intricate mathematical connections
A JavaScript Library that allows you to execute function when a certain element gets added to the document
wait-for-it.js A JavaScript Library that allows you to execute function when a certain element gets added to the document Getting Started If you want
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
An easy-to-use jQuery plugin that allows the user to pick an icon from a responsive icon browser and shows the corresponding icon class in an input element.
Font Awesome Browser An easy-to-use jQuery plugin that allows the user to pick an icon from a responsive icon browser and shows the corresponding icon
A light-weight user's step-by-step guide for your website using Vanilla JS.
WebTour JS A light-weight user's step-by-step guide for your website using Vanilla JS. Features User's walkthrough - can be used to guide user's to yo
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
"Jira Search Helper" is a project to search more detail view and support highlight than original jira search
Jira Search Helper What is Jira Search Helper? "Jira Search Helper" is a project to search more detail view and support highlight than original jira s
A web component that allows you to run high level programming languages on your websites (static websites included!)
Code-Runner-Web-Component A web component that allows you to run high level programming languages on your website via the public Piston API Show your
A GUI to browse and restore restic backup repositories.
A simple, cross-platform restic backup GUI for browsing and restoring restic repositories. Built with Wails2, based on leaanthony's Restoric PoC. Down
Snake game developed by Canvas & vanilla Js using OOP paradigm 🐍 🍎 🎮
Snake-Game 🐍 🍎 Snake game developed by Canvas & vanilla Js using OOP paradigm This project was an exercise for the canvas fullDemo Feature Eating fo
Pure JavaScript HTML5 Canvas Range Slider. No stylesheet needed. Simple, elegant and powerful. A quirky alternative to other sliders.
CanvasSlider CanvasSlider is a lightweight JavaScript range slider. Most of the range slider controls use Javascript and a stylesheet. This slider use
A lib for text highlighting by using Canvas.
canvas-highlighter 基于 canvas 实现的文本划词高亮，与文本展示的结构完全解耦，不改变文本内容的 DOM 结构。 Installation npm install canvas-highlighter Usage 最简单的实现文本划词直接高亮 import CanvasHig
Storybook Addon Root Attributes to switch html, body or some element attributes (multiple) at runtime for you story
Storybook Addon Root Attributes What is this This project was inspired by le0pard/storybook-addon-root-attribute The existing library received only on
Have a code snippet, Create a code video
CodeVideo CodeVideo is a product that helps you to make code explanation videos. It's quick and easy, so anybody can create beautiful code videos with
Canvas-based JavaScript UI element implementing touch, keyboard, mouse and scroll wheel support.
pure-knob Initially a (circular) knob / dial control with mouse, wheel, touch and keyboard support, implemented in pure JavaScript. In addition, this
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 tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time.
A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time. Dropdown, navigation bu
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
Easy to use, Element Printing Plugin for jQuery
jQuery Print Plugin jQuery.print is a plugin for printing specific parts of a page Usage Include it in your HTML after importing jQuery, like: scrip
Create tweet images
tweet-maker Create tweet images 2018'de javascripti kurcalarken yapmış olduğum bir proje. 2021'de eski kodlarıma bakarken buldum. 2021 yılı içerisinde
A lightweight JavaScript plugin for particle backgrounds.
ak-kaleidoscope ak-kaleidoscope is a lightweight JavaScript plugin for particle backgrounds. Demo See demo page. The examples code can be found in the
Your whole team, changing the world one stroke at a time.
Collanvas — Your whole team, changing the world one stroke at a time 🎨 With an online whiteboard, you can brainstorm 🧠 , draw art 🖌️ , and even pla
A jQuery plugin allowing you to scroll an image within a container element
jQuery Scroll Image Inside v0.1 A jQuery plugin allowing you to scroll an image within a container element Usage div id="window" img src="reall
Audio visualizer library for javascript. Create dynamic animations that react to an audio file or audio stream.
Wave.js Audio visualizer library for javascript. Installation Install With CDN script src="https://cdn.jsdelivr.net/gh/foobar404/wave.js/dist/bundle.
Motionity is a free and open source animation editor in the web
Motionity The web-based motion graphics editor for everyone 📽 Motionity is a free and open source animation editor in the web. It's a mix of After Ef
jSide Menu is a well designed, simple and clean side navigation menu with dropdowns.
jQuery jSide Menu jSide Menu is a well designed, simple and clean side navigation menu with dropdowns. Browse: Live Demo & Using Guide Main Features F
Javascript library to generate an infinite stream or a burst of image based particles on HTML canvas.
spxparticles Stream or a burst of image particles on HTML canvas Simple Javascript library for generating an infinine stream or a burst of image based
A simple lightweight file dropzone component based on jQuery. You can easily make any existing element become a dropzone that holds files.
file-dropzone A simple lightweight file dropzone component based on jQuery. You can easily make any existing element become a dropzone that holds file
Little Alpine.js plugin to add a typewriter effect to any HTML element.
⌨️ Alpine Typewriter ⌨️ An Alpine.js plugin to add a typewriter effect to any HTML element. 🚀 Installation CDN Include the following script tag in
A button to POST an emoji to an endpoint.
open-heart A button for the Open Heart Protocol. 🚧 Highly experimental. Tag a version to avoid unexpected changes. Usage !-- Include `OpenHeartEle
A lightweight, efficient and easy-to-use Canvas library for building some cool particle effects.
JParticles · 中文 | English 官网：jparticles.js.org 特效列表 粒子运动 波纹运动 波纹进度条 雪花飘落 线条动画 介绍 JParticles（JavaScript Particles 的缩写）是一款基于 Canvas 的不依赖于其他库的轻量级 JavaScr
JavaScript micro-library: pass in an element and a callback and this will trigger when you click anywhere other than the element
Add a click listener to fire a callback for everywhere on the window except your chosen element. Installation run npm install @lukeboyle/when-clicked-
A jQuery plug-in to notify you of CSS, Attribute or Property changes in an element
selectWatch.js jQuery plug-in gives an opportunity to monitor changes of DOM element's CSS styles, attributes, properties, input element or select ele
A simple jQuery extension to make any HTML element sticky on scroll.
jquery.sticky.js A simple jQuery extension to make any HTML element sticky on scroll. Installation Just download the script and include it in your HTM
A Pure JavaScript Solution to create Tags Input Element.
JavaScript Tags Input Library Native JavaScript library to make Tags Input Element in DOM. There isn't any dependency for this library, add it straigh
A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic animation.
Lava-Lamp Description: A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic anima
The (extremely) lightweight alternative to the mmenu.js plugin for creating off-canvas mobile menus.
mmenu light The (extremely) lightweight alternative to the mmenu.js plugin for creating off-canvas mobile menus with the exact look and feel. Examples
🦋 Jump to local IDE source code while click the element of browser automatically
👀 Why When developing a React app, you have a lot of components in your app. Sometimes you may forget where the code is located that you want to edit
🤖 Tailwind CSS assistant helps you to edit classes (includes JIT & ignores purge), toggle breakpoint classes on an element and view current breakpoint
Tailwind CSS Assistant See it in action on this example website 🎉 ✅ Small JavaScript package that helps you work with Tailwind CSS by... Showing you
Happy Birthday is a web-based party live background generated by CANVAS powered by JavaScript. This show a lot of random colorize particles in the background.
Happy BirthDay JS Happy Birthday is a web-based party live background generated by CANVAS powered by JavaScript. This show a lot of random colorize pa
A graphical web-based audio visualizer which reads music data using Pure JavaScript, and draws a graphical view in Canvas.
Audio Visualizer JS A graphical web-based audio visualizer which reads music data using Pure JavaScript, and draws a graphical view in Canvas. Demo: h
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,
The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.
EaselJS EaselJS is a library for building high-performance interactive 2D content in HTML5. It provides a feature-rich display list to allow you to ma
Framework for HTML5 Canvas oriented 2D video games
Canvas Engine http://canvasengine.net Description Framework to create video games in HTML5 Canvas Get Started Follow the steps below to start: Downloa
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.
Phaser - HTML5 Game Framework Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop a
Demonstration of liquid effect on HTML Canvas using Matter.js and SVG Filters (Blur + Contrast)
Canvas Liquid Effect Demonstration of liquid (or gooey) effect on HTML Canvas using Matter.js and SVG Filters (feGaussianBlur and feColorMatrix). DEMO
An opinionated template for creating a custom element.
custom-element element An opinionated template for creating a custom element. Installation You can install custom-element with npm, Yarn or pnpm.
A custom element (web component) for the Vimeo player.
vimeo-video A custom element (web component) for Vimeo. The element API matches the HTML5 video tag, so it can be easily swapped with other media,
📱📈An elegant, interactive and flexible charting library for mobile.
F2，一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（node, 小程序，weex）。完备的图形语法理论，满足你的各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。英文 README 在此衷心感谢《The Grammar of Graphics》的作者
Simple yet flexible JavaScript charting for designers & developers
Simple yet flexible JavaScript charting for designers & developers Documentation All the links point to the new version 3 of the lib. Introduction Get
A lightweight graphic library providing 2d draw for Apache ECharts
ZRender A lightweight graphic library which provides 2d draw for Apache ECharts. Documentation https://ecomfe.github.io/zrender-doc/public/ License BS
JavaScript SVG parser and renderer on Canvas
canvg JavaScript SVG parser and renderer on Canvas. It takes the URL to the SVG file or the text of the SVG file, parses it in JavaScript and renders
Lazyload images, iframes or any src* element until they are visible in the viewport.
Lazyload images, iframes or any src* element until they are visible in the viewport.
Renders HTML into the browser's canvas
rasterizeHTML.js Renders HTML into the browser's canvas. See the API. Install $ npm install rasterizehtml Then include a script tag with node_modules
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
Easily compose images together without messing around with canvas
merge-images Easily compose images together without messing around with canvas Canvas can be kind of a pain to work with sometimes, especially if you
Waypoints is a library that makes it easy to execute a function whenever you scroll to an element.
Waypoints Waypoints is a library that makes it easy to execute a function whenever you scroll to an element. var waypoint = new Waypoint({ element:
Pin any element within a container
jQuery.pin Ever wanted to pin something to the side of a text? Ever needed a subtle sticky element to quietly hang around as you scroll down? Jquery.P
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
A custom element that aims to make it easier to embed Spring '83 boards
spring-board element A custom element that makes it simple to embed Spring '83 boards! Usage If you are using spring-board in a client-side framew
Attempt #2 at creating a game engine with Sciter.
JogoMaker Attempt #2 at creating a game engine with Sciter, with love and care. For Attempt #1, see this project, which was hastily thrown together as
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
Custom element (web component) for Video.js.
videojs-video A custom element (web component) for Video.js. The element API matches the HTML5 video tag, so it can be easily swapped with other m
A custom element that helps save alienated player API's to bring back their true inner HTMLMediaElement API
A custom element that helps save alienated player API's to bring back their true inner HTMLMediaElement API
The Javascript and canvas port of MarkovJunior : A Probabilistic Programming Language.
MarkovJunior.js MarkovJunior is a probabilistic programming language where programs are combinations of rewrite rules and inference is performed via c
a 2D html canvas shooting game, implemented using vanilla JavaScript
EnemyShooting-Game a 2D single player enemy shooting game. It is an html canvas game, implemented using Vanilla JavaScript. Rules Killing each enemy w
Automatically scrolls the element when the cursor approaches the boundaries.
react-tiny-autoscroll Automatically scrolls the element when the cursor approaches the boundaries. Demo Mostly helpful when used in combination with d
🗂 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
Clone of the Fallout hacking mini-game, rendered into a browser canvas.
kodenkel-fo-hacking Clone of the Fallout hacking mini-game, rendered into a browser canvas. You can try it out at: https://www.kodenkel.com/games/fo-h
Simple Music Player App
Разработка музыкального плеера Разработка страницы музыкального плеера с возможностью поиска/выбора альбома для воспроизведения. Адаптивная верстка дл
Make configurable canvas easily with Canvafy.
Canvafy Make configurable canvas easily with Canvafy Installation npm i canvafy Documentation Rank Welcome And Leave Spotify Image Example of code con
Cast your video element to the big screen with ease!
is="castable-video" Cast your video element to the big screen with ease! The lightweight CastableVideoElement class extends the native HTMLVideoElemen
Hexooor - Generate hexagonal Twitter NFT profile pictures client-side using HTML5 canvas
Hexooor - Generate hexagonal Twitter NFT profile pictures client-side using HTML5 canvas
Nebula is a lightweight (1kb compressed) JavaScript library that creates beautiful universe animations.
Nebula is a lightweight JavaScript library for creating beautiful universe animations. Including configurable Stars, Nebulas, Comets, Planets and Suns. Compatible with SSR
Element for displaying HTML based on THREE.js HTMLMesh
AFrame-HTML a-entity html="#my-interface" position="0 1.5 -0.5"/a-entity Display an interactive HTML element in the scene. html-pointer component
A suite of utilities to add more features to the details element.
A suite of utilities to add more features to the details element.
Perfect pressure-sensitive drawing for both iOS and Android.
rn-perfect-sketch-canvas A React Native component for drawing perfect pressure-sensitive freehand lines using perfect-freehand and Skia renderer. Inst
A r/place clone powered by websockets
canvas A r/place clone powered by websockets That's pretty much it. https://canvas.rto.run To build, run npm install and then node main.js to start th
🎬 super easy recording for p5.js animations
About • Why p5.capture? • Getting started • API Options • Browser compatibility • Limitations About Assuming you would like to record p5.js animations
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
This package generates a unique ID/String for different browsers. Like chrome, Firefox and any other browsers which supports canvas and audio Fingerprinting.
Broprint.js The world's easiest, smallest and powerful visitor identifier for browsers. This package generates a unique ID/String for different browse
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 tiny, SSR-safe directive for binding random data to an element.
1️⃣ vue-bind-once A tiny, SSR-safe directive for binding random data to an element. A tiny, SSR-safe directive for binding random data to an element.
Canvas rendering library, Sprite manipulation of canvas
el-canvas Canvas rendering library, Sprite manipulation of canvas hello world div id="app"div/div/div yarn add elem-canvas or npm i
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
jump to local IDE source code while click the element of browser automatically.
📖 Introduction A vite plugin which provides the ability that to jump to the local IDE when you click the element of browser automatically. It support
Thank you for visiting this repo! ;)
React Native - UI Coffee Order [Pixel BWA] This is the React Native source code from a design provided by Pixel BuildWithAngga. I made this repo for t
HTML5 Runner Game Made With Phaser.
"Hurry up Runner!" The Tunner Game "Hurry up!" Is A Small Funny Game Made With Phaser 3. This Game Is About Ordinary Salaryman That Hurries For His Jo
An implementation of Bézier curve rendering and manipulation, using the HTML5 Canvas API.
Bézier Curves An implementation of Bézier curve rendering and manipulation, using the HTML5 Canvas API. How does it work? Bézier curves can be simply