/frontend-tools

Links to front-end development tools

Front-end development tools (mostly)

Table of contents

Tools catalog / search / discovery service ↑ ↑ ↑

  • awesome - A curated list of awesome lists.
  • awesome-react-components - Catalog of React components / libraries.
  • bestof.js.org - A place to find the best components to build amazing web applications.
  • CSS Script - A Javascript & CSS code library aims to provide the newest, best and free CSS & javascript resources for web/mobile developers and designers.
  • iReact - Helps you discover the most fantastic, powerful React Components and Libraries, and makes it easy for you to pick one that’ll work for you.
  • JavaScripting - The definitive source of the best JavaScript libraries, frameworks, and plugins.
  • JavaScriptOO - Every javascript project you should be looking into with examples, categories, install commands, CDN links, project and author stats, and more.
  • jQuery Plugins - Categorized collection of jQuery plugins.
  • JqueryScript.Net - One of jQuery Plugin websites that provide web designers and developers with a simple way to preview and download a variety of Free jQuery Plugins.
  • JSter - A catalog of frontend JavaScript libraries.
  • JS.coach - An opinionated catalog of open source JS packages.
  • LibHunt - Our goal is to help you find the software and libraries you need. All lists have been crafted by many experts from the relevant GitHub communities.
  • Libraries.io - Helps developers find new open source libraries, modules and frameworks and keep track of ones they depend upon.
  • MicroJS - Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit!
  • Node Frameworks - Hand-picked registry of Node.js frameworks.
  • NPMCompare - Search and compare npm packages.
  • npms - A better and open source search for node modules.
  • npmsearch - Search for node packages on the npm registry.
  • Redux Ecosystem Links - A categorized list of addon libraries for Redux, as well as other libraries that are closely related.
  • StackShare - Discover & discuss the best software tools & services.
  • StaticGen.com - A leaderboard of top open-source static site generators.
  • Unheap - A tidy repository of JavaScript plugins.
  • VueScript.com - Aims to offer latest free Vue.js components for web application developers.
  • webcomponents.org - A place to publish, browse and search for reusable web UI components.

ECMAScript specification ↑ ↑ ↑

JavaScript variant, compiler, transpiler ↑ ↑ ↑

  • Babel - a JavaScript compiler.
  • Bublé - fast, batteries-included ES2015 compiler.
  • TypeScript - a typed superset of JavaScript that compiles to plain JavaScript.

JavaScript framework ↑ ↑ ↑

  • Angular 2 - a development platform for building mobile and desktop web applications.
  • Aurelia - a JavaScript client framework for mobile, desktop and web leveraging simple conventions and empowering creativity.
  • choo - framework for creating sturdy frontend applications.
  • cyclow - a reactive frontend framework.
  • dva - React and Redux based, lightweight and Elm-style framework.
  • Ember - a framework for creating ambitious web applications.
  • HyperApp - a JavaScript library for building frontend applications.
  • Mithril - a modern client-side Javascript framework for building Single Page Applications.
  • qooxdoo - a universal JavaScript framework that enables you to create applications for a wide range of platforms.

JavaScript UI (view) library / framework ↑ ↑ ↑

  • Inferno - An extremely fast, React-like JavaScript library for building modern user interfaces.
  • jComponent - A component library for creating reusable components with jQuery.
  • Marko Widgets - A UI component building library that utilizes Marko templates as the view. It offers advanced features like DOM diffing/patching, batched updates, stateful widgets, declarative event binding and efficient event delegation.
  • Monkberry - Blazingly fast, small and simple JavaScript library for building web user interfaces.
  • Moon - A minimal, blazing fast user interface library.
  • Preact - Fast 3kb alternative to React with the same ES6 API.
  • React - A JavaScript library for building user interfaces.
  • Riot - A React-like user interface micro-library.
  • Svelte - Rather than interpreting your application code at run time, your app is converted into ideal JavaScript at build time.
  • Vue.js - Simple yet powerful library for building modern web interfaces.

React-based UI (components) library ↑ ↑ ↑

  • Ant Design - An enterprise-class UI design language and React-based implementation.
  • Blueprint - A React-based UI toolkit for the web. It is optimized for building complex, data-dense web interfaces for desktop applications.
  • Elemental UI - A UI Toolkit for React.js Websites and Apps.
  • Essence - The Essential Material Design Framework.
  • Grommet - The most advanced UX framework for enterprise applications.
  • Material-UI - A Set of React Components that Implement Google's Material Design.
  • react-md - A set of React components and sass files for implementing Google's Material Design.
  • React-MDL - A set of React components build on top of Material Design Lite.
  • React Toolbox - A set of React components that implement Google's Material Design specification.
  • Rebass - Configurable React Stateless Functional UI Components.

Vue-based UI (components) library ↑ ↑ ↑

  • Element - a Vue.js 2.0 UI Toolkit for Web.
  • iView - a high quality UI Toolkit built on Vue.js.
  • Keen UI - a lightweight collection of essential UI components written with Vue.js and inspired by Material Design.
  • Muse UI - a Vue 2.0 and Material Design based UI component library.
  • Quasar Framework - build responsive websites, hybrid mobile Apps (that look native!) and Electron apps using same code, with VueJs 2.
  • Vuetify.js - a component framework for Vue.js 2.
  • Vue Material - lightweight framework built exactly according to the Material Design specs. It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to all modern Web Browsers through Vue 2.

Data / model / state management library ↑ ↑ ↑

  • Breeze - the data management library for developers of rich client applications written in JavaScript. If you store data in a database, query and save those data as complex object graphs, and share these graphs across multiple screens of your JavaScript client, Breeze is for you.
  • Cerebral - a state controller with its own debugger.
  • freactal - a composable state management library for React.
  • JSData - inspired by Ember Data, JSData is the model layer you've been craving. It consists of a convenient framework-agnostic, in-memory store for managing your data, which uses adapters to communicate with various persistence layers.
  • MobX - a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming.
  • NuclearJS - reactive Flux built with ImmutableJS data structures.
  • Redux - a predictable state container for JavaScript apps.
  • Transis - a JavaScript data modeling library useful for creating rich client-side experiences.

Database ↑ ↑ ↑

  • DataScript - immutable database and Datalog query engine for Clojure, ClojureScript and JS.
  • ForerunnerDB - a NoSQL JavaScript JSON database with a query language based on MongoDB (with some differences) and runs on browsers and Node.js.
  • LokiJS - a fast, in-memory document-oriented datastore for node.js, browser and cordova.
  • Lowdb - a small local database for small projects (powered by lodash API).
  • NeDB - embedded persistent or in memory database for Node.js, nw.js, Electron and browsers, 100% JavaScript, no binary dependency.
  • RxDB - reactive, serverless, client-side, offline-first database.
  • TingoDB - an embedded JavaScript in-process filesystem or in-memory database upwards compatible with MongoDB at the API level.

JavaScript utility library ↑ ↑ ↑

  • 101 - a modern JS utility library.
  • Lodash - a modern JavaScript utility library delivering modularity, performance & extras.
  • Mout - a collection of modular JavaScript utilities that can be used in the browser as AMD modules or on node.js.
  • Sugar - a Javascript utility library for working with native objects.
  • Underscore - a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects.

JavaScript module system and loader ↑ ↑ ↑

Module and asset bundler ↑ ↑ ↑

  • Browserify
  • FuseBox - a bundler/module loader that combines the power of webpack, JSPM and SystemJS. It will compile and bundle your code within a fraction of a second, yet offering a comprehensive loader API.
  • gluejs
  • Lasso.js - JavaScript module bundler that also provides first-level support for optimally delivering JavaScript, CSS, images and other assets to the browser. Offers many different optimizations such as a bundling, code splitting, lazy loading, conditional dependencies, compression and fingerprinted resource URLs.
  • Rollup
  • SystemJS Builder
  • webpack

Package manager ↑ ↑ ↑

  • Bower - a package manager for the web.
  • Duo - a next-generation package manager that blends the best ideas from Component, Browserify and Go to make organizing and writing front-end code quick and painless.
  • jspm - registry and format agnostic JavaScript package manager for the SystemJS universal module loader.
  • npm - a package manager for JavaScript.

Front-end / CSS framework ↑ ↑ ↑

  • Blaze
  • Bootflat (Bootstrap-based)
  • Bootstrap
  • Bulma - A modern CSS framework based on Flexbox.
  • Flat UI - a beautiful theme for Bootstrap.
  • Foundation
  • Froala Design Blocks - A set of 170+ Bootstrap based design blocks ready to be used to create clean modern websites.
  • GroundworkCSS
  • Ink
  • inuitcss
  • Kube - a web framework for professional developers and designers alike. Kube is a wireframe, a skeleton for your project, in a way.
  • Leaf (outdated) - A CSS framework based on Google's material design.
  • Materialize
  • Material Framework
  • Metro UI - The front-end framework for developing projects on the web in Windows Metro Style.
  • Polymer
  • Semantic UI - a development framework that helps create beautiful, responsive layouts using human-friendly HTML.
  • Spectre.css - a lightweight, responsive and modern CSS framework for faster and extensible development.
  • Topcoat
  • Turret - a styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites.
  • UIkit - A lightweight and modular front-end framework for developing fast and powerful web interfaces.
  • Small CSS library / toolkit ↑ ↑ ↑
    • Basscss - Low-Level CSS Toolkit, a lightweight collection of immutable utilities designed for speed, clarity, performance, and scalability.
    • Cutestrap - A sassy, opinionated CSS Framework. A tiny alternative to Bootstrap.
    • mini.css - A minimal, responsive, style-agnostic CSS framework.
    • Mobi.css - A lightweight, flexible css framework that focus on mobile.
    • Picnic CSS - An invasive CSS library to get your style started.
    • Pure - A set of small, responsive CSS modules that you can use in every web project.
    • Skeleton - A dead simple, responsive boilerplate.
    • Wing - A minimal, responsive CSS framework.

CSS processor ↑ ↑ ↑

  • EQCSS - A CSS Extension for Element Queries & More.
  • Less - The dynamic stylesheet language.
  • PostCSS - A tool for transforming CSS with JavaScript.
  • Sass - An extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more.
  • Stylus - Expressive, robust, feature-rich language, providing an efficient, dynamic, and expressive way to generate CSS.
  • AVA
  • BackstopJS - automates visual regression testing of your responsive web UI by comparing DOM screenshots over time.
  • CodeceptJS - acceptance testing framework for NodeJS. CodeceptJS is a testing framework for end-to-end testing with WebDriver (or others). It abstracts browser interaction to simple steps which is written from a user perspective.
  • Cypress - a test engine that runs unit and integration tests in your browser.
  • Enzyme - a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.
  • Intern
  • Jasmine
  • Jest
  • Karma
  • Mocha
  • QUnit
  • Sazerac - data-driven testing for JavaScript. It helps you create simple, readable tests and works with Jasmine, Jest, and Mocha.
  • tape
  • TestCafe - a pure node.js end-to-end solution for testing web apps. It takes care of all the stages: starting browsers, running tests, gathering test results and generating reports.
  • Testem

Linting / validation ↑ ↑ ↑

Documentation ↑ ↑ ↑

  • documentation.js - The documentation system for modern JavaScript.
  • Docute - Effortlessly documentation done right.
  • ESDoc - A documentation generator for JavaScript (ES6).
  • JSDoc - An API documentation generator for JavaScript.
  • YUIDoc - A Node.js application that generates API documentation from comments in source, using a syntax similar to tools like Javadoc and Doxygen.

Task runner / build tool / automation ↑ ↑ ↑

  • Brunch
  • Grunt
  • Gulp
  • nps - all the benefits of npm scripts without the cost of a bloated package.json and limits of json.
  • scripty - a tool to help extract npm scripts into their own files.
  • shx - a wrapper around ShellJS Unix commands, providing an easy solution for simple Unix-like, cross-platform commands in npm package scripts.
  • xclap - an advanced and flexible JavaScript task executor and build tool.
  • ygor - JavaScript task runner for when npm run isn't enough and everything else is too much.

Development server ↑ ↑ ↑

  • Node.js-based ↑ ↑ ↑
    • Browsersync - Keep multiple browsers & devices in sync when building websites.
    • EasyMock Server
    • freddie
    • http-server - a simple, zero-configuration command-line http server.
    • JSON Server - get a full fake REST API with zero coding.
    • Puer - more than a live-reload server , built for efficient frontend development.
    • servedir - a simple Node web server for offline development and testing: running servedir from a directory will create a quick local web server.
    • server-with-benefits - A static Node.js file web server with options for proxing requests and delaying/mocking responses.
    • Superstatic (with proxy)
  • With PHP support ↑ ↑ ↑
    • AppServ - a full-featured of Apache, MySQL, PHP, phpMyAdmin.
    • Devserver - a complete and ready-to-use development environment. Devserver is portable, modular, fully configurable and easy to update and extend.
    • Uniform Server - a lightweight server solution for running a web server under the WindowsOS.
    • UwAmp - free Wamp Server with Apache MySQL PHP and SQLite.
    • VertrigoServ - a complete free WAMP server allowing PHP development for Windows.
    • WampServer - a Windows web development environment. It allows you to create web applications with Apache2, PHP and a MySQL database.
    • WPИ-XM - a free and open-source web server solution stack for professional PHP development on Windows.
    • WTServer - a portable, preconfigured, lightweight, fast and stable server stack for developing php mysql applications on windows, based on the excellent webserver Nginx.
    • XAMPP - a completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl.

Playground, online development ↑ ↑ ↑

  • CodePen - a playground for the front end side of the web. It's a place to build and deploy a website, show off your work, build test cases, and find inspiration.
  • CodeSandbox - an online web application editor. Makes it easier to create, share and reuse web projects with others.
  • ESNextbin - create browser programs in ES2015 code and import modules from NPM in browser.
  • JS Bin - an open source collaborative web development debugging tool. Write code and have it both save in real-time, but also render a full preview in real-time.
  • jsFiddle - an online playground for your JavaScript, HTML, CSS.
  • Repl.it - simple, reliable, and portable cloud coding interface. A community of teachers, students and engineers.
  • RequireBin - create programs in the browser using modules from NPM.
  • RunKit - a node playground in your browser.
  • Storybook - a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.
  • Webpackbin - a service to share and teach code, using webpack to bundle the code.

Site generator ↑ ↑ ↑

  • DocPad - a dynamic static-site generator. That is a content management system that takes content from several sources, like files on your computer, and renders them into incredibly fast static output.
  • Gatsby - blazing-fast static site generator for React.

Emulator, simulator ↑ ↑ ↑

  • Responsinator - helps website makers quickly get an indication of how their responsive site will look on the most popular devices.
  • Screenfly - allows you to view your website on a variety of device screens and resolutions.

Browser extension ↑ ↑ ↑

Benchmark ↑ ↑ ↑

Hosting, cloud services ↑ ↑ ↑

  • 000webhost & hostinger.ru - zero cost website hosting with PHP, MySQL, Cpanel & no ads.
  • 5apps Deploy - a turn-key deployment and hosting platform for client-side web apps.
  • Appback - provides a backend as a service (BaaS) for web and mobile applications.
  • Backendless - a leading mBaaS and powerful Mobile Application Development Platform that enables rapid development of feature-rich mobile, desktop and browser-based applications.
  • Cloudnode - a place to get your Javascript web applications up and running.
  • Heroku - a cloud platform that lets companies build, deliver, monitor and scale apps.
  • Microsoft Azure - quickly create powerful cloud apps for web and mobile clients.
  • Modulus - application container platform. Deploy, scale, and monitor apps in the language of your choice.
  • OpenShift - Red Hat's Platform-as-a-Service (PaaS) that allows developers to quickly develop, host, and scale applications in a cloud environment.
  • Surge - static web publishing for front-end developers.

Useful articles & resources ↑ ↑ ↑

Table of contents ↑