/Frontend-Tools

Community frontend tools for developers

MIT LicenseMIT

Frontend-Tools πŸ”¨

All Contributors

Hey! I hope that you can found here some interesting tools.

If you want to add some tools that you actually use, please do it! PR's are open.

Index of content

Firefox Extensions

  • Extension 🎯 - Altair GraphQL Client

    A beautiful feature-rich GraphQL Client for all platforms

  • Extension 🎯 - ColorZilla

    Get a color reading from any point in your browser, quickly adjust this color and paste it into another program

  • Extension 🎯 - Empty Cache Button

    Cache clearing made easy. One click

  • Extension 🎯 - GraphQL developer tools

    Developer tools panel for GraphQL development

  • Extension 🎯 - JSON Lite

    Fast JSON viewer - highlights, shows items count/size, handles large files

  • Extension 🎯 - Open Pesticide

    Outlines each element on the page to help you visualize their dimensions and overcome those annoying CSS layout issues

  • Extension 🎯 - React Developer Tools

    React Developer Tools is a tool that allows you to inspect a React tree, including the component hierarchy, props, state, and more

  • Extension 🎯 - Web Developer Checklist

    Analyses any web page for violations of best practices

  • Extension 🎯 - Tota11y: Accessibility toolkit

    Inserts the tota11y JS file from Khan Academy into the current tab so that you can visualize how the current page performs with assistive technologies

Chrome Extensions

  • Extension 🎯 - React Developer Tools

    Adds React debugging tools to the Chrome Developer Tools

  • Extension 🎯 - Redux DevTools

    Adds Redux debugging tools for any architectures which handle state

  • Extension 🎯 - Grid Ruler

    Create grids and measure their distance easily

  • Extension 🎯 - Design Grid Overlay

    This extension displays grid and measurement overlays for a design grid system

  • Extension 🎯 - ColorZilla

    Get a color reading from any point in your browser, quickly adjust this color and paste it into another program

  • Extension 🎯 - VisBug

    Design debug tools

  • Extension 🎯 - Wappalyzer

    A browser extension that uncovers the technologies used on websites.

  • Extension 🎯 - JSON Viewer Awesome

    A browser extension for visualize formatted JSON responses from APIs

  • Extension 🎯 - Axe

    A browser extension that reveals accesibility issues

  • Extension 🎯 - Spider

    Spider is a smart point-and-click web scraping tool

  • Extension 🎯 - WhatFont

    The easiest way to identify fonts on web pages

  • Extension 🎯 - Lighthouse

    Audit page to improve performance. The report contain many advices

  • Extension 🎯 - Vue.js devtools

    Extension for debugging Vue.js applications

Fonts

UI Libraries

  • Web πŸš€ - Material Kit React

    New design inspired by Google's material design

  • Web πŸš€ - Material UI

    React components for faster and easier web development

  • Web πŸš€ - React Bootstrap

    The most popular front-end framework. Rebuilt for React

  • Web πŸš€ - React Virtualized

    React components for efficiently rendering large lists and tabular data

  • Web πŸš€ - Argon Design System React

    Start your development with a Design System for Bootstrap 4, React and Reactstrap

  • Web πŸš€ - BlueprintJs

    A React based UI toolkit fot the web

  • Web πŸš€ - Semantic UI

    User Interface is the language of the web

  • Web πŸš€ - React Toolbox

    Bootstrap your application with beautiful Material Design Components

  • Web πŸš€ - React Desktop

    Designe to bring a native desktop experience to the web, featuring many macOS Sierra and Windows 10 components

  • Web πŸš€ - Osen

    The most beautiful and efficient way to develop HTML5 hybrid and mobile web apps

  • Web πŸš€ - Evergreen

    A Design System for the Web

  • Web πŸš€ - Reactstrap

    Easy to use React Bootstrap 4 components

  • Web πŸš€ - RebassJs

    React primitive UI components

  • Web πŸš€ - Grommet

    Build responsive and accessible mobile-first projects

  • Web πŸš€ - Elemental UI

    A UI Toolkit for React.js Websites and Apps

  • Web πŸš€ - RsuiteJs

    A suite of React components, sensible UI design, and a friendly development experience

  • Web πŸš€ - Belle

    Configurable React Components with great UX

  • Web πŸš€ - React MD

    This project's goal is to be able to create a fully accessible material design

  • Web πŸš€ - Prime React

    The Most Complete UI Framework

  • Web πŸš€ - Kendo React UI

    UI for React Developers

  • Web πŸš€ - Nivo UI Chart

    UI for create react chart component

CSS

CSS Framework

  • Web πŸ““ - carbondesignsystem.com

    IBM Components UI Components Library

  • Web πŸ““ - bulma.io

    CSS Framework base on flexbox

  • Web πŸ““ - codyhouse.co

    Share Components and CSS

  • Package πŸ““ - Hint.css

    Tool tips with out using JavaScript

  • Package πŸ““ - Skeleton

    CSS library to quick start your project

  • Package πŸ““ - mini.css

    CSS library to provide basic template for your website

Repositories

  • Package πŸ“¦ - dumper.js

    Pretty variable inspector

  • Package πŸ“¦ - laxxx

    Javascript plugin to create smooth & beautiful animations when you scrolllll

  • Package πŸ“¦ - Nano React App

    Nano React App with Parcel

  • Package πŸ“¦ - React-Proto

    Interface and components design for React app

  • Package πŸ“¦ - React-Cosmos

    Dev tool for creating reusable React components

  • Package πŸ“¦ - guppy

    A friendly application manager and task runner for React.js

  • Package πŸ“¦ - react-lifecycle-visualizer

    An npm package for tracing & visualizing lifecycle methods of arbitrary React components

  • Package πŸ“¦ - why-did-you-render

    why-did-you-render monkey patches React to notify you about avoidable re-renders

Icons

Resources

  • Web 🌏 - geopattern

    SVG Pattern generator

    Css Docs

  • Web 🌏 - colormind.io

    Colormind is a color scheme generator that uses deep learning

  • Web 🌏 - usehooks.com

    Easy to understand React Hook recipes by Gabe Ragland

  • Web 🌏 - divjoy.com

    Use our free web-based tool to create the perfect codebase for your next project

  • Web 🌏 - javascriptstuff.com

    Learn the Latest JavaScript Tools

  • Web 🌏 - js.coach

    This is an opinionated catalog of open source JS packages

  • Web 🌏 - undesign.learn.uno

    Collection of free design tools and resources for makers, developers and designers

  • Web 🌏 - thepatternlibrary.com

    Pattern Library

  • Web 🌏 - heropatterns.com

    A collection of repeatable SVG background patterns for you to use on your web projects

  • Web 🌏 - lawsofux.com

    Laws of UX

  • Web 🌏 - humaaans.com

    Mix-&-match illustrations of people with a design library

  • Web 🌏 - uigoodies.com

    The best resources for designers in one place

  • Web 🌏 - pexels.com

    High quality photos free of copyright

  • Web 🌏 - unsplash.com

    High quality photos free of copyright

  • Web 🌏 - undraw.co

    Open-source illustrations for every project you can imagine and create

  • Web 🌏 - coolors.co

    A super fast color schemes generator!

  • Web 🌏 - colorsandfonts.com

    Color styles and font pairings for everyone

  • Web 🌏 - mcg.mbitson.com

    Material Design Palette Generator

  • Web 🌏 - www.figma.com

    A collaborative interface design tool

  • Web 🌏 - www.devwares.com/windframe

    A design and prototyping tool for building responsive websites using tailwind css

  • Templates 🏑 - templated.co

    A collection of 867 simple CSS, HTML5 & Responsive site templates, built by us and released for free under the Creative Commons

  • Templates 🏑 - vibe

    A beautiful react.js dashboard build with Bootstrap 4

  • Templates 🏑 - wireddots

    Free Bootstrap Themes & UI Kits for Startups

  • Documentation πŸ“š - devdocs

    Offline first documentation platform. It combines multiple API documentations (mostly front-end stuff) in a fast, organized, and searchable interface

React

Templates

  • Web - uicookies.com Free Responsive Bootstrap Themes and HTML Templates

Contributors

AndrΓ©s Villanueva
AndrΓ©s Villanueva

πŸ’»
Daniel DΓ­az
Daniel DΓ­az

πŸ’»
Mateo Silguero
Mateo Silguero

πŸ’»
NicolΓ‘s Avila
NicolΓ‘s Avila

πŸ’»
Daniel Mata
Daniel Mata

πŸ’»
Marcos Paulo Sarges Rolim
Marcos Paulo Sarges Rolim

πŸ’»
Ahmed Şeref
Ahmed Şeref

πŸ’»
Rodrigo Adones
Rodrigo Adones

πŸ’»
Juan Mora
Juan Mora

πŸ’»
jacob-shu
jacob-shu

πŸ’»
IvanFLeon
IvanFLeon

πŸ’»
Alessandro Digilio
Alessandro Digilio

πŸ’»
Luis Bustamante Flores
Luis Bustamante Flores

πŸ’»
Krystle Salazar
Krystle Salazar

πŸ’»

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!