JavaScript Design

Open-source JavaScript projects categorized as Design | Edit details

Top 23 JavaScript Design Projects

  • GitHub repo Materialize

    Materialize, a CSS Framework based on Material Design

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

    Materialize - 39K⭐

  • GitHub repo Awesome-Design-Tools

    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? | | 2021-11-24

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

  • OPS

    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.

  • GitHub repo p5.js

    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. —

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


  • GitHub repo simple-icons

    SVG icons for popular brands

    Project mention: Debutur | | 2022-01-13

    Simple Icons

  • GitHub repo material-design-for-bootstrap

    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 | | 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.

  • GitHub repo screenity

    The most powerful screen recorder & annotation tool for Chrome 🎥


    This seems to just be a clone of with all the names changed?

  • GitHub repo WebSlides

    Create HTML presentations in seconds —

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

    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.

  • GitHub repo website

    The train engine powering the Coding Train website

    Project mention: 20211214 recursive trees | | 2021-12-19
  • GitHub repo web-skills

    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. | | 2021-10-10

    I recommend reading the Readme for the project as others have mentioned, as it isn't the intention of the author to deter beginner programmers.

  • GitHub repo ant-design-landing

    :mountain_bicyclist: Landing Pages of Ant Design System

    Project mention: Электрокар это удобно и экологично. | | 2021-08-18
  • GitHub repo Blotter

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

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

    View on GitHub

  • GitHub repo atomize

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

    Project mention: Atomize : Simple Design System for React | | 2021-03-15
  • GitHub repo concise.css

    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 | | 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.

  • GitHub repo webDevsCom

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

    Project mention: Curated Free Resources of all kinds for Developers | | 2021-05-28
  • GitHub repo elementz

    :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 | | 2021-06-23
  • GitHub repo a17t

    An atomic design toolkit for pragmatists

    Project mention: Ask HN: What are some tools / libraries you built yourself? | | 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.



  • GitHub repo md-date-time-picker

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

    Project mention: CSS Deep | | 2021-02-26

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

  • GitHub repo calcite-maps

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

    Project mention: CSS Deep | | 2021-02-26

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

  • GitHub repo Appfairy

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

    Project mention: This is how I build Babel plug-ins | | 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:

  • GitHub repo pg-calendar

    :calendar: beautiful and eidetic date picker

    Project mention: Simple Appointment Scheduling widgets for your website | | 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:

  • GitHub repo schema-designer

    Database schema designer for Laravel & Lumen

    Project mention: How do you plan your laravel projects? | | 2021-05-16

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

  • GitHub repo shader-web-background

    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 | | 2021-09-14
  • GitHub repo page-ruler-redux

    An awesome page ruler extension for google chrome

    Project mention: 25 Chrome extension for Designers | | 2021-08-30

    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

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2022-01-16.

JavaScript Design related posts


What are some of the best open-source Design projects in JavaScript? This list will help you:

Project Stars
1 Materialize 38,651
2 Awesome-Design-Tools 23,835
3 p5.js 16,746
4 simple-icons 12,314
5 material-design-for-bootstrap 9,462
6 screenity 6,290
7 WebSlides 5,781
8 website 5,347
9 web-skills 5,241
10 ant-design-landing 4,491
11 Blotter 2,819
12 atomize 1,390
13 concise.css 943
14 webDevsCom 547
15 elementz 339
16 a17t 307
17 md-date-time-picker 277
18 calcite-maps 236
19 Appfairy 209
20 pg-calendar 121
21 schema-designer 108
22 shader-web-background 103
23 page-ruler-redux 90
Find remote jobs at our new job board There are 29 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.
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.