As a web designer, you may feel overwhelmed by the number of tools available for your everyday work, with new ones constantly coming up. In this list I am going to share 15 Free Open Source Web Design Tools 2019 you might want to use in order to boost your productivity in 2019.

Lerna

Lerna is a tool for managing JavaScript projects with multiple packages. Sometime, in a large code base system, we need to split the code into the different modules or packages due to code sharing or single responsibility. However, it’s quite hard to mange a big project when develop, testing or even release.

Mockit

Stop wasting time mocking APIs. MockIt gives you an interface to configure and create REAL mocked end points for your applications.

PreVue

All in one prototyping tool for vue developers from component architecture to code exporting.

Debucsser

Debucsser is a simple CSS debugging tool made to be unobtrusive in your workflow. With Debucsser I simply hold CTRL and move my mouse around to see the dimensions in px and apply an outline class to every element I hover.

ReacType

ReacType is a visual prototyping tool for developers employing React component architecture alongside the comprehensive type checking of TypeScript. In other words, you can draw prototypes and export React / Typescript code!

Spicetify Cli

Commandline tool to customize Spotify client. Supports Windows, MacOS and Linux.

Progressive Tooling

A list of community-built, third-party tools that can be used to improve page performance.

Project Explorer

Create a tree visualization of any project with this CLI tool. When ramping people up on an existing codebase, there’s often a lot of state they have to understand about the project- where everything is, where everything starts, exceptional files. With this tool, you can generate a visualization of any project, as well modify certain directories to be open, or have notes that people can read through easily.

Colorblindly

Colorblindly is an extension that helps developers create websites for the people with colorblindness by allowing them to simulate the experience those users have on websites. The extension works by placing a CSS filter over the webpage that modifies color ratios in line with actual types of colorblindness.

Javascriptvisualizer

A tool for visualizing Execution Context, Hoisting, Closures, and Scopes in JavaScript.

Color

A tool for building and exploring color palettes.

Handtrack.js

Handtrack.js is a library for prototyping realtime hand detection (bounding box), directly in the browser. Underneath, it uses a trained convolutional neural network that provides bounding box predictions for the location of hands in an image.

Eva Icons

A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.

Cssfx

A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by CSS with minimal markup. Completely open source and MIT licensed.

Wirefy

Wirefy is a browser based responsive wireframe tool, which allows you to create functional wireframes using standard elements. Think of it as the foundation for your content to be built on. This allows you to focus on the content rather than the design to get faster sign off. Wirefy is not a one-solution answer.