I've been building browser-based developer tools for the past year or so. What started as a single OG image generator turned into a full collection of 20 free utilities. They all run in your browser, which means your data never hits a server.
I want to walk through all of them, grouped by what you'd actually use them for.
Why browser-only tools matter
Speed is the obvious reason. There's no round trip to a server, no waiting for a response. Paste your text, get your result.
But the real reason is privacy. Think about what developers paste into online tools. JWT tokens with user data. API keys in Base64 strings. Config files with database credentials. Password hashes. Every time you use a server-side tool, that data leaves your machine and lands on infrastructure you don't control.
These tools use the Web Crypto API, TextEncoder, and native browser APIs to do everything locally. Your input stays in your browser tab and nowhere else.
Debugging and data inspection
When something breaks, you need answers fast. You don't want to context-switch into a terminal or install a CLI tool just to decode a token.
The JWT Decoder splits your token into header, payload, and signature. It shows expiration status, issued-at timestamps, and all claims with color coding so expired tokens are obvious at a glance. I built this after realizing most online JWT decoders quietly send your token to their backend.
The Diff Checker does side-by-side text comparison with line-level highlighting. I used to rely on a bookmarked tool for this, but it started requiring a login. Comparing config files, checking what changed in an API response, diffing two versions of a function. All common tasks that shouldn't require an account.
The Regex Tester lets you write patterns and test them against sample text in real time. Matches are highlighted as you type. It beats opening a Node REPL every time you need to validate a pattern.
Then there's the JSON Formatter. Paste in minified or messy JSON and get it formatted with syntax highlighting. I probably use this one more than any other tool on the list.
The CSV to JSON Converter handles the tedious work of transforming CSV exports into JSON. Supports custom delimiters. I originally built it because I kept getting CSV exports from Stripe and needed them in a different format for scripts I was writing.
Security, encoding, and hashing
This category is where the privacy argument hits hardest. You really shouldn't be pasting passwords and tokens into tools that phone home.
The Hash Generator supports SHA-256, SHA-512, SHA-1, and MD5. It uses SubtleCrypto.digest() under the hood, so the browser does all the computation. I use it for verifying file integrity and generating test data.
The Base64 Encoder handles both text and files. It auto-detects whether your input is already encoded, which saves a step. Simple tool, but I reach for it constantly.
The URL Encoder/Decoder encodes and decodes URL components. Useful when you're debugging query parameters or building URLs programmatically and something looks off.
The Password Generator creates strong passwords with configurable length and character sets. Generated entirely in the browser using crypto.getRandomValues(). No server ever sees the password.
The UUID Generator produces v4 UUIDs on demand. Copy with one click. I use this when seeding databases or writing tests that need unique identifiers.
Content, SEO, and social sharing
If you ship anything on the web, you've dealt with broken link previews. These tools exist because I got tired of deploying, sharing a link, and seeing a blank preview card on Twitter.
The OG Image Generator is where this whole project started. Design Open Graph images visually with templates, custom text, and backgrounds. Export as PNG. No Figma needed for basic social cards.
The OG Tag Checker lets you enter a URL and see exactly what meta tags are present, what's missing, and how your link preview will look on different platforms. Saves you from the deploy-and-pray cycle.
The Meta Tag Generator produces the full set of og:title, og:description, twitter:card, and related tags. Fill in the fields, copy the HTML. It covers the tags you forget exist until your link preview looks wrong on LinkedIn.
The Privacy Policy Generator creates a privacy policy page based on your inputs. Useful for side projects and MVPs where you need a policy but don't want to pay a lawyer for a hobby project.
The Markdown Previewer renders Markdown in real time as you type. I use it for previewing README files and blog post drafts before pushing them.
Visual and utility tools
The remaining tools handle visual tasks and quick conversions that come up during development.
The Favicon Generator creates favicons from images or text. Exports in multiple sizes. Every new project needs one and this is faster than opening an image editor.
The Image Resizer resizes images to specific dimensions. Runs entirely in the browser using Canvas API. No upload, no compression artifacts from a third-party service.
The Screenshot Tool captures screenshots of any URL. Handy for documentation, creating preview images, or checking how a page renders without navigating to it.
The Color Converter converts between HEX, RGB, HSL, and other color formats. Includes a visual picker. Small tool, but useful when you're jumping between CSS and design specs.
The QR Code Generator generates QR codes from any text or URL. Download as PNG. I've used it for event links and quick sharing between devices.
The technical side
Everything is built with Next.js and statically rendered. There are no API routes powering these tools. The cryptographic operations use the Web Crypto API. The image tools use Canvas. The diffing uses a longest common subsequence algorithm. No heavy dependencies for the core tool logic.
The tools load fast because there's very little to load. No analytics scripts, no third-party tracking, no cookie banners.
All 20 tools in one place
You can find everything at ogpix-pi.vercel.app. Free, no account required, no data collection. If something's broken or you want a tool I haven't built, let me know in the comments.
Top comments (0)