69 fantastic free web tools

[Rss Bot 1]

In many occupations, solving problems and finding ways to be more productive are top priorities. This is especially true for web designers and frontend developers who perform many micro-tasks many times over. The fact we work with open web technologies that are often used to build free and open source software means we have a plethora of web design tools at our disposal.

That also means there are mountains of tools to choose from, from scripts and plugins to WordPress themes, browser extensions, native apps, web services, libraries, frameworks, website templates, graphic packs and so much more.

We've sifted through the hundreds of options available to find the best tools to try – and the best part is, all of these are free. Use the boxout on the right (or the drop-down menu above) to jump to a specific area.

HTML and CSS tools

01. ai2html

Now you can design in Illustrator and create instant HTML and CSS

This is an open-source script that converts your Ilustrator documents to HTML and CSS, from the developers at the New York Times. It looks like a really powerful and useful tool for designers who work in Adobe Illustrator. The script is a JavaScript file that you download and drop into the scripts folder of your Illustrator install.

02. Autoprefixer

You're not still writing CSS vendor prefixes by hand, are you? Keep your development files clean and let Autoprefixer (now a PostCSS plugin) do the hard work for you as part of your build process.

03. Susy

A Sass-based layout toolkit that has been steadily gaining steam since its launch. It has a strong community and offers lots of customisable features to suit the needs of just about any project.

04. Critical

Inline CSS is a requirement for good performance. Addy Osmani's Critical is available as a Grunt plugin, and along with Filament Group’s loadCSS script, it is a great option for extracting and loading your above-the-fold styles.

05. Shoelace

Shoelace is an easy-to-use Bootstrap 3 visual grid builder. Amongst its features are responsive media query views and a fully functional preview.

06. DomFlags

DomFlags makes it easier to navigate deeply-nested HTML elements in the DevTools

A Chrome extension that enables you to flag elements in the DOM using a domflags attribute. When the DevTools are opened, the first flagged element will be auto-inspected, and keyboard shortcuts can be used to navigate through the flags. This tool is handy for tackling a messy DOM that’s hard to navigate.

07. Sass Lint

Sass Lint is a node-based code quality tool for Sass/SCSS code, available as a Grunt or gulp plugin. Sass Lint is especially great for beginners who aren't too familiar with Sass best practice.

08. SMACSS

SMACSS is a scalable and modular architecture for CSS. There is nothing to download or install here, just a whole host of ideas for structuring projects both large and small. The website includes a free ebook for you to download, read and study.

09. BEM

BEM is a CSS methodology that is widely used throughout the industry. The simplicity of its naming convention helps to tackle specificity problems in CSS – enabling elements to be scoped to a block name using a double underscore and modified using a double dash.

10. Object Oriented CSS

OOCSS was born out of the backend development methodology. The core principle is around the reuse of code and Don’t Repeat Yourself (DRY) programming, the results of which are easier to maintain, with smaller CSS in your project.

Next page: Free JavaScript tools...

11. Webpack

Keep your JS files small and focused

Webpack is a JavaScript module bundler that enables you to keep your JavaScript files small and focused. In its simplest form Webpack will then bundle them all into one minified JS file which can be included in your website or application. 

12. React

Facebook's popular library includes a virtual DOM and optional JSX syntax. Its reusable components are designed to to help anyone building large, dynamic web apps.

03. Vue.js

Vue is a progressive JavaScript framework. It can be easily integrated into an already existing app and used in one small part if needed. Equally, it can be used to build full single page apps. The framework is approachable and the basics can be easily grasped. 

04. React

React is a JavaScript framework for building interactive user interfaces. The framework is developed and used by Facebook in all of its apps and websites. React aims to provide speed, simplicity and scalability for any project by providing a component based library. 

05. Svelte

Svelte is a component-based JavaScript framework, much like React, Angular and Vue but with a difference. Svelte compiles your code into vanilla JavaScript at build time – not at runtime like the others – which means no framework abstractions or lengthy load times, generating fast and performant apps. 

16. Babel

Babel enables you to use tomorrow's JavaScript today

A JavaScript transpiler that lets you use the newest ECMAScript features (ES6, now called ES2015) without having to wait for browsers to catch up.

17. annyang

A small JavaScript library to help you build voice-controlled interfaces. It has a really nice API that's easy to use. After including the library, you define your commands along with the behaviour in response to those commands.

18. List.js

Add search, sort, filters and flexibility to HTML lists and tables with List.js

This is a fast and powerful way to create search, sort and filter functionality for lists, tables or just about any type of grouped content. All you need is some HTML and a few lines of JavaScript.

19. KnockoutJS

KnockoutJS is a small and lightweight JavaScript framework — weighing in at just 59kB. It enables developers to create simple data binding for interactions with automatic UI refreshing. The KnockoutJS website also includes a really nice interactive tutorial, which can help you get started.

20. Preact

Preact is geared towards performance

Preact is a JavaScript framework that touts itself as the 'Fast 3kB alternative to React with the same modern API'. Its small size makes it quick to download, parse and execute your application. Geared towards performance and with a handy 'Switching to Preact (from React)' tutorial on the Preact website.

21. VerbalExpressions

If you’re like me and can't stand the thought of writing regular expressions from scratch, this is the library for you. It's a plain-English way to write regex, and since the return value compiles to the actual expression, it can be a great way to learn, too.

22. ESLint

If you want to make sure that your JavaScript is error-free, ESLint is an essential and versatile linting tool that you'll want to keep within reach. It comes with built-in rules enabling you to get started straight away, but its real power lies in the fact that its rules are completely pluggable, enabling you to create and dynamically load the rules that you need at any time.

23. Chart.js

This is just one of the many available JavaScript charting libraries, but it's certainly one of the nicest. There are six HTML5 canvas-based chart types, and all charts are responsive, modular and interactive. The library is small and dependency-free.

24. Quill

This is an embeddable rich text editor supported in all modern browsers, as well as IE 9 onwards and mobile. It offers powerful customisation options through a clean API.

25. Awesomplete

Awesomeplete is Lea Verou's easy-to-use form input autocomplete widget. I love that it can be used with just HTML and the library, without any extra lines of JavaScript. On top of that, it offers advanced customisation options through built-in events and methods.

26. Foundation for Apps

You’ve no doubt heard of ZURB's Foundation framework. This is a separate project specifically designed for building responsive web apps. It's based on AngularJS, but doesn't require advanced knowledge of Angular.

27. UIkit

UIkit's a plucky young competitor in the frameworks hood

While Bootstrap and Foundation are the clear winners in terms of popularity in the framework space, UIkit is worth checking out. Its core features and interface components are right up there with the big kids on the block.

28. PostCSS

PostCSS is a toolkit of JavaScript plugins that helps you take advantage of the latest standards and conveniences in CSS development. There are plugins for linting CSS, working with variables and mixins, transpiling future CSS syntax and more. It’s well worth looking into.

Next page: more free web design tools...

29. Typorama

This iOS app is packed with image editing options

Typorama is an iOS app that enables anyone – with design skills or not – to create awesome graphics. Packed full of image editing features and beautiful typography options, it’s like Instagram on steroids. The app is frequently updated and has gathered a loyal following since its launch in 2015.

30. Sparkline Typeface

The Sparkline Typeface enables you to create sparkline graphs using just a font, no need for complicated JavaScript libraries and configurations. While it can be limited, it’s also a huge timesaver.

31. Coolors

Coolors is ideal for colour palette inspiration

Coolors is a great little web app for when you need inspiration; fire up the app and hit the Spacebar to generate a random colour pallet. Once you find a colour you like you can ‘lock’ that colour and hit the Spacebar again to generate more colours. 

32. FontBase

FontBase is a font management tool which works across all platforms, offering a beautiful and intuitive UI for searching and sampling fonts. It also enables fonts to be shared among teams so you’ll never need to hassle your designer to send you the fonts ever again! Paid plans are available.

33. Google Fonts

Google Fonts offers a large selection of free web fonts which can be used on any project. The interface is clean and minimal but enables you to easily see and test new fonts. It also offers a number of different ways to include the fonts in your project.

34. Adobe Capture

Adobe Capture is a smartphone app – available for Android and iOS – that enables you to take photos of anything inspirational, and then generate colour palettes, vector shapes and repeating patterns, all of which you can upload to Adobe’s Creative Cloud.

35. Font Base

Font Base is a font management tool which works across all platforms, offering a beautiful and intuitive UI for searching and sampling fonts. Font Base also enables fonts to be shared among teams so you’ll never need to hassle your designer to send you the fonts ever again!

36. AllTheFreeStock

This is a massive single resource where you can search for free stock photography from loads of different sites. It includes popular free sources such as Unsplash, along with other, lesser-known sites, to give you plenty of options for populating your designs.

37. Transformicons

Transformicons: SVG and CSS icons that can be animated with CSS transitions

Transformicons is a different kind of icon set. These are SVG- and CSS-based icons that incorporate CSS transitions for an animated effect that can be controlled with some JavaScript.

38. Octicons

There are countless options for icons, and GitHub has released its own nicely designed set. Octicons is available as an icon font (or web font), which is commonly inserted into a page using CSS pseudo-elements.

39. Ionic

Ionic is a popular library of mobile-optimised CSS and JavaScript components

One of the biggest HTML5-based mobile app development frameworks, built with mobile-optimised CSS and JavaScript components, Ionic boasts a very strong community – which is great for those looking for a good long-term option.

40. Embed Responsively

A simple online tool that enables you to grab responsive embed codes for all sorts of popular media sources. It supports YouTube, Vimeo, Google Maps, Instagram, Vine and more.

41. Tablesaw

Responsive tables are one of the most difficult layout considerations. Tablesaw is a set of jQuery plugins to help in this area, by means of features like stack, toggle, minimap and more.

42. Froala Design Blocks

Froala has over 170 ready-made design blocks to choose from

There's a strong case for using tried and tested design patterns – people know how to use them, and if your client wants evidence, there's plenty of user testing that shows them to be effective. A resource like Froala Design Blocks is ideal for putting sites together quickly, with over 170 design blocks that you can assemble into a great-looking, responsive site.

43. Site Palette

Site Palette is a Chrome extension that enables you to grab the colour scheme from any website, which you can then turn into a number of useful elements, such as Sketch Templates and Adobe Swatches, or you can print or download them. 

44. Atomic Design

Atomic Design is a methodology for creating design systems. It breaks design into five different levels: Atoms, Molecules, Organisms, Templates and Pages. Each level can and should include elements from the previous layers to build up designs. 

45. Wireframify

Wireframify is a Chrome extension that enables you to turn any website into a wireframe. It works by applying a custom stylesheet onto the website, which removes all images and modifies all of the colours and borders, leaving you with what looks like a wireframe.

Next page: Free animation tools

46. KUTE.js

KUTE.js is a JavaScript animation framework, built with fast code execution and memory efficiency in mind. With everything from two and three dimensional transforms to SVG manipulation KUTE.js is a strong contender for creating simple and lightweight animations.

47. Anime

Anime produces seamless animations

Anime is a JavaScript animation library packed full of features. The library is performant and produces beautiful, seamless animations. There’s detailed documentation on the website and a variety of demos produced by the developer Julian Garnier on his CodePen. 

48. Blotter

Blotter is a JavaScript API for drawing unconventional text effects. Powered by three.js and underscore.js it is capable of producing some weird and wonderful animated text effects. The library offers five different material effects all of which can be customised.

49. Animate.css

Animate.css is a small library of CSS animations, which can be used to add subtle (or not so subtle in some cases) animations to elements in your page. All you need to do is include the Animate.css code and then use the classes provided to animate elements in your application.

50. three.js

A 3D animation library

three.js is a 3D animation library built for the web. three.js works by creating a three-dimensional scene in which objects are rendered, a camera is then placed inside this scene. Some of the best animated websites on the web utilise three.js!

51. GSAP

GSAP is a powerhouse when it comes to web animation. Starting life as a Flash animation plugin, it has since evolved to be one of the best web animation libraries available, enabling complex animations and time-based functions to be easily authored.

52. Vivus

A dependency-free JavaScript library that animates your SVGs, giving the appearance of drawing. The on-page demos are well worth checking out.

53. AniCollection

A library of CSS animations

AniCollection is a library of CSS animations. It sports an interface that enables you to easily add animations to your collection and quickly grab the necessary HTML, CSS or JavaScript code to implement them in your project. You can even submit your own.

Next page: Build and testing tools

54. SVGOMG

SVGOMG is an online tool for optimising SVG. Under the hood SVGOMG uses the incredibly powerful command-line tool SVGO to perform optimisations, but SVGOMG does so while visually showing you any changes the optimisation has made to an image.

55. Yarn

Yarn is a package manager. It works much the same as Node Package Manager (npm). Yarn caches every package making it incredibly fast to download and install dependencies, and with all of the same packages as npm so you can easily make the switch.

56. BetterBoilerplate

The BetterBoilerplate offers a scaffolding for any new project. It’s packed full with build tools, file management and a robust CSS framework. The BetterBoilerplate is development environment agnostic and can be used for any project from small brochure websites to full SAAS projects.

57. Browsersync

Browsersync is a powerful tool for synchronised cross-device testing and live debugging

Browsersync is like LiveReload, but on steroids. It's a powerful tool for synchronised cross-device testing that will live-reload your project for every edit and save in all browser instances. It even syncs up navigation and scrolling in the browser sessions. You can add CSS outlines for debugging, and a latency option enables you to mimic a slower internet connection.

58. Google PageSpeed Insights

Google Page Speed Test is an online tool used to analyse a website and give a score based on performance. You start by entering the URL of your website and running the test, Google will then suggest ways in which the site’s performance can be improved.

59. Vue.js DevTools

Vue.js has optional devtools, which enable you to inspect component states, track events and access all of the data held in the virtual DOM. This is extremely useful when working with Vue.js and is a much nicer alternative to console logging all of these things.

60. Web Developer Toolbar

The Web Developer toolbar has been around for almost as long as web design has, but it’s still really useful for web development today, offering a number of really handy tools, from deleting cookies to displaying an image’s alt text.

61. Gulp

Gulp takes care of repetitive tasks

Gulp is a frontend build tool used to perform any number of functions from compiling Sass to building SVG sprites. Gulp will save you time and perform a lot of the repetitive tasks required, enabling you to concentrate on writing code and building applications.

62. Grunt

This frontend build tool is used in the same way as Gulp, with the aim of saving you time and effort when building the frontend of any website or app. These tools have become an important part of frontend development due to their ability to perform repetitive tasks.

Next page: Best of the rest

63. CodePen

CodePen is the go-to code playground for most frontend developers. The UI is clean and has support for most of the popular frameworks in HTML, CSS and JavaScript. The ‘Picked Pens’ section on the homepage is a great place to find inspiration and see some of the amazing community creations. 

64. Atom

GitHub’s text editor can be customised to suit your needs

The GitHub dev team's hackable text editor for modern development, Atom comes full-featured, with packages, themes, smart auto-completion, multiple panes and more. Best of all, it can be fully customised via HTML, CSS and JS.

65. Brackets

Adobe’s contribution to the text editor race is an open source editor with focused visual tools, preprocessor support, and the ability to ease in-browser design through live preview. It also integrates well with Photoshop via the Extract for Brackets extension.

66. Lorem Ipsum Generator

Both designers and developers rely on lorem ipsum text when producing mockups and testing type. loremipsum.io has a host of plugins for text editors and programming languages. The generator’s page has some comical alternatives too.

67. Pastebin

Pastebin is great when you just need to share a snippet of code, you go to the website, paste the code, copy the link and send it. You can add optional settings such as syntax highlighting and choose how long your URL will last.

68. Let's Encrypt

Let's Encrypt will help you switch a project over to HTTPS

If you’re looking to switch a project over to HTTPS, you’ll want to investigate this option. It's a free, open and automated certificate authority that provides you with a hassle-free way to go secure.

69. Accessible HTML5 Video Player

This is a video player from the PayPal accessibility team. It has custom controls and a keyboard-accessible and screen reader-supported UI. There are no scripting dependencies and it uses HTML5 form controls for volume and progress indicators.

Related articles:

• Top prototyping tools
• The 18 best wireframe tools
• The best colour tools for web designers

View the full article