Top 23 JavaScript Design Projects

• Materialize

  25 38,651 0.0 JavaScript

  Materialize, a CSS Framework based on Material Design

  Project mention: The world of Awesome CSS Frameworks | dev.to | 2022-01-11

  Materialize - 39K⭐

• Awesome-Design-Tools

  8 23,835 0.0 JavaScript

  The best design tools and plugins for everything 👉

  

  Project mention: How to make nice looking designs when you are bad? Where can you find inspirations for layouts, colors, etc? | reddit.com/r/androiddev | 2021-11-24

  In addition to all these wonderful submissions, you might also want to check out : this repo and this one .

• OPS

  github.com/nanovms

  sponsored

  OPS - Build and Run Open Source Unikernels. Quickly and easily build and deploy open source unikernels in tens of seconds. Deploy in any language to any cloud.

  

• p5.js

  112 16,746 9.3 JavaScript

  p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —

  

  Project mention: Genuary 13 - 800x80. Just a rotating 800x80px rectangle, and a lot of echo. | reddit.com/r/generative | 2022-01-16

  p5.js

• simple-icons

  22 12,314 9.8 JavaScript

  SVG icons for popular brands

  

  Project mention: Debutur | dev.to | 2022-01-13

  Simple Icons

• material-design-for-bootstrap

  1 9,462 4.8 JavaScript

  Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.

  

  Project mention: React for Bootstrap 5 - useful kit, #1 on ProductHunt | reddit.com/r/reactjs | 2021-05-11

  Also you claim on your homepage it is used by 2,000,000 developers which is a blatant lie. On github the material-design-for-bootstrap repo is used by 9,000 other repos, the React version will be significantly less.

• screenity

  7 6,290 4.7 JavaScript

  The most powerful screen recorder & annotation tool for Chrome 🎥

  Project mention: SCREENSY - THE MOST POWERFUL SCREEN RECORDER FOR CHROME 🎥 | reddit.com/r/chrome_extensions | 2022-01-10

  This seems to just be a clone of https://github.com/alyssaxuu/screenity with all the names changed?

• WebSlides

  1 5,781 0.0 JavaScript

  Create HTML presentations in seconds —

  

  Project mention: 18 amazing 🤩 GitHub repositories that will help you 🪄 make a beautiful project | dev.to | 2021-09-03

• SonarLint

  www.sonarlint.org

  sponsored

  Deliver Cleaner and Safer Code - Right in Your IDE of Choice!. SonarLint is a free and open source IDE extension that identifies and catches bugs and vulnerabilities as you code, directly in the IDE. Install from your favorite IDE marketplace today.

  

• website

  13 5,347 9.6 JavaScript

  The train engine powering the Coding Train website

  

  Project mention: 20211214 recursive trees | reddit.com/r/p5js | 2021-12-19

• web-skills

  3 5,241 0.0 JavaScript

  A visual overview of useful skills to learn as a web developer

  Project mention: Web Skills – This is a nice chart of web dev skills. Could be a reminder of how far you've come, or a glimpse of how much there is to learn. Web development is hard. | reddit.com/r/webdev | 2021-10-10

  I recommend reading the Readme for the project as others have mentioned https://github.com/andreasbm/web-skills, as it isn't the intention of the author to deter beginner programmers.

• ant-design-landing

  2 4,491 1.9 JavaScript

  :mountain_bicyclist: Landing Pages of Ant Design System

  

  Project mention: Электрокар это удобно и экологично. | reddit.com/r/Pikabu | 2021-08-18

• Blotter

  2 2,819 0.0 JavaScript

  A JavaScript API for drawing unconventional text effects on the web.

  Project mention: Use Fancy Text(Blotter.js) with Reactjs | dev.to | 2021-03-01

  View on GitHub

• atomize

  1 1,390 0.9 JavaScript

  Design System for developers build on styled-components & React JS. (by proksh)

  Project mention: Atomize : Simple Design System for React | dev.to | 2021-03-15

• concise.css

  1 943 0.0 JavaScript

  A CSS framework that's lightweight and easy-to-use. Give up the bloat. Stop tripping over your classes. Be Concise.

  

  Project mention: CSS Deep | dev.to | 2021-02-26

  ConciseCSS/concise.css - A CSS framework that's lightweight and easy-to-use. Give up the bloat. Stop tripping over your classes. Be Concise.

• webDevsCom

  2 547 7.0 JavaScript

  :heart_eyes: All kinds of resources for Developers :trident: in one place.

  

  Project mention: Curated Free Resources of all kinds for Developers | reddit.com/r/opensource | 2021-05-28

• elementz

  1 339 3.9 JavaScript

  :space_invader: A React UI Component library for building modern applications easily & quickly

  

  Project mention: A React UI Library for Web that I've been working on for the last months | reddit.com/r/Design | 2021-06-23

• a17t

  1 307 4.3 JavaScript

  An atomic design toolkit for pragmatists

  Project mention: Ask HN: What are some tools / libraries you built yourself? | news.ycombinator.com | 2021-05-16

  I built Shynet [0], a modern, privacy-friendly, and detailed web analytics tool that works without cookies or JS.

  I also built a17t [1], an atomic web design toolkit that makes using Tailwind CSS a bit easier from the start.

  [0] https://github.com/milesmcc/shynet

  [1] https://github.com/milesmcc/a17t

• md-date-time-picker

  1 277 2.9 JavaScript

  An implementation of Material Design Picker components in vanilla CSS, JS, and HTML

  Project mention: CSS Deep | dev.to | 2021-02-26

  puranjayjain/md-date-time-picker - An implementation of Material Design Picker components in vanilla CSS, JS, and HTML

• calcite-maps

  1 236 0.0 JavaScript

  A Bootstrap theme for designing, styling and creating modern map apps.

  

  Project mention: CSS Deep | dev.to | 2021-02-26

  Esri/calcite-maps - A Bootstrap theme for designing, styling and creating modern map apps.

• Appfairy

  1 209 0.9 JavaScript

  A CLI tool to Migrate a Webflow project into a React app

  Project mention: This is how I build Babel plug-ins | dev.to | 2021-07-29

  The idea of writing such article popped into my mind while working on my Webflow/React transpiler. All I wanted to do was to take a JS code string and transform it in such way that globals won’t be redefined if already so:

• pg-calendar

  1 121 1.6 JavaScript

  :calendar: beautiful and eidetic date picker

  Project mention: Simple Appointment Scheduling widgets for your website | dev.to | 2021-03-19

  The Calendar UI itself is provided by pg-calendar and is quite mobile friendly. The HTML code to display the calendar, found under index.html, is just 4 lines of code:

• schema-designer

  2 108 0.0 JavaScript

  Database schema designer for Laravel & Lumen

  Project mention: How do you plan your laravel projects? | reddit.com/r/laravel | 2021-05-16

  Migration tools exist for Laravel, some with visual diagrams, I consider them good enough as DB structure diagrams. Schema designer, Schematics

• shader-web-background

  1 103 2.2 JavaScript

  Displays GLSL fragment shaders as a website background. Supports offscreen buffers and floating point textures on almost any browser and hardware. Compatible with Shadertoy.

  

  Project mention: Another frame of the endless generative video, noise and radial gradient as a source of spectral color, another 3d-to-2d noise as feedback displacer, GLSL, realtime | reddit.com/r/generative | 2021-09-14

• page-ruler-redux

  1 90 0.0 JavaScript

  An awesome page ruler extension for google chrome

  Project mention: 25 Chrome extension for Designers | reddit.com/r/Design | 2021-08-30

  Page Ruler Redux 🌎 https://github.com/Esteban-Rocha/page-ruler-redux Page Ruler Redux is a core web developer and designer tool, that allows you to get pixel perfect measurements of web elements for website front-end development, web design or any task you may need to get perfect pixel measurements

JavaScript Design related posts

• Is there a website for predesigned elements?
  8 projects | reddit.com/r/html5 | 28 Dec 2021
• Would it be possible to record a cursor in the browser such that it can be played back in an animation
  1 project | reddit.com/r/chrome_extensions | 27 Dec 2021
• Something like Material UI but for Vanilla JS?
  1 project | reddit.com/r/webdev | 21 Dec 2021
• 20211214 recursive trees
  1 project | reddit.com/r/p5js | 19 Dec 2021
• Any creative ideas?
  2 projects | reddit.com/r/bootstrap | 11 Dec 2021
• Is there a way to check if such a recursive function is actually doing the correct calculation?
  1 project | reddit.com/r/learnprogramming | 29 Nov 2021
• How can I fully understand such a recurrence function?
  1 project | reddit.com/r/learnprogramming | 29 Nov 2021

Index

Sponsored

Less time debugging, more time building

Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

scoutapm.com

Get the trending JavaScript projects
with our weekly report!
» Subscribe «