Frontend links

Everyday use

• MDN Web Docs The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
• VSCodium Free/Libre Open Source Software Binaries of VS Code. Microsoft’s vscode source code is open source (MIT-licensed), but the product available for download (Visual Studio Code) is licensed under this not-FLOSS license and contains telemetry/tracking.
• Firefox Faster page loading, less memory usage and packed with features, the new Firefox is here.
• Can I use Support tables for HTML5, CSS3, etc. "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
• Caninclude 'Caninclude' tool to help determine if one HTML tag can be included in another HTML tag
• GitHub GitHub is where over 73 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat...
• Bitwarden Bitwarden is the most trusted password manager for passwords and passkeys at home or at work, on any browser or device. Start with a free trial.
• Proton Pass Stockez, partagez et synchronisez des mots de passe, des clés d'accès, des alias d'adresse e-mail et plus encore, sur n'importe quel appareil, avec notre gestionnaire de mots de passe open source gratuit. Pas d'essai, juste gratuit pour toujours.
• LocalSend An open-source cross-platform alternative to AirDrop

Accessibility

• Spätzi Spätzi, l'assistant contrastes. Vérifiez et optimisez le contraste de vos couleurs selon les standards d'accessibilité (WCAG et APCA). Explorez les variations de couleurs en OKLCH pour créer des palettes accessibles.
• A11y accessibility check for text colour on background image This is a guide to foreground colour accessibility on a background image. It is intended as guide for designers and developers to test if their design solution is accessible.
• Web Accessibility Manual by Mike Mai Practical tips on upping your web accessibility skills 10x.
• Color & Contrast Color & Contrast is a comprehensive guide to color for user interface designers.
• WAVE Web Accessibility Evaluation Tool WAVE® is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities.
• EightShapes Contrast Grid Test many foreground and background color combos for compliance with WCAG 2.0 minimum contrast.

AI

• Detect AI-generated images at scale Our AI image detector automatically detects images from popular AI generators. No watermarks needed.

Animation

• Frame Zero The Whiteboard Video Editor. A simpler way to create animated videos. Built for explaining ideas visually.

Archiving

• archive.today archive.ph allows you to create a copy of a webpage that will always be up even if the original link is down

Audio waveforms

• Sound Wave Generator - WaveVisual WaveVisual helps you create your unique sound wave art based on a sound of your choice. Simply upload your audio, pick a song from Spotify or start with a sample.
• Waveformer Visualizing your audio in vector waveforms

Avatars

• Avamake Avatar creator / generator.
• PixelMe - Make your Pixel Avatar in no time Make your 8bit pixel avatar and sell it as an NFT!

Benchmarks

• The Page Speed Optimization Tool Website speed analysis and optimization
• Project Wallace Project Wallace is a set of CSS analyzers that check your complexity, specificity, performance, Design Tokens and much more. And all of that in a single web app.
• CrawlerCheck Instantly check if Google bots and AI crawlers can access your website.
• Browser Score How does my Browser Score?

Backgrounds and patterns

• Durves - Design Pattern Tool A tool for creating and exporting dot patterns for graphic designers, UI/UX, and other visual professionals.
• Seamless Textures - Architextures Browse and download thousands of seamless textures for use in 3d models, drawings and moodboards
• Perlin Noise Maker Create your own images of Perlin noise! This app will generate tileable Perlin noise textures which is a useful raw material for may image processing applications.
• Pattern Monster - SVG Pattern Generator A simple online pattern generator to create repeatable SVG patterns. Perfect for website backgrounds, apparel, branding, packaging design and more.
• Create beautiful SVG backgrounds for your UI designs. Create beautiful SVG backgrounds for your UI designs.
• Free svg background generator Free svg background generator for your websites, blogs and app.
• Basic Pattern Repository A collection of hand-coded SVG 's, ready to be used in inline SVG or however you like.

Background removers

• Background Image Remover Remove image backgrounds automatically in seconds with just one click. Don't spend hours manually doing it yourself.
• BgSub Remove or replace backgrounds from images in just 5 seconds, intelligently adjust colors, all in the browser, no need to upload your images
• Cleanup.pictures Remove objects, people, text and defects from any picture for free. Create a clean background for a product picture 📸, re-design any items 👠, fill up some missing space for a youtube thumbnail 🎬, You can use it to iron your shirts 👕...etc!
• FocoClipping FocoClipping is an online image background remover to remove image background freely by smart AI. Then edit, crop, change background, add shadows to perfect your photos!

Base64

• b64.io - image optimisation & base64 encode b64.io online image optimizer and base64 encoder

Boilerplates

• A Blog Post With Every HTML Element Patrick Weaver’s Website
• Sample markup containing all HTML5 elements :potable_water: Sample markup containing all HTML5 elements for jumpstarting/testing css - GitHub - dbox/html5-kitchen-sink: Sample markup containing all HTML5 elements for jumpstarting/testing css

CDN

• JS delivr A free CDN for open source project. Optimized for JS and ESM delivery from npm and GitHub. Works with all web formats.
• raw.githack.com CDN for your source code. A decade proven way to serve files from source code hostings with proper Content-Type headers

Characters and glyphs

• MITOS ASCII art generator for brand assets
• Charcuterie Charcuterie is a visual explorer for Unicode. Browse characters, discover related glyphs, and explore scripts, symbols, and shapes across the standard.
• SYMBL (◕‿◕) Explore symbols, characters, hieroglyphs, scripts, and alphabets on SYMBL (◕‿◕). Find and copy 😎 Emojis, ❤ hearts, → arrows, ★ stars. Complete Unicode table, interesting facts, and technical information
• CopyChar A basic app that allows you to find and copy special characters to your clipboard. Click or tap on a character and it will be copied to your clipboard.
• Glyphy Glyphy is a simple online tool that allows you to easily copy popular ASCII characters & other symbols (also known as glyphs) to your device's clipboard, so that you can then paste them to any document or app you want. Copy and paste glyph's such as ‣ ÷ ½ → ✓ ♥ ⌘ … with ease!
• Text symbols - MockoFUN 😎 Over 1000 text symbols that are free to copy and paste. MockoFun is an online text editor with fonts that you can use for free!
• ¿©hara¢ter(s)! | A typographic cheat sheet. A typographic cheat sheet. Simple overview page for special characters and their shortcodes. Comes as an easy to use web app.
• Webmoji Explore thousands of emojis right in your web browser. Search, copy, and use. All for free, accessible to all.
• Kaomoji Cool Club Welcome to club ヾ(𐂲◡𐂲)ゞ

Charts and diagrams

• DataType Datatype is a variable font that turns text into charts.
• Mono Sketch An ASCII graph drawing app.
• Wiretext — Unicode Wireframe Design Tool A spatial design tool where everything renders as Unicode box-drawing characters. Create wireframes, diagrams, and mockups. Share as text.
• ASCII Drawing Board Set a brush (almost any unicode character), canvas size and export art as a text file.
• Make Graph Create Beautiful Charts and Graphs Online. Transform your data into stunning visualizations with our free, powerful chart maker. No downloads, no sign-ups—just beautiful charts in seconds.
• ASCIIFLOW Draw boxes by dragging from one corner to another. Boxes can be resized and moved with the Select & Move tool. Pan around the canvas by holding space and dragging with the mouse. Use cmd + z to undo and cmd + shift + z to redo. View shortcuts by pressing alt.
• CASCII A web-based ASCII and Unicode diagram builder written in vanilla Javascript
• Chart.xkcd Chart.xkcd is a chart library plots “sketchy”, “cartoony” or “hand-drawn” styled charts.
• ApexCharts.js - Open Source JavaScript Charts for your website ApexCharts is a a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.
• Just Dashboard Create dashboards using YAML/JSON files
• roughViz Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser. - jwilber/roughViz
• Sparks A typeface for creating sparklines in text without code. - aftertheflood/sparks
• Diagrams by marker.js Create flowcharts, mind maps, org charts, network diagrams and more.
• Flowchart Maker & Online Diagram Software diagrams.net is free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams
• Flowchart Fun Flowchart Fun is the fastest free online text to flowchart generator. Easily convert text to flowcharts, mind maps, and process diagrams with our text-based editor.
• Line Graph Maker Create a line graph for free with easy to use tools and download the line graph as jpg or png file.
• Chart It Create and share beautiful charts for free
• Apache ECharts ECharts, a powerful, interactive charting and visualization library for browser
• Chart Images from URL | QuickChart Create a chart image with one URL and embed anywhere. Open source, no watermarks.
• Data Gif Maker I’ve created an animated GIF using Data Gif Maker by Google News Labs. Create your own at datagifmaker.withgoogle.com
• Charts.css CSS data visualization framework

Classless CSS frameworks

• Base.css The web's first multipurpose classless stylesheet, with the most semantic rules, for complete customization and personalization of a webpage.
• matcha.css Drop-in semantic styling library in pure CSS. matcha.css is a pure CSS library designed to style HTML elements similarly to a default browser stylesheet, eliminating the need for users to manually patch their documents.
• The MCSS by Mike Mai A modern classless CSS framework inspired by the typefaces of Matthew Carter.
• GitHub - dbohdan/classless-css A list of classless CSS themes/frameworks with screenshots - dbohdan/classless-css
• MVP.css MVP.css - Minimalist stylesheet for HTML elements. No classes, no framework. Just semantic HTML and you're done.
• Doodle CSS A simple hand drawn HTML/CSS theme.
• new.css A classless CSS framework to write modern websites using only HTML.
• Pico.css • Minimal CSS Framework for semantic HTML Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled. 7.9 kB minified and gzipped!
• Simple.css - A classless CSS framework A classless CSS framework that makes semantic HTML look good.

Converters

• Convert to it! Truly universal online file converter. Private, on-device conversion across mediums.

CSS 3D

• PolyCSS A CSS 3D engine for the DOM. Renders polygon meshes in HTML by leveraging matrix3d transforms.

CSS Animations

• ease-master Design motion that feels real. The ultimate easing visualization and generation tool for modern frontend development.

CSS Backgrounds

• css-doodle A web component designed to explore the creative potential of CSS in a simple and expressive manner. It facilitates the creation of graphic patterns, visual backgrounds, handcrafted icons, and random decorations.

CSS Borders

• Inverted border-radius using CSS mask One property and 4 gradients to invert the corner of any element with a radius
• Dashed Border Generator by @kovart With this tool you can simply increase space between dots, change dash length or distance between strokes.

CSS Gradients

• Photo Gradient Generate beautiful gradients from colors or from a photo
• CSS HD Gradients Wide gamut Color 4 compliant CSS gradient builder.
• Grab yourself a gradient Beautiful and simple UI for generating web gradients.
• GradientArt - Advanced CSS Gradient Editor Advanced CSS Gradient Editor with layers, editing tools and free cloud storage
• Gradient Generator Tool Create gorgeous, buttery-smooth color gradients for UI design. Export as CSS or SVG image.
• CSS Gradient Editor Best CSS gradient generator online. You only need this tool for creating colorful CSS gradeint backgrounds and patterns for your website and blog.
• Gradientor A minimalist, beautiful Radial Background Generator. Move your mouse and be inspired by infinite color possibilities!

CSS Clip Paths

• Fancy Frames Use clip-path: shape() to create a lot of CSS-only fancy frames. Get an optimized & modern code in no time.
• Clippy — CSS clip-path maker The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.

CSS Printing

• Printable Grid Paper I made this because every time I searched for a printout of graph paper I only get weird low-res JPGs with URLs making it ugly. Or I could buy a pallet of graph papaer on Amazon. Then you gotta know how many inches or centimeters it needs to be and I dunno, I'm not a scientist. So I made this app with a few options you can play with.
• CSS for printing to paper

CSS Reset

• Browser Default Styles Search against any element for standardized and default styles from all major rendering engines (WebKit, Blink, Gecko, Trident).

CSS Hacks and Tweaks

• 12 Modern CSS One-Line Upgrades Sometimes, improving your application CSS just takes a one-line upgrade or enhancement! Learn about 12 properties to start incorporating into your projects, and enjoy reducing technical debt, removing JavaScript, and scoring easy wins for user experience.

CSS Text

• CSS Type Studio Advanced Typography with CSS. Create layouts in HTML that are pleasurable to read. CSS Type Studio lets you quickly iterate through different typefaces, sizes, spacing attributes, and more.
• Improved CSS text stroke Arriving late to the party for this fun little CSS trick (with a few gotchas).

Collections

• Sites et outils numériques proposés par Cédric Eyssette Sites et outils numériques proposés par Cédric Eyssette : cours de philosophie, formations pédagogiques, logiciels en ligne libres et gratuits souvent fondés sur l’utilisation du Markdown et hébergés sur la Forge
• les-amoureux-du-web Une chouette collection de liens top moumoute pour nous, les devs. Moumoute. Dave. On se comprend.
• Dead Simple Sites Minimal Website Inspiration. Dead Simple Sites curates the most minimal sites on the web.
• Open Source Alternatives To Proprietary Software The world's largest directory for open source software. Discover 500+ popular open source alternatives to proprietary software products. 100% free.
• Vanilla List • The Vanilla JavaScript Repository The Vanilla JavaScript Repository
• Hidden Tools - Discover a collection of tools Explore a collection of tools to use for your next project. Search, filter, and find tools from a ton different categories.
• awesome-selfhosted A list of Free Software network services and web applications which can be hosted on your own servers - GitHub - awesome-selfhosted/awesome-selfhosted: A list of Free Software network services and ...
• No More Google Privacy-friendly alternatives to Google that don't track you

Color tools

• TheColorAPI The best color conversion, naming and scheming API out there.
• Color Palette Pro — A Synthesizer for Color Palettes Generate customizable color palettes in advanced color spaces that can be easily shared, downloaded, or exported.
• Harmonizer Color palette generator for UI
• What are OKLCH colors? oklch is a newer color model that is designed to be perceptually uniform. This means that colors are much more accurate in terms of how humans perceive them and it makes working with them much easier.
• oklch.fyi Explore color as we see it. Discover how the OKLCH color model works. Learn, experiment and create more consistent and perceptually uniform color palettes.
• Colors Between Get interpolated colors between specified colors steps.
• OKLCH Color Picker & Converter OKLCH is a new way to encode colors (like hex, RGBA, or HSL)
• Physically Based - The PBR values database A database of physically based values for CG artists
• Reasonable Colors Reasonable Colors is an open-source color system that makes it easy to build accessible, nice-looking color palettes.
• Colour Code - find your colour palette Colour Code is an online designer tool, which allows you to easily and intuitively combine colours.
• Picular Picular is a rocket fast primary color generator using Google’s image search. If you ever needed the perfect yellow hex code from a banana, this is the tool for you.
• FettePalette — Color ramp generator using curves within the HSV color model FettePalette is lightweight, dependency free and fast JavaScript function written in TypeScript. It generates color ramps based on a curve within the HSV color model. This page serves as preview for the variety of options the function takes.
• Actionable Color Palettes 30+ Hand Curated Color Palettes for Your Next Project. All With Preview
• Happy Hues - Curated colors in context. 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.
• Image Color Finder | Pick Colors From Images | HEX, RGB & HSL This Image Color Finder will allow you to pick colors from any image and get to choose the exact HEX, RGB, and HSL values in the most easy and simple way.
• Nævner Natural language color descriptions, generated from hex color codes. Press: R to pick a random color.
• couleur.io → Harmonizing Color Palettes for Your Web Projects A simple color tool to help you find good color palettes for your web projects. This tools spits out modern CSS you can use right away in your projects.
• FarbVélo —— Random Color Cycler Generative color harmonies. The random color expolorer
• Automatic text contrast
• Sorted CSS Colors I wanted to create a tool to sort the named CSS colors in a way that it shows related colors together. So, next time I can't decid...
• Leonardo Generate colors based on a desired contrast ratio.
• Find out who can use your color combination A tool that brings attention and understanding to how color contrast can affect different people with visual impairments.
• Eva Design System: Deep learning color generator Generate color pallets using deep learning powered algorithm
• Subcolor Interpolate specified amount of colors between 2 colors.
• Colorable Contrast is the difference in luminance or color that makes an object (or its representation in an image or display) distinguishable. In visual perception of the real world, contrast is determined by the difference in the color and brightness of the object and other objects within the same field of view.
• Color Designer - Simple Color Palette Generator The main purpose of this tool is to help with building a color palette and generate tints and shades based on it. Just pick a color, and the app does the rest. You can use the preselected colors or the color picker for more control.
• Colors that look and work great for everyone A modern tool for exploring and finding accessible colors. Make sure that everyone can see your creations.
• Accessible Brand Colors A tool that evaluates the ADA compliance of your brand’s color palette.
• Color Lisa - Curated Color Palette Masterpieces. Color Lisa is a curated list of color palettes based on masterpieces of the worlds greatest artists. Each palette was painstakingly created by color obsessed designers, artists, museum curators, and masters of color theory.
• Colordot - A color picker for humans Simple color picker everyone
• Blend—Create and customize beautiful CSS3 gradients. Blend—Create and customize beautiful CSS3 gradients.
• CSS Colour Gradients with GradPad, beautiful CSS color gradient generator for your designs CSS gradient generator, create lovely CSS color gradients for web designs in the browser
• Chroma A better color picker for the web
• Scale — color scale generator Color scale generator by Hayk An
• ColorBox Create amazing color sets superfast.
• Palettte App The definitive palette editing and remapping tool

Database

• PocketBase - Open Source backend in 1 file Open Source backend in 1 file with realtime database, authentication, file storage and admin dashboard

Documentation tools

• readme.so Use readme.so's markdown editor and templates to easily create a ReadMe for your projects
• README GEN README generator
• tree.nathanfriend.com An online tree-like utility for generating ASCII folder structure diagrams.
• ASCII Tree Generator Online interactive folder structure generator. Easily create and visualise your development tree for your new projects and your documentations.

Development tools

• Superposition: Use the design system you already have Extract your site's design tokens and use them everywhere
• httpstat.us HTTP status testing. This is a super simple service for generating different HTTP codes. It's useful for testing how your own scripts deal with varying responses. Just add the status code you want to the URL, like this: httpstat.us/200
• Can I use... Support tables for HTML5, CSS3, etc "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
• Caninclude 'Caninclude' tool to help determine if one HTML tag can be included in another HTML tag
• Hoppscotch Open source API development ecosystem. Helps you create requests faster, saving precious time on development.
• All – Tiny Helpers A collection of free single-purpose online tools for web developers...
• Coding on CSS-Tricks Information about coding fonts: designers, character charts, features, and more.
• My current HTML boilerplate Every element I use for the basic structure of a HTML document, with explanations why.
• HTML Boilerplates Build and download your HTML boilerplate in seconds.
• strftime Reference and sandbox for Ruby, Python, PHP, and C programmers. Quickly test date and time formats in a strftime sandbox with a handy reference.
• Appydev Find awesome tools. Appydev is a collection of awesome tools, resources, communities & podcasts for developers, designers & enthusiasts
• 1 LOC Favorite JavaScript utilities in single line of code
• Manage HTML DOM with vanilla JavaScript Manage HTML DOM with vanilla JavaScript
• Transform A polyglot web converter that's going to save you a lot of time.

Drawing

• LayouIt Voxel Editor A voxel editor powered by CSS grid and 3D transforms. Build models with HTML cuboids!
• tldraw A tiny little drawing app.
• Photopea Online Photo Editor Lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!
• Polotno Studio - Online Free Design Editor Create graphical designs for social media, youtube previews, facebook covers and more
• Excalidraw Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.
• Svgbob editor Convert your ascii diagram scribbles into happy little SVG
• drawio.com Security-first diagramming for teams. Bring your storage to our online tool, or save locally with the desktop app.
• minimator minimalist graphical editor in your browser and on the go

Favicons

• How to Get the Favicon Image of a Website with Google S2 Converter - Digital Inspiration Tech, a la carte
• Build your favicon in seconds! Design a letter-based favicon like most big tech companies, or be playful and create an emoji-based favicon. Modern browsers supports SVG favicon. Be creative.
• Favicon Generator for perfect icons on all browsers The ultimate favicon generator. Design your icons platform per platform and make them look great everywhere. Including in Google results pages.
• Favicon.io - The Ultimate Favicon Generator (Free) With Favicon.io you can quickly generate a favicon for your website for free!
• Icotar A free colorful icon avatar generator. Icotar generates simple, playful avatars for your app or website. Based on the lovable avatars from Yik Yak, each avatar consists of a colorful background and a recognizable symbol. All colors and icons are hand-picked from Material Design.
• Favicon & App Icon Generator Convert PNG to ICO, JPG to ICO, GIF to ICO. Create favicon.ico and iOS / Android App Icons. Edit a favicon to fit your needs, or search our gallery.

File sharing

• FileFlan Instant universal file sharing
• NitroShare Any File. Any Device Cross-platform Network File Transfer Application.

Fonts

• Codeface Typefaces for source code beautification
• Font with Built-In Syntax Highlighting An experiment in javascript-free syntax highlighting, made possible by opentype contextual alternates and COLR table.
• FontSelf Self-hosted Google Fonts configurator.
• Sweetfont The sweetest way to find Google Fonts. Explore Google Fonts by personality, vibe, and style using interactive controls. Find your perfect typeface.
• Programming Fonts Test drive programming fonts online: the definitive list of fonts for code
• Font to SVG Get vector graphics from OpenType & TrueType fonts without installing.
• Fontsource Download and self-host 1500+ open-source fonts in neatly bundled NPM packages. Access a comprehensive library of web typefaces for free.
• Best Free Fonts Best Free Fonts is a curated selection of free fonts. Including serif, sans serif, script and monospace.
• The Ultimate Guide to Font Performance Optimization Font performance optimization is a set of web development techniques that make fonts load faster and render more smoothly, including thoughtful font selection, the use of performant font formats, self-hosting, optimized @font-face declarations, font display strategies, and others.
• systemfontstack Webfonts were great when most computers only had a handful of good fonts pre-installed. Thanks to font creation and buying by Apple, Microsoft, Google, and other folks, most computers have good—no, great—fonts installed, and they're a great option if you want to not load a separate font.
• modern-font-stacks System font stack CSS organized by typeface classification for every modern operating system.
• Modern Font Stacks System font stack CSS organized by typeface classification for every modern OS. The fastest fonts available. No downloading, no layout shifts, no flashes — just instant renders.
• Karektar Create your own pixel font.
• Font Testing Page Drag n drop your fonts and visualize it.
• Fallback Font Generator Reduce Cumulative Layout Shift (CLS) by adjusting web fonts and system font fallbacks using @font-face
• Fonts Bunny Bunny Fonts help make the internet faster, safer and GDPR compliant!
• Brutalita Sans Brutalita is an experimental font and font editor, edit in your browser and download OTF.
• Glyphr Studio - font design, online Glyphr Studio is a free, web based font designer.
• Access denied | fontmeme.com used Cloudflare to restrict access
• Google Fonts Making the web more beautiful, fast, and open through great typography
• Google Fonts filtered by tags. Google Fonts filtered by tags.
• FontDrop! Simple and easy way to view the content of font files.
• 99 Font Pairings & Typeface Combinations | ByPeople Create and test amazing font pair combinations and see how they look in your project
• Font Playground at Fontstorage.com Testing and selecting of fonts combinations, typography prototyping for website.
• Font Interceptor Font Interceptor pulls all the font files in use on a target URL for download.
• Online @font-face generator This tool converts any TTF, OTF, WOFF, WOFF2 or SVG fonts to css @font-face formats with CSS and HTML sample files.
• fontshare Fontshare is a free fonts service from ITF, making quality fonts accessible to all.
• Font Squirrel | Create Your Own @font-face Kits Create Your Own @font-face Kits by uploading the fonts you want to use.

Forms

• formsubmit.co Easy form endpoints for your HTML forms. Connect your form to our form endpoint and we’ll email you the submissions. No PHP, Javascript or any backend code required.
• Letterbird A free contact form on the web that’s Good Enough. Give people a better experience getting in touch with you. Letterbird makes it fast and easy for anyone to get a well-designed, good ol’ fashioned email contact form.

Fun to try

• Ancient Earth Earth looked very different long ago. Search for addresses across 750 million years of Earth's history.
• Browser APIs The Browser Is Already a Supercomputer. Ten production-ready APIs built into every modern browser. No npm. No CDN. No dependencies. Just open the file and run.
• 100 Jumps Hold to charge, release to jump. Land on 100 platforms to win — but one miss and it's over. How many attempts will it take you?
• Glitch Art Maker 100% client-side. No upload. Process local video or webcam in real time and export WebM.
• drawmote Draw remotely with your phone
• city-roads Visualization of all roads within any city. Render every single road in any city at once.
• VOLE.wtf 🐹⁉️ working towards a dafter internet
• Toooools Upload an image → Select and adjust effect → Export
• How i experience the web today
• Terminal Gif Maker Terminal Gif Maker is a tool for creating code sample in terminal interface. You can create gif for your projects and you can show that in your README of your project. Many application and project using this in Github, Gitlab and Bitbucket.
• Lissajous Curve SVG Generator Generate and export SVGs of Lissajous curves. A tool by Eva Decker.
• noclip A digital museum of video game levels
• Optical Toys | Optical Illusions and Toys A collection of optical illusions and optical toys by Toms Toys
• Motherfucking Website
• Rooms Create & browse interactive rooms on web and iOS.
• Eyes on the Solar System - NASA/JPL Explore the 3D world of the Solar System. Learn about past and future missions.
• Akiyoshi's illusion pages
• Floor796 A huge animation scene with many references to memes, games, films, series, anime, music groups
• PINTR Create plotter-like line drawings from your images.
• BUILD IT Academy view source and zoom out
• Wiki History Game Place the cards on the timeline in the correct order. All data sourced from Wikidata and Wikipedia.
• Naker.Back - Your interactive background in 5 minutes Start now for free on this no code design tool! Easy to use and export on any website in the world. One of the simplest way to increase engagement!
• Term Sheets Create animated terminal presentations. Export as SVG, animated GIF, or HTML+CSS
• Draw all roads in any city at once This website allows you to select a city and then draws every single road on a screen.
• Creepyface The Javascript library that makes your face follow the pointer
• 98.css A design system for building faithful recreations of old UIs.
• emojimix by Tikolu Combine two emojis into one. Thousands of combinations are available.
• Kinopio Kinopio is your spatial thinking tool for new ideas and hard problems.
• Paper plotter Paper plotter is a plotting tool that cuts 3D Math functions into a PDF so you can cut it out. Math made easy so you can grasp the functions easier.
• Constructor de Emoji Crear emojis únicos usando el Constructor - EmojiTool.com
• Msgif | convert your message into GIF Msgif is a GIF converter. Once you type your message Msgif turns the message into GIF animation immediately.
• Spline & Matrix Fan project made by the Spline Team to all matrix fans, celebrating the upcoming matrix 4 movies.
• Type Terms Type Terms. The animated typographic cheat sheet.
• Lost Without You Lost Without You is a turn-based action puzzler. Help two friends find each other in the dark before they run out of light. Alternate between each friend to navigate through the darkness in a mysterious labyrinth. Can you help them escape?
• GitHub - victorqribeiro/isocity: A isometric city builder in JavaScript A isometric city builder in JavaScript. Contribute to victorqribeiro/isocity development by creating an account on GitHub.
• Intensifying Emoji Generator A simple and quick tool to help you add some shaky-shaky to your emoji.
• Mutsuacen Draw animated and interactive images
• mondrian.fun This site is a celebration of the artistic style of Piet Mondrian, a 20th century Dutch artist best known for his abstract works using vertical and horizontal lines and the primary colors.
• Drawing with text
• graxel
• PixelCraft: A Pixel Art Editor A pixel Art & Animation Creation Tool Built using HTML5 Canvas. It is a Progressive Web App (PWA) with offline compatibility. It is mobile-friendly and is very easy to use.
• (t,i,x,y) => 'creative code golfing' A minimalist coding environment. Control 16x16 points with a single JavaScript function. By @aemkei
• Fuck Off As A Service FOAAS provides a modern, RESTful, scalable solution to the common problem of telling people to fuck off.
• Cameras and Lenses – Bartosz Ciechanowski Interactive article explaining how cameras and lenses work.

Git related

• Codeberg.org Codeberg is a non-profit, community-led organization that aims to help free and open source projects prosper by giving them a safe and friendly home.
• gitmoji An emoji guide for your commit messages.
• Conventional Commits A specification for adding human and machine readable meaning to commit messages
• Remove a folder from git tracking I need to exclude a folder (name uploads) from tracking. I tried to run git rm -r --cached wordpress/wp-content/uploads and after that I added the path to .gitignore /wordpress/wp-content/upload...
• SpaceBadgers Fast and clean SVG badges
• Git Commit Patterns The use of Git for us Devs is something essential, whether in personal projects, open source with...
• Shields.io: Quality metadata badges for open source projects We serve fast and scalable informational images as badges for GitHub, Travis CI, Jenkins, WordPress and many more services. Use them to track the state of your projects, or for promotional purposes.

Halftones

• aRty face Translates pixels into data visualisation
• Vector Halftone Maker Interactive PNG/SVG halftone pattern generator. Create Hexagonal, Square and Radial grid dotted/pixelated patterns for free. PNG and SVG export available.

Hosting and domains

• slim.sh Give your localhost a local or public URL. Turn localhost:3000 into https://app.test with path routing, HTTPS, HMR support, or get a public url without deployment.
• Yunohost Yunohost Documentation
• JS.ORG Dedicated to JavaScript and its awesome community since 2015
• Who is Hosting This? Is this domain available, or taken? Who is hosting this website? Find out using our domain tool, with full WHOIS records for registered domains.
• Host Yo Self Need a web host? Host your self! Use this page to host a website or a file directly from your computer / phone / smartwatch / toaster!
• localhost.run | localhost.run Connect web applications running on your computer to the internet instantly

HTML

• You don’t know HTML Lists This second installment in the "You don’t know HTML" series is going to be all about the ways that we put collections of things together.
• My HTML boilerplate in 2026 Every element I use for the basic structure of a HTML document, with explanations why.
• HTML Can Do That HTML has been gobbling up swathes of what used to be JavaScript’s remit. This page lists a bunch of dynamic functionality that we can now achieve with just HTML.

Icon sets

• flag-icons 🎏 A curated collection of all country flags in SVG — plus the CSS for easier integration
• Griddy Icons Griddy Icons is free open-source icon family with unique utilitarian vibe
• All SVG Icons Browse and download 250,000+ free SVG icons for your projects that are free to use and customizable. Copy Raw SVG code or download as PNG, SVG, JSX or Base64 formats. Alternative of Flaticon, Iconmonstr, SVG Repo.
• Iconify Open source vector icons from all popular icon sets
• OBRA Icons A simple, consistent set of icons, perfect for user interfaces.
• Lucide Beautiful consistent icon toolkit made by the community.

Icon fonts

• IcoMoon IcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts or SVG sprites. Browse among thousands of pixel perfect icons or import your own vectors.
• Fontello - icon fonts generator Tool to build custom fonts with icons.
• Convert SVG Strokes to Fills This tool helps you convert SVG strokes to fills and make your icons webfont compatible.

Image services

• Free Image & PDF Tools Right in Your Browser Resize, compress, convert, edit, remove backgrounds, merge and split — instantly. No account. Your files never leave your device.
• BDFM Bitmap generator
• SLITSCANNER Image and Text Distortion Art Creation Tool. Free slit-scan art creation tool. Works in your browser and on your phone. Distort, warp, and drag images, text, and selphies with this tool that simulates moving objects on a flatbed scanner.
• Dither Me This Use this tool to reduce the file size of an image… but in a stylish old-school way. It uses dithering to reduce the colors in an image, and places dots to emulate the missing shades. Dithering is used to display images on screens with limited colors palettes — it has the modern advantage of making web pages load faster. Upload an image and click the preset buttons to see what it can do.
• Image cache & resize service Manipulate images on-the-fly with a worldwide cache
• TinyPNG – Compress WebP, PNG and JPEG images intelligently Make your website faster and save bandwidth. TinyPNG optimizes your WebP, PNG and JPEG images by 50-80% while preserving full transparency!
• Compressor.io - optimize and compress JPEG photos and PNG images Optimize and compress your jpeg and png images online. Compressor is a lossy and lossless photo compression tool.
• Squoosh Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser.
• ImageResizer.io - Image CDN with Image Resize API
• Kraken.io Image Optimizer Kraken.io is a robust, ultra-fast image optimizer. Thanks to its vast array of optimization algorithms Kraken.io is a world ahead of other tools. Want to save bandwidth and improve your website's load times? Look no further and welcome to Kraken!
• imgix - The End-to-End Image Solution Better visual experience. Faster websites and apps. Supercharge your visual media with powerful APIs, CDN & image management.
• imgproxy: fast and secure on-the-fly image processing. imgproxy: fast and secure on-the-fly image processing.
• Compress PNG Images Online PNG compression and optimization tool to compress PNG images into PNG-8 format with transparency support.
• Jpeg.io Convert any major image format into a highly optimized JPEG
• Online Image Сompressor Optimizilla is the ultimate image optimizer to compress your images in JPEG, GIF and PNG formats to the minimum possible size.
• Smart Image Hosting, 360 viewer and Image Zoom - Sirv Sirv helps you and your team manage, transform, optimize and deliver digital assets for faster websites and apps. Increase your conversions with Sirv today.
• Responsive Breakpoints Generator The Responsive Image Breakpoints Generator efficiently analyzes each hi-res image and finds the best dimensions for embedding in your website
• Image and PDF Compression for Website ImageRecycle can optimize your website speed by making compression on images and PDF while keeping your original media quality
• Flyimg Dockerized PHP application runs as a Microservice to resize and crop images on the fly. Get optimised images with MozJPEG, WebP or PNG using ImageMagick, with an efficient caching system.
• Uploadcare File uploading, processing & delivery for web and mobile apps. Uploadcare provides companies with simple, powerful, developer-friendly building blocks to handle file uploading, processing, and delivery. A complete out-of-the-box solution, built for engineers by engineers.

Image conversion desktop

• Upscayl Free and Open Source AI Image Upscaler for Linux, MacOS and Windows.
• Crunch Insane(ly slow but wicked good) PNG image optimization - GitHub - chrissimpkins/Crunch: Insane(ly slow but wicked good) PNG image optimization
• Trimage (lossless) image compressor A cross-platform tool for losslessly optimizing PNG and JPG files for web.
• image-optimizer A free and open source tool for optimizing images and vector graphics. - GitHub - antonreshetov/image-optimizer: A free and open source tool for optimizing images and vector graphics.
• XnConvert Batch photo resizer and image converter to crop, convert, compress, resize images.

Isometric

• Icograms 3D Map Online Designer Design 3D Maps, Infographics, Diagrams and Illustrations from Isometric Icons within minutes.
• iiisometric → 3D-like isometric design builder Create isometric design constructions by placing blocks together to form complex 3D-looking shapes. Export your creations as SVG files.
• IsoCity Isometric City Builder
• Isobuild Isobuild is the best isometric design editor. Try it now and unleash your imagination - create maps, build cities, make infographics, illustrations & more!

JS Animation

• Spoiler JS A framework-agnostic web component for creating beautiful spoiler effects with Telegram-inspired particle animations
• The Pixel Canvas Shimmer Effect The one about a Web Component that reveals a shimmering pixel background when its parent element is hovered.
• lax.js Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.
• simpleParallax.js Easy Parallax Effect for React & JavaScript. simpleParallax.js is a lightweight and easy-to-use JS & React library that adds parallax animations to any image.
• Atropos Stunning touch-friendly 3D parallax hover effects. Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects.
• Rellax Add a lightweight vanilla javascript parallax library to your website for subtle animations. Works with HTML, Wordpress, Shopify and more!
• midori library for animated image backgrounds.
• Bubbly Beautiful bubbly backgrounds in less than 1kB (750 bytes gzipped).
• Tilt.js A smooth 3D tilt javascript library.
• KUTE.js KUTE.js is a fully featured JavaScript animation engine with outstanding performance and supporting 3D transforms, SVG Morph, draw SVG, SVG transform, cross-browser animation, scroll animation, CSS3 properties and many more.
• particles.js A lightweight JavaScript library for creating particles.
• AniJS AniJS, Declarative handling library for CSS animations. A Library to Raise your Web Design without Coding.
• Brusher Create Interactive Backgrounds for Webpages
• Granim.js Create fluid and interactive gradients animations with this small javascript library.
• smoke.js Small but good javascript smoke effect 🌬💨. Contribute to bijection/smoke.js development by creating an account on GitHub.
• Segment A little JavaScript class (without dependencies) to draw and animate SVG path strokes
• Egg.js A Simple Way to Add Easter Eggs to Your Site
• RoughNotation A small JavaScript library to create and animate hand-drawn annotations on a web page

JS Autocompletion

• Autosuggest Simple accessible autocomplete for vanilla javacript with support for remote & local data, ~3KB gzip
• How To Create Autocomplete on an Input Field W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
• Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou

JS Camera

• JSCanify The Javascript document scanning library.

JS Charts

• ChartGPU Beautiful, open source, WebGPU-based charting library
• Just Gage JustGage is a handy JavaScript plugin for generating and animating nice & clean dashboard gauges. It is based on Raphaël library for vector drawing.

JS Colors

• css-color-component a modern color picker for the web with support for all spaces

JS Cursor

• Cursor Effects Old-school cursor effects for your browser built with modern JavaScript

JS Date pickers

• relative-time-element Web component extensions to the standard <time> element. Formats a timestamp as a localized string or as relative text that auto-updates in the user's browser. This allows the server to cache HTML fragments containing dates and lets the browser choose how to localize the displayed time according to the user's preferences.
• hotel-datepicker Date range picker for hotels.
• tiny-date-picker A small, modern, dependency-free date picker.
• air-datepicker Lightweight, dependency-free JavaScript datepicker
• Litepicker Lightweight, highly configurable, many options. Plugins: keyboard accessibility, mobile friendly, predefined ranges, multiple select.
• Duet Date Picker
• flatpickr A lightweight and powerful datetimepicker
• Tiny Date Picker Demo A tiny, responsive, modern, zero-dependency date picker

JS Drag n Drop and upload

• picknplace.js A proof of concept of a viable drag and drop alternative
• jgthms/picknplace.js: A proof of concept of a viable drag and drop alternative
• interact.js JavaScript drag and drop, resizing and multi-touch gestures for modern browsers. JavaScript drag and drop, resizing, and multi-touch gestures for modern browsers (and also IE9+)
• Dropify Override your input files with style.
• Uppy Sleek, modular open source JavaScript file uploader. Uppy fetches files locally and from remote places like Dropbox or Instagram. With its seamless integration, reliability and ease of use, Uppy is truly your best friend in file uploading.
• Dropzone.js File uploads made easy. Dropzone.js is one of the most popular drag and drop JavaScript libraries. It is free, fully open source, and makes it easy for you to handle dropped files on your website.
• dragula Browser drag-and-drop so simple it hurts. Dragula provides the easiest possible API to make cross-browser (IE7 included!) drag-and-drop a breeze in your applications.
• Moveable Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable!

JS Draw

• lazy-brush Smooth drawing with mouse, finger or other pointing device
• CSS Doodle 🎨 A web component for drawing patterns with CSS.

JS Effects

• liquid glass A liquid glass effect library for the web. Apply realistic glass refraction, blur, chromatic aberration, and lighting effects to any HTML element using WebGL shaders.

JS Embeds

• lite-youtube-embed A faster youtube embed.

JS Favicons

• favico.js Make use of your favicon with badges, images or videos

JS Forms

• Range Slider Element 🎚 A cross browser customizable and accessible web component
• Dual Range Input Native dual range input in 60 lines of JavaScript.

JS Frameworks

• Jelly UI Jelly UI is a dependency-free Web Components library for soft, tactile product interfaces. Real form controls meet soft-body physics, with dark mode, right-to-left support and WCAG AA color tokens built in.
• Qite.js Frontend framework for people who hate React and love HTML. No build step, no Virtual DOM, no npm, no mixing JavaScript with HTML. DOM-first, SSR-first, and fully usable with plain browser APIs. Small, self-sufficient, and powerful enough for serious apps.

JS Images

• Pica Resize image in browser with high quality and high speed.
• image-js Image processing and manipulation in JavaScript
• Image Compare Viewer Compare before and after images, for grading and other retouching for instance. Vanilla JS, zero dependencies.
• snapDOM snapDOM captures DOM nodes as images with exceptional speed and accuracy.

JS Input Masks

• Javascript Input Mask vanilla javascript input mask

JS Keyboard

• tinykeys A tiny (~650 B) & modern library for keybindings.
• hotkeys-js ➷ A robust Javascript library for capturing keyboard input. It has no dependencies.

JS Layout

• nanogallery2 a modern photo / video gallery and lightbox
• Justified-Gallery Javascript library to help creating high quality justified galleries of images. Used by thousands of websites as well as the photography community 500px.

JS Lightboxes

• simplelightbox Touch-friendly image lightbox for mobile and desktop
• WinBox WinBox is a modern HTML5 window manager for the web: lightweight, outstanding performance, no dependencies, fully customizable, open source!
• spotlight Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies. - nextapps-de/spotlight
• PhotoSwipe Open-source JavaScript image gallery and lightbox.
• glightbox Pure Javascript lightbox with mobile support. It can handle images, videos with autoplay, inline content and iframes
• lightGallery A lightweight, modular, JavaScript image and video lightbox gallery plugin. Available for React.js, Vue.js, Angular, and TypeScript.
• Intense Images A javascript library for viewing images in a fully full screen.
• Chocolat Responsive lightbox
• drift Easily add "zoom on hover" functionality to your site’s images. Lightweight, no-dependency JavaScript.

JS Maps

• Utiliser les tuiles vectorielles Qu'est-ce que les tuiles vectorielles ? Pour mieux comprendre ce que sont que les tuiles vectorielles et leurs usages, rendez-vous sur la documentation de l’IGN.
• Terra Draw A JavaScript library for frictionless drawing on web maps
• openfreemap Free and open-source map hosting solution with custom styles for websites and apps, using OpenStreetMap data - hyperknot/openfreemap
• OpenFreeMap OpenFreeMap – Open-Source Map Hosting lets you display custom maps on your website and apps for free.
• Turn images into contour maps Take a look at how I turn images into a contour map in the browser with the element.
• Bright - TileServer GL

JS Markdown

• EasyMDE - Easy Markdown Editor A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.
• OverType HE MARKDOWN EDITOR THAT'S A TEXTAREA. OverType is a transparent textarea over rendered markdown. Plain text simplicity, WYSIWYG beauty, zero complexity.

JS Mockups

• Browser Window A small themed zero-dependency Web Component for demos with a fake browser window (Safari-esque).

JS Media

• HYPERBLAM Make HTML make music
• tiks Procedural UI sounds for the web. Zero audio files. Pure synthesis.
• MediaBunny Pure TypeScript media toolkit for reading, writing, and converting video and audio files, directly in the browser.

JS Mouse

• magic-mouse-js A lightweight javascript library to create some amazing effects for the mouse (cursor) on your website

JS PDF

• Embed PDF Embed PDF files without the pain. The ultimate Open Source PDF viewer for JavaScript. Choose our drop-in component for instant results, or use our headless library to build a completely custom UI.

JS Players

• media-chrome Custom elements (web components) for making audio and video player controls that look great in your website or app
• howler.js Javascript audio library for the modern web.
• Buzz Buzz is a small but powerful Javascript library that allows you to easily take advantage of the new HTML5 audio element. It tries to degrade silently on non-modern browsers.
• Plyr A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player. A simple HTML5 media player with custom controls and WebVTT captions.
• amplitude.js AmplitudeJS: Open Source HTML5 Web Audio Library. Design your web audio player, the way you want. No dependencies required.
• vime Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...

JS Selects

• slim-select Slim advanced select dropdown.
• nice-select2 A lightweight vanilla javascript library that replaces native select elements with customizable dropdowns
• dropdown.dot.js by rogerdudler
• tail.select.js Create beautiful, functional and extensive (multi)select fields with pure, vanilla JavaScript.

JS Scroll

• scrollbooster Enjoyable content drag-to-scroll library.

JS Sort

• SortableJS Reorderable drag-and-drop lists for modern browsers and touch devices.

JS Syntax highlight

• Shiki A beautiful yet powerful syntax highlighter
• syntax-highlight-element Syntax Highlighting using the CSS Custom Highlight API. The code is highlighted without having to wrap a bunch of <span> elements around each token, thanks to Prism's tokenizer and the CSS Custom Highlight API.

JS Text

• baffle.js a tiny (~1.8kb) javascript library for obfuscating and revealing text in DOM elements.
• Typed.js JavaScript Animated Typing with Typed.js | by Matt Boldt
• Fitty Snugly resizes text to fit its parent container. Fitty scales text up (or down) so it fits perfectly to its parent container. Ideal for flexible and responsive websites.
• Odometer Odometer is a Javascript and CSS library for smoothly transitioning numbers.
• ityped Dead simple Javascript animated typing, with no dependencies.
• ztext.js 3D Typography for the WebEasy to implement, 3D typography for any website and every font.

JS Tables

• simple-datatables A lightweight, extendable, JavaScript HTML table library written in TypeScript and transpilled to Vanilla JavaScript. Similar to jQuery DataTables for use in modern browsers, but without the jQuery dependency.

JS Timelines

• vis-timeline 📅 Create a fully customizable, interactive timelines and 2d-graphs with items and ranges.
• timesheet.js JavaScript library for HTML5 & CSS3 time sheets.

JS Tooltips

• Floating UI A JavaScript library to position floating elements and create interactions for them.
• tippyjs Tooltip, popover, dropdown, and menu library. Tooltip, popover, dropdown, and menu library.

JS Tools

• JSTOOLS Developer Utilities. Small, focused tools for everyday development work. Format data, generate secure values, inspect tokens, and test snippets without sending your input to a server. No account or setup required. Open a tool, finish the task, and move on.

JS Tours

• driver.js Vanilla JavaScript lightweight, high performance, and dependency-free library for creating interactive tours for web apps.
• Trip.js Trip.js is a plugin that can help you customize a tutorial trip easily with more flexibilities.
• Tooltip Sequence A simple step by step tooltip helper for any site

JS Tweening

• between.js Lightweight JavaScript (ES6) tweening engine.
• ola 🌊 Smooth animation library for interpolating numbers - franciscop/ola

JS UI

• OAT Ultra-lightweight, zero dependency, semantic HTML, CSS, JS UI library. ~8KB min+gz.

JS Waveform

• peak.js A client-side JavaScript component to display and interact with audio waveforms in the browser

JSON

• visual-json The visual JSON editor. Schema-aware, embeddable, extensible.
• JSON Format Online Format JSON Online is a free, browser-based JSON toolkit that formats, validates, and minifies JSON data without requiring account registration. It processes files up to 100MB entirely client-side using Web Workers, ensuring user data never leaves the browser. The platform includes 60+ tools including an AI-powered error fixer, visual diff checker, and converters for XML, YAML, CSV, and 15+ other
• JSON Editor JSON Schema Based Editor
• JSON blob create, edit, view, format, and share JSON
• JSON Server Get a full fake REST API with zero coding in less than 30 seconds (seriously)

Learning

• Hacker Laws or Hacker Laws 🧠 Laws, Theories, Principles and Patterns for developers and technologists.
• Laws of Software Engineering A collection of principles and patterns that shape software systems, teams, and decisions.
• Modern CSS Round-Out Tabs Quite a while back I made a set of “round out” tabs, where the literal tab part of the UI would connect to the content below with a rounded edge that flared out as it connected. A bit tricky of a situation, even now!
• Exercism Get really good at programming. Develop fluency in 79 programming languages with our unique blend of learning, practice and mentoring. Exercism is fun, effective and 100% free, forever.
• Dark Design Patterns Catalog New regulations from the Government of India prohibit the use of 12 common dark design patterns. These sneaky practices are unethical applications of established UX knowledge to make interface designs that harm users instead of helping them.
• Defensive CSS Practical CSS and design tips that helps in building future-proof user interfaces.
• Creative Coding - SVG How the SVG viewBox works.
• New Viewport Units Learn about the small, large, and dynamic viewport units in CSS.
• GitHub - argyleink/ScrollSnapExplainers Contribute to argyleink/ScrollSnapExplainers development by creating an account on GitHub.
• A Guide To Accessible Form Validation Each time we build a field validation from scratch, accessibility doesn’t come out of the box. In this guide, Sandrina breaks down what we need to take into consideration, so that nobody gets stuck on an inaccessible invalid field.
• How to Use Fetch with async/await How to use fetch() with async/await syntax in JavaScript: fetch JSON data, handle errors, make parallel requests, cancel requests.
• CSS Button Styles You Might Not Know The one where I demo some lesser-known CSS for stylin’ buttons
• Sound – Bartosz Ciechanowski Interactive article explaining how sound works.
• Bézier Curves - and the logic behind them | Richard Ekwonye The logic behind Bézier Curves used in CSS animations and visual elements.
• How to use requestAnimationFrame() with vanilla JS The requestAnimationFrame() method tells the browser to run a callback function right before the next repaint happens.
• Crazy classnames in HTML 4.01 See “The id and class attributes in HTML5” for more information. You can view this page with ids instead of classes if you wish.
• Euismod Learn about css grid in a quick, easy, and interactive way!
• The Ultimate CSS Grid Tutorial for Beginners (With Interactive Examples) A CSS grid tutorial for beginners, discussing the various parts of the Grid Layout spec with lots of interactive examples via CodePen.
• CSS Layout Generator A CSS Grid & Flexbox generator for creating layout components.
• Download Free Cheat Sheets or Create Your Own! - Cheatography.com: Cheat Sheets For Every Occasion Find thousands of incredible, original programming cheat sheets, all free to download.
• How do I modify the URL without reloading the page? Is there a way I can modify the URL of the current page without reloading the page? I would like to access the portion before the # hash if possible. I only need to change the portion after the d...
• How to win at CORS The 'how' and 'why' of CORS, from start to finish.
• GitHub - nefe/You-Dont-Need-jQuery: Examples of how to do query, style, dom, ajax, event etc like jQuery with plain javascript. Examples of how to do query, style, dom, ajax, event etc like jQuery with plain javascript. - GitHub - nefe/You-Dont-Need-jQuery: Examples of how to do query, style, dom, ajax, event etc like jQuer...
• GitHub - AllThingsSmitty/jquery-tips-everyone-should-know: A collection of tips to help up your jQuery game A collection of tips to help up your jQuery game. Contribute to AllThingsSmitty/jquery-tips-everyone-should-know development by creating an account on GitHub.
• Understanding This, Bind, Call, and Apply in JavaScript | DigitalOcean The this keyword is a very important concept in JavaScript, and also a particularly confusing one to both new developers and those who have experience in other programming languages. In JavaScript, this is a reference to an object. In this article, yo
• DevDocs Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app including HTML, CSS, JavaScript, PHP, Ruby, Python, Go, C, C++, and many more.
• A Quick Guide to Get Started with JavaScript Classes Learn what need to get started with JavaScript classes. Learn about class constructor, properties (public, static and private) and methods.

Markdown and notes

• Joplin Joplin, the open source note-taking application
• Focus Fox The online markdown editor that helps you stay focused on the work that’s important to you.
• A new way to read & write Markdown Typora is a cross-platform minimal markdown editor, providing seamless experience for both markdown readers and writers.
• StackEdit Free, open-source, full-featured Markdown editor.
• Markdown Guide A free and open-source reference guide that explains how to use Markdown.
• Try markmap Try the markmap REPL here.
• Marp: Markdown Presentation Ecosystem Marp (also known as the Markdown Presentation Ecosystem) provides an intuitive experience for creating beautiful slide decks. You only have to focus on writing your story in a Markdown document.

Maths and physics tools

• Desmos Beautiful free math. At Desmos Studio, we want to help everyone learn math, love math, and grow with math.

Metadata

• Free OG Image Generator Create beautiful OG Images, Twitter/X Header Images, Blog Featured Images & more for free.
• OpenGraph Preview Social Media Share and Generate Metatags. OpenGraph is the easiest way to preview and generate open graph meta tags for any website.
• Open Graph Image generator Generate social images via http-GET API
• GitHub Socialify 💞 Socialify your project. 🌐 Share with the world!
• Open Graph Image as a Service A service to generate dynamic Open Graph images on-the-fly for the purpose of sharing a website to social media. Proudly hosted on Vercel.
• Preview As: Twitter, Facebook, Slack, LinkedIn, Google and more What will your website preview look like when shared? Check twitter, facebbok, slack, linkedin, google all at once
• Iframely URL Debugger - Open Graph, Twitter Cards, oEmbed Check your URL against Open Graph, Twitter Cards, oEmbed specs. See what other apps see.
• Social Share Preview Check how the link previews of a website look like on Facebook, Twitter, LinkedIn & Pinterest. Use our ► debugger or ► free browser extensions!
• Modern-HTML-Starter-Template Modern HTML Starter Template. Contribute to harryheman/Modern-HTML-Starter-Template development by creating an account on GitHub.
• HEAD: A simple guide to HTML elements A simple guide to HTML elements. Contribute to joshbuchea/HEAD development by creating an account on GitHub.
• GitHub Socialify 💞 Socialify your project. 🌐 Share with the world!
• Vytal Vytal shows you what traces your browser leaves behind while surfing the web.
• Meta Tags — Preview, Edit and Generate With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!
• Web Code Tools The ultimate web code generators. Generate HTML, CSS, JSON-LD, Twitter Cards, Open Graph and more! No coding skills required.
• HEY META - Website Meta Tag Check Check and improve how search engines and social media websites see and display your website.
• SocialSplash Create your templates and automatize the generation of your images. Create images on the fly with a single URL.

Mockups

• Mokkit Create animated, transparent device mockups that convert. Ready in seconds, no design skills needed.
• 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!
• Mockup Creator Create Better Mockup with Designstripe
• ImageFactory.io Personalisation done really well. Create videos, gifs or images in bulk
• Multi Device Website Mockup Generator Multi device website mockup generator is free online tool to test your responsive website on apple devices including Apple iMac, Macbook, iPad and iPhone. This tool is very helpful for theme developers to mockup the web template on various apple devices with a single click.
• BrowserFrame | Wrap screenshots in browser frames Browser Frame is a free tool that helps you wrap screenshots in different browser frames. Supports Chrome, Firefox, Safari, and more.
• MockRocket – Jaw-dropping 3D app mockups & animations Create 3D app mockups and videos. Right from your web browser. No experience required. Choose from the lastest 3D device modals.
• dimmy.club Device mockup generator for your screenshots
• Screely - Generate Website Mockups Instantly turn your screenshot into a beautiful website mockup. Customize the browser mockup window, background and much more
• Screen Guru Take clean screenshot of any websites
• Device Frames - 3D Device Mockup Generator Custom 3D device mockups
• Free mockup templates and photos Browse 100% free iPhone, iPad, Android, tablet, poster mockup templates
• Screen — Screenshot Creator for Product Pages The fastest way to create screenshots of your app for product pages on Apple App Store, Google Play Store, Microsoft Store, etc.

Notifications

• ntfy.sh | Push notifications to your phone or desktop via PUT/POST ntfy is a simple HTTP-based pub-sub notification service. It allows you to send notifications to your phone or desktop via scripts from any computer, and/or using a REST API.

Open Source Alternatives to Popular Software

• Panoramax L’alternative libre pour photo-cartographier les territoires. Panoramax est une ressource numérique permettant la mise en commun et l'utilisation de photos de terrain. Toute personne peut photographier des lieux visibles depuis la voie publique afin d’alimenter la base de données de Panoramax. Ces données sont ensuite librement accessibles et réutilisables.
• LocalSend An open-source cross-platform alternative to AirDrop
• OpenAlternative Open Source Alternatives to Popular Software – A curated collection of the best open source alternatives to everyday SaaS products. Save money with reliable tools hand-picked for you.
• bruno Postman alternative

Performances

• Internet Speed Test - Measure Network Performance Test your Internet connection. Check your network performance with our Internet speed test. Powered by Cloudflare's global edge network.
• ✨ Your best Front-End Tool ✨ 🗂 The Front-End Checklist Application is perfect for modern websites and meticulous developers! Follow the rules and deliver the best of your work in a generated report!
• Front-End-Performance-Checklist 🎮 The only Front-End Performance Checklist that runs faster than the others - GitHub - thedaviddias/Front-End-Performance-Checklist: 🎮 The only Front-End Performance Checklist that runs faster than...

PHP

• CImage
• Embed Get info from any web service or page. Contribute to oscarotero/Embed development by creating an account on GitHub.
• drop_it A tiny — but robust — private PHP drop box

Placeholders

• DiceBear Avatars
• thispersondoesnotexist
• This Person Does Not Exist This Person Does Not Exist
• This X Does Not Exist Using generative adversarial networks (GAN), we can learn how to create realistic-looking fake versions of almost anything, as shown by this collection of sites that have sprung up in the past month.
• PlaceIMG | Easy FPO and Dummy Images for Any Project Placeholder images for your project in progress. Custom URLs generate placeholder pictures in various sizes with categories and effects.
• Lorem Picsum Lorem Ipsum... but for photos
• Lorem.space - placeholder image generator Lorem Ipsum fake image placeholder
• Placeholder pics, sub kilobyte placeholder images Placeholder pics is the lightest way to include placeholder images in your designs
• Logoipsum Free Placeholder Logo For Your Design Mock-up
• Minimal Avatars Create minimal, unique and playful avatars for free
• Wireframer Flawless SVG text for your wireframes

Playgrounds

• indiepen An independent and privacy-friendly solution to embed HTML, CSS and JS code examples
• LiveCodes Code Playground That Just Works!
• Flems Flems is a Playground for web development. Use it for examples, presentations, documentation, issues and what not.
• Plunker - Helping you build the web Plunker is the best tool to prototype, experiment, share and debug your ideas on the web platform. From idea to implementation, Plunker helps you build something quickly and frictionlessly.
• Javascript Playground (Sandbox, Repl) Javascript Playground (Sandbox, Repl)
• Glitch The friendly community where everyone builds the web. Simple, powerful, free tools to create and use millions of apps.
• Codepen CodePen: Online Code Editor and Front End Web Developer Community
• Glitch.new Your new favorite set of shortcuts to get you from idea to a running app in seconds.
• Indiepen An independent and privacy-friendly solution to embed HTML, CSS and JS code examples. We ship less than 20 KB, we don’t set any cookies or tracking, and, most importantly, we develop inclusive features for everyone.
• Codeframe A Playground for the Web
• Observable Explore, analyze, and explain data. As a team.
• JSFiddle - Code Playground Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Publish

• PinMe Publish Sites in Seconds. From folder to live in one step. No cloud configuration. No Server. No maintenance.

Regex

• RegEx Vis Regex visualizer & editor, make the regular expression easier.
• In search of the perfect URL validation regex
• regex101: build, test, and debug regex Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java. Features a regex quiz & library.
• RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).

Screen capture

• OpenScreen Create stunning demos for free. Open-source, no subscriptions, no watermarks, and free for commercial use. An alternative to Screen Studio.

Sitemaps Timelines and Roadmaps

• StartTreeV2: 🌳 🌳 A $tree styled start page generator! Contribute to AlexW00/StartTreeV2 development by creating an account on GitHub.
• Waymark With Waymark you can create instant, beautiful roadmaps for product presentations!
• Octopus.do FREE sitemap builder with wireframe kit for prototyping website structure & UX architecture. Use our website planner and site mapping tools to create site map instantly. Our visual sitemap tool and website mapping is extremely fast and easy, we promise! No registration required.
• Try markmap Try the markmap REPL here.

SVG

• SVG Studio Inspect, edit, and optimize SVGs in the browser
• Hyvector Your friendly vector editor.
• How to Perfectly Fit an SVG to its Contents Using JavaScript Using the SVG tag on websites is handy, but its interface can be different than we're used to. Here's a handy way to fit the viewport of an SVG to its contents every time.
• Try markmap Try the markmap REPL here.
• Handy Arrows A collection of hand-drawn arrows, doodles, and infographic elements for your next project.
• SVG Viewer SVG Viewer is an online tool to view, edit and optimize SVGs.
• NEAL.FUN Aweseome web experiences.
• SVGHUB Squiggles, scribbles, shapes and... other stuff. A library of over 70 custom-color elements ready to paste into your project.
• Creative Coding - SVG How the SVG viewBox works.
• Making SVG Loading Spinners: An Interactive Guide Learn to create a cool SVG loading spinner with this step-by-step guide. We'll use attributes like stroke-dasharray and stroke-dashoffset to make it easy.
• Flectofy Let's Flectofy! Please choose a form to start, or just go blank-madness.
• SVG Stripes Maker A free online SVG stripe pattern generator and maker. Create multi-stripe animated patterns, copy CSS or SVG code that is ready for you web projects, or just download the SVG file for free!
• Plain Pattern An SVG based seamless pattern maker.
• SvgPathEditor Online editor to create and manipulate SVG paths
• SVGOMG - SVGO's Missing GUI Easy & visual compression of SVG images.
• Coördinator Turn an SVG into XY coördinates.
• Warp SVG online Warp and distort SVG online
• SVG Path Visualizer Enter an SVG path data (the string inside the d attribute) to visualize it and discover all its different commands.
• SVG Repo - Free SVG Vectors and Icons Free Vectors and Icons in SVG format. ✅ Download free mono or multi color vectors for commercial use. Search in 300.000+ Free SVG Vectors and Icons.
• Interactive SVG Coordinate System Demo for article: SVG Coordinate Systems & Transformations (Part 1) – The viewport, viewBox, & preserveAspectRatio
• Vivus Instant - inline SVG animation with CSS Inline SVG Drawing Animation
• SVG animation tool | SVG Circus Online app enabling you to create cool SVG animations in seconds
• Powerful, online SVG editor for teams Vecta is a real time, collaborative SVG editor with a powerful Javascript based plugin system, for teams. Easily extend and automate, or create flowcharts, UML, network, isometric and web diagrams with thousands of included symbols. Export to multiple formats and resolution, including PNG, JPG and minified SVG that is very small in size and renders beautifully on all devices.
• Shape Shifter Shape Shifter simplifies the process of creating SVG-based icon animations.
• How SVG Line Animation Works I bet all of you have seen that little trick where an SVG path is animated to look like it's drawing itself. It's super cool. Jake Archibald pioneered the
• SVGX Free desktop SVG icon & asset manager for Mac and PC
• Lazy Line Painter A Jquery plugin for SVG path animation

SVG Waves

• Mossaik Create beautiful abstract SVG images for your designs. Stunning SVG waves, for your design, devices and websites!
• Wavelry
• Get Waves – Create SVG waves for your next design A free SVG wave generator to make unique SVG waves for your next web design. Choose a curve, adjust complexity, randomize!
• Shape Divider App Create fully responsive shape dividers for your next web project
• Haikei A web-based design tool to generate unique SVG design assets for websites, social media, blog posts, desktop and mobile wallpapers, posters, and more! Our generators let you discover, customize, randomize, and export generative SVG design assets ready to use with your favorite design tools.
• SVG Waves - Instantly generate waves An interactive playground to generate svg waves for your design. Customize wave types, colours, and more.

Typography

• Type Fluidity Fluid type for the web.
• Typescale Create stunning typography, generate CSS, and find inspiration.
• Aniso - ASCII Tool An open-source ASCII tool built by Studio Freight to generate and customize character-based imagery.
• User Interface Typography
• Fluid Space Calculator Fluid responsive design
• Utopia Fluid responsive design
• Calligrapher.ai: Realistic computer-generated handwriting Convert text to handwriting using an in-browser recurrent neural network. Choose from various print and cursive styles. Customize the outputs and download as SVG.
• Typographic Hierarchy in Print, Web & App Design - Pimp my Type Visual hierarchy makes or breaks your design. Learn how to guide the eye by intentionally using contrast and spacing in typography.
• Creating a Fluid Type Scale with CSS Clamp | Aleksandr Hovhannisyan Understand the math behind fluid typography and learn how to programmatically generate a fluid type scale with CSS clamp and Sass.
• Interactive Typography Tutorial Learn the fundamentals of typography through this gamified walkthrough with real-time feedback and logic-based principles.

USB

• Know what your USB-C cable can really do. WhatCable explains cable speed, charging limits, e-marker data, and connected devices in plain English. No more guessing why a cable charges slow or refuses to drive your display.

Vectorization

• Convert PNG and JPG to SVG. Convert PNG and JPG to SVG.
• vectormaker | Convert PNG-to-SVG Vectors Convert images to SVG vectors, PNG-to-SVG Vectors. Vectormaker outlines your pixel based images and turns them into colored SVG vector files.
• SVGcode SVGcode is a Progressive Web App that lets you convert raster images like JPG, PNG, GIF, WebP, AVIF, etc. to vector graphics in SVG format.
• Free Image Vectorization Automatically convert JPG, PNG and BMP raster images into scalable SVG vector images.
• Free SVG Converter Convert online picture to svg freely.
• Free BIMI SVG logo converter Free convertor - convert PNG, JPEG images to Tiny 1.2 SVG valid for BIMI

Video

• ffmpeg webCLI A progressive web app for video editing with ffmpeg.wasm. 100% local processing, no data leaves your browser.
• Open Cut The open source video editor. A simple but powerful video editor that gets the job done. Works on any platform.
• Tooscut Professional video editing, right in your browser. A powerful NLE editor with GPU compositing, keyframe animation, and real-time preview. No installs required.
• EZTrimmer Cut videos online for free — trim, split and export in seconds. No signup required.
• Lossless Cut The swiss army knife of lossless video/audio editing
• Pikimov Online motion design and video editor | 100% Free | No sign up | No file uploads | No AI
• AVPress AVPress is an in-browser video compressor that leverages FFMPEG.wasm
• ffmpeg buddy a friend to help you build ffmpeg commands Press is an in-browser video compressor that leverages FFMPEG.wasm