A curated list of in-browser bookmarklets, tools, and
resources for modern full-stack software
engineers.
Inspired by the awesome list
thing.
Bookmarklets
- artoo.js -
Client-side scraping utility for the currently loaded uri.
- DOM Monster - A
cross-platform, cross-browser bookmarklet that will analyze the DOM
& other features of the page you’re on.
- Make Bookmarklets -
Online tool to turn JavaScript into a bookmarklet.
- Rulers
Guides - A JavaScript library which enables Photoshop-like rulers
and guides interface on a web page.
- Viewport
Resizer - A browser-based tool to test any website’s
responsiveness.
Debug JavaScript
Postman Alternatives
- Hoppscotch - A lightweight,
web-based API development suite.
- RecipeUI - Open source
Postman alternative with type safety built in.
- Reqbin - REST & SOAP API Online
Testing Tool
Diagramming & Scratch
- asciiflow - ASCIIFlow is a
client-side only web based application for drawing ASCII diagrams.
- dbdiagram - Draw
Entity-Relationship Diagrams, Painlessly.
- dot-to-ascii -
Graphviz to ASCII converter using Graph::Easy.
- Excalidraw - Virtual
whiteboard.
- JSON-to-Chart - Create
beautiful charts from JSON data in your browser.
- JSONCrack - Visualize
CSV/JSON/TOML/XML/YAML instantly into graphs.
- Markmap - Visualize
markdown as a feature-rich mindmaps.
- nomnoml - A tool for drawing UML
diagrams based on a simple syntax.
- Sequence Diagram - An
online tool / software for creating UML sequence diagrams.
Diffing
- JSONDiffPatch - Run
a visual or non-visual diff on two JSON blobs.
Document & Editors
- README.so - A simple editor
to quickly add and customize all the sections you need for your
project’s readme.
Generators
- JSONGenerator - Create
random JSON data
- NGINXConfig
- The easiest way to configure a performant, secure, and stable NGINX
server.
- Readme - All in one tool
to quickly generate a readme for your project or github profile.
Image
- Clippy - CSS clip-path
maker and editor.
- Favic-o-matic - Literally
generates every favicon neccessary + markup.
- JPEG.rocks - Privacy-aware JPEG
optimizer
- PicPerf - Boost web
performance with image optimization. Analyze and improve
<img> tags, <style> tags, and
inline CSS.
- PNG-to-SVG - Free conversion
from JPG or PNG images To vectorized SVG.
- Squoosh - Compress and optimize
images in browser
- SVG-to-backgroundImage
- Convert your SVG files into CSS url (data URIs) by encoding it.
- SVGOMG - Try
SVGO (SVG Optimizer) in the
browser!
Web-based Services
Copy/Paste Scripts & Styles
File Sharing
- file.io - Ephemeral file sharing.
Convenient, anonymous and secure.
- instant.io - Instant file
transfer/sharing over WebTorrent
- pairdrop - Instant file transfer
over your local network (P2P)
Playgrounds
- codepen - Social development
environment for front-end designers and developers. Build and deploy a
website, show off your work, build test cases to learn and debug, and
find inspiration.
- CodeSandbox - Online code
editor and sandbox
- Ellie - The Elm Live
Editor
- ES.nextBin - Like RequireBin but
ES2015
- ESM - A fast, smart, & global
CDN for modern(es2015+) web development.
- JSBin -
JS/Coffee/Babel/Babel/Live/JSX/HTML/Markdown/Pug/CSS/Stylus/LESS/Sass
- JSFiddle -
JS/ES3/Coffee/HTML/CSS/Sass
- playcode.io -
JS/Typescript/Coffee/LiveScript/Babel/CSS/Sass/LESS/Stylus/HTML/Pug
Regex
- Debuggex -
PCRE/Python/JavaScript regex matching.
- ExtendsClass -
PHP/Python/Ruby/JavaScript regex matching.
- RegExplained -
JavaScript regex matching.
- Regexr - JavaScript regex
matching.
- Regulex - JavaScript Regular
Expression Visualizer.
- AST Explorer - Parse JS to an
explorable AST tree via acorn, babel, babylon, espree, esprima, recast,
shift, and typescript.
- Babel REPL - The compiler
for next generation JavaScript
- Compiler Explorer - Run compilers
interactively from your web browser and interact with the assembly
- fixmyjs -
Automatically fix your JS, driven by JSHint.
- JavaScript Deobfuscator - A
simple but powerful deobfuscator to remove common JavaScript obfuscation
techniques.
- JSNice - Statistical renaming,
type inference and deobfuscation.
- JSON ABC - Sorts JSON
alphabetically
- Markdown to HTML - Paste or
type your markdown and see it rendered as HTML. Download or copy the
resulting HTML.
- Markdown Tools - Tools to
convert Markdown to/from a number of formats. E.g. Html to Markdown, or
a CSV to a Markdown table.
- Sassmeister - Sass/Scss
<-> CSS
- Sucrase - Super-fast Babel
alternative
- SWC - compile JS/TS files
using modern JS features and outputs valid code that is supported by all
major browsers.
- Terser - JavaScript parser,
mangler and compressor toolkit for ES6+
- Web2Img - A tool to
bundle your web files into a single image, and extract them via Service
Worker at runtime.
- WebAssembly
Explorer - translate C/C++ to WebAssembly, and then see the machine
code generated by the browser.
Presentation
- Ray.so - Create beautiful images of
code snippets.
- snapify - Snappify enables
you to create stunning presentations, with first-class support for code
snippets.
Resources
APIs
CDN
- JSDelivr - A free CDN for
open source projects.
- Skypack - Load optimized npm
packages with no install and no build tools.
- unpkg - Fast, global content
delivery network for everything on npm.
Cheat Sheets
CSS Inliners
Documentation
Easings & Animations
Glyphs & Icons
- Copy/Paste Character -
Copy & Paste emojis and unicode symbols
- CSS Icons - Copy & Paste
icons in CSS + transition animations!
- Entity Lookup -
Enter any character(s) and find its corresponding HTML entity code.
- heroicons - Beautiful
hand-crafted SVG icons, by the makers of Tailwind CSS.
- Icon Finder - Millions of
graphics for your design projects. Created by independent
designers.
- Icon Monstr - Discover 4000+
free icons in 300+ collections.
- Icônes - Over
150,000 open source vector icons.
- Tabler Icons - 4000+ Open
source free SVG icons. Highly customizable. No attribution required. For
commercial use.
Proxy as a Service
- CORS Anywhere -
Proxies any HTTP request through a CORS enabled environment.
Responsiveness
Validation & Parsers
Security
SSL
Test
- HSTS Preload - Check HSTS
preload status and elibility.
- Mozilla Observatory -
A set of tools to analyze your website and inform you if you are
utilizing the many available methods to secure it.
- Security
Headers by Probely - An easy to use tool designed to help you better
deploy and understand modern security features that are available for
your website.
- Web Check - All-in-one OSINT
tool for analysing any website.
The Outside World
Swag
License
