Resources

Checklists

• The Front-End Checklist: It's perfect for modern websites and meticulous developers! Follow the rules and deliver the best of your work in a generated report!

Debugging

• Source Map Visualization: A visualization of JavaScript/CSS source map data, which is useful for debugging problems with generated source maps.

Documentation

• DevDocs: Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app: HTML, CSS, JavaScript, PHP, Ruby, Python, Go, C, C++…

Generators

• Colour Palette Generator: Super Fast Color Palette Generator! Just click the Generate button or press Spacebar to get new color scheme instantly.
• CSS Grid Generator: A user-friendly tool designed for web developers to effortlessly create customizable CSS grids for seamless web development.
• CSS Layout Generator: A CSS Grid generator & CSS Flexbox generator. A tool for generating UI layout component code.
• Fancy Border Radius Generator: A visual generator to build organic looking shapes with the help of CSS border-radius property.
• Scrollbar.app: Simple CSS scrollbar editor.
• Tailwind Generator: Collection of useful tools and generators for Tailwind to create, design and customize all kind of web components using a graphical editor.
• Tailwind Grid Generator: A user-friendly tool designed for web developers to effortlessly create customizable Tailwind CSS grids for seamless web development.

Icons & Illustrations

• Avaaatars: The largest Library of Avatars in the world. Customizable and commercially free.
• Devicon: A set of icons representing programming languages, designing, and development tools.
• Lucide: Beautiful & consistent icon toolkit made by the community.
• Reshot: Design freely with instant downloads of curated SVG icons and vector illustrations. All free with commercial licensing. No attribution required.
• svgl: A beautiful library with SVG logos.
• Tabler Icons: +5800 free and open source SVG icons. Customizable size, color and stroke. Available for React, SolidJS, Vue, Figma and more for free!

Image Editors

• CodeSnap: An image editor for developers, who want to share beautiful images of their code.
• PostSpark: Quickly create stunning screenshots for social media with customizable backgrounds, browser frames, aspect ratios, borders, and more. Enhance your posts in just a few clicks!
• Shots: Create Amazing Mockups.

Image Tools

• bg.addy.ie: Free image background removal - private, client-side and powered by Transformers.js
• ITOA: Convert images to ASCII art with optional color support.
• Squish: Fast, efficient batch image compression right in your browser. Supports AVIF, JPEG, JXL, PNG, and WebP formats with adjustable quality settings.
• Squoosh: An image optimizer that allows you to compress and compare images with different codecs in your browser.

Loading Animations

• LDRS — UI Ball: Free, open-source loading animations. Available as copy/paste HTML or drop-in web components. Compatible with every modern framework.
• magecdn - SVG Spinners: 100+ Open Source SVG Spinners. No attribution required.

NPM Package Analysis

• Bundlephobia: Bundlephobia helps you find the performance impact of npm packages. Find the size of any javascript package and its effect on your frontend bundle.
• NPM Chart: Visualize npm downloads in a beautiful chart, ready to be shared with your community.

Playground

• codi.link: Live editor for HTML, CSS and JS. Edit your code in real-time, and see the result instantly.
• SQL Playground: Explore, learn, and share SQL queries in our free online SQL playground. Support for MySQL and PostgreSQL, perfect for testing and enhancing your SQL skills.
• RunTS: A TypeScript playground for running typescript code with: Themes, Auto-refresh, Live execution, Open Source, Open to contributions.
• Tailwind Play: An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

Snippets

• BG.IBELICK: A collection of modern background snippets for web developers. Ready-to-use snippets crafted with Tailwind CSS and Vanilla CSS for seamless integration.
• Tremor: Open-source, accessible React UI components styled with Tailwind CSS to build charts and dashboards.

Testing

• RegExr: Regular expression tester with syntax highlighting, PHP / PCRE & JS Support, contextual help, cheat sheet, reference, and searchable community patterns.

UI / UX

• CallToInspiration: Small details for very exacting ideas! A great tool created by a deisnger for web professionals.
• Colors & Fonts: Explore Colors & Fonts, your go-to resource for color and typography tools designed for web developers and digital designers.
• Fontjoy: Fontjoy helps designers choose the best font combinations. Mix and match different fonts for the perfect pairing.
• Fontsource: Download and self-host 1500+ open-source fonts in neatly bundled NPM packages. Access a comprehensive library of web typefaces for free.
• Happy Hues: See color palette inspiration on a real example website. As you click on different palettes every color on this site updates to give you context of how that color could be used for your design or illustration projects.
• OKLCH Color Picker & Converter: OKLCH is a new way to encode colors (like HEX, RGBA, or HSL).