40 Free Web Design & Development Tools 2018

With so many new web design tools emerging, it`s difficult to evaluate all of the available options. So in this post we`re helping you to find the best tools to meet your needs with list of 40 free tools for web designers and developers to help you with various coding and design tasks in 2018.

Cheatsheets

It`s rather impossible to remember all the APIs by heart. This is when cheatsheets jump in!

Cheatsheets

Docusaurus

Easy to maintain open source documentation websites.

Docusaurus

Prettier

It is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

ECharts

This is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products.

ECharts

lit

A ridiculously small responsive css framework.

lit

PELL

The simplest and smallest WYSIWYG text editor for web, with no dependencies

PELL

Draggable

The JavaScript Drag & Drop library your grandparents warned you about.

Draggable

src2png

Turn your source code into beautiful syntax-highlighted images.

src2png

stacks-cli

Analyze website stack from the terminal.

stacks-cli

multi.js

It is a user-friendly replacement for select boxes with the multiple attribute.

multi.js

SmartPhoto

The most easy to use responsive image viwer especially for mobile devices.

SmartPhoto

Uppy

It is a sleek, modular file uploader that integrates seamlessly with any application. It’s fast, easy to use and lets you worry about more important problems than building a file uploader.

Uppy

Super Tiny Icons

Under 1KB each! They are miniscule SVG versions of your favourite website and app logos

Super Tiny Icons

Nerd Fonts

It is a project that patches developer targeted fonts with a high number of glyphs (icons).

Nerd Fonts

Nord

Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax highlighting and UI. It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful ambiance.

Nord

PaperCSS

The less formal CSS framework, with a quick and easy integration.

PaperCSS

Shards

This is a modern design system based on Bootstrap 4 that comes packed with 10 extra custom components and two pre-built landing pages. It’s also lightweight with its stylesheet weighting only ~12kb minified and gzipped.

Shards

QuickBill

Free and Simple invoicing for freelancers and businesses.

QuickBill

Coolors

Create, save and share beautiful palettes in seconds!

Coolors

Micromodal

Tiny, dependency-free javascript library for creating accessible modal dialogs.

Micromodal

Checkbox

A huge library of CSS Checkboxes for every taste.

Checkbox

flubber

Tools for smoother shape animations.

flubber

Sizzy

A tool for testing responsive websites crazy-fast.

Sizzy

js2flowchart

A visualization library to convert any JavaScript code into beautiful SVG flowchart.

js2flowchart

AR.js

Efficient Augmented Reality for the Web – 60fps on mobile!

AR.js

Bottender

Make Bots in Your Way, Fast and Flexibly.

bottender

Webpack Monitor

A tool for monitoring webpack optimization metrics through the development process.

Webpack Monitor

Speedracer

Collect performance metrics for your library/application.

speedracer

Typefont

It is a library that detects the font of a text in a image.

Typefont

bubbly-bg

Beautiful bubbly backgrounds in less than 1kB.

bubbly

Sticky Sidebar

Pure JavaScript plugin for making smart and high performance sticky sidebar, works with sidebar if it`s taller or shorter than the viewport, integrated with resize sensor to re-calculate the dimensions automatically when the size of sidebar or its container is changed.

Sticky Sidebar

Eruda

Console for mobile browsers.

Eruda

Algolia Places

It provides a fast, distributed and easy way to use an address search autocomplete JavaScript library on your website.

Algolia Places

tlapse

Create a timelapse of your web development or just automatically take screenshots of your hard work

tlapse

Miaow

A set of plugins for Sketch include drawing links & marks, UI Kit & Color sync, font & text replacing.

Miaow

Auto-Layout

Plugin for Sketch that enables designers to design fully responsive artboards.

Auto-Layout

Cao Mei

A Free and Open Source Iconic Font Library for Developers.

Cao Mei

MegaType

Execute typographic structure with ease.

MegaType

Bulksplash

A simple command line tool that lets you bulk download images from Unsplash.

Bulksplash

Awesome Mac

This repo is a collection of awesome Mac applications and tools for developers and designers.

awesome Mac

1 Comments

  1. Learned some new stuff with very detailed information.

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.