7 Free Browser Tools for Developers Who Make Content

Aly Hasan — Mon, 13 Apr 2026 19:39:52 +0000

I have two modes.
During the day I write code — components, APIs, debugging sessions that stretch longer than I'd like to admit. In the evenings I make content — short videos, demos, tutorials, the occasional TikTok clip that explains a concept in 60 seconds.
For a long time these two worlds felt completely separate. Different tools, different workflows, different headspaces.
Then I started finding tools that work for both. No installs. No subscriptions. Open a tab, do the thing, close the tab. That's the bar.
Here are the 7 I actually keep bookmarked.

1. Excalidraw — Sketch before you code

Before I write a single line I sketch the structure. Excalidraw opens instantly, needs no account, and exports clean PNGs that drop straight into a GitHub README or a Notion doc.
The hand-drawn style is actually useful — it signals to teammates that this is a draft. Nobody wastes 20 minutes debating fonts on a whiteboard sketch.
Best for: Architecture diagrams, API flow sketches, quick wireframes
Works offline as a PWA and collects
zero data — no tracking whatsoever.
🔗 excalidraw.com

2. Ray.so — Make your code screenshots not look terrible

I share code snippets on LinkedIn and Twitter fairly often. Plain screenshots get scrolled past. Ray.so takes the same code and wraps it in a clean dark card with syntax highlighting.
The difference in engagement is measurable. Same content, better presentation — more clicks, more reads, more followers.
Best for: Twitter/LinkedIn code posts, portfolio screenshots
My go-to theme: Midnight with a dark window frame
🔗 ray.so

3. Squoosh — Compress images before they hit production

Every image goes through Squoosh before it lands in any repo I own. Drag the file in, pick WebP or AVIF, drag the quality slider until the preview still looks clean, download.
The size reduction is usually 60–80% with no visible quality loss. It runs entirely locally in your browser — nothing is uploaded anywhere. For a performance-conscious developer this matters.
Best for: Pre-commit image optimisation, blog post images, portfolio assets
Format pick: WebP for web, AVIF for maximum compression
🔗 squoosh.app

4. TikRapid MP3 Extractor — Pull clean audio for web projects

This one sits in an unexpected category but I reach for it more than I expected.
When I'm building something with the Web Audio API or testing an audio player component I need actual audio files — not placeholder URLs that go dead, not synthetic test tones. I need real MP3 files with varied dynamics and frequency ranges that behave like what users will actually play.
TikTok has an enormous library of short audio clips: music, voiceovers, ambient sound, spoken word. TikRapid's MP3 extractor lets me paste any TikTok URL and pull a clean MP3 file in a few seconds. No account, no watermark on the audio, no extension to install.
I also use it when a creator posts something with a backing track I want to reference — I save the audio, open it in a waveform visualiser, and study the mix. Useful for anyone building audio-related UI.
Best for: Web Audio API testing, audio player components, reference clips
Bonus: The same site has a video downloader at tikrapid.com if you need MP4 files for video player testing
🔗 tikrapid.com/tiktok-mp3-downloader

5. Coolors — Generate a colour palette in one keystroke

Hit spacebar. New palette. Lock the colours you like. Keep hitting spacebar. Export to CSS variables when you're done.
That is the entire workflow. I have shipped more side projects because of Coolors than I care to admit — it removes the "spend an afternoon on colours, ship nothing" trap entirely.
Best for: Side projects, quick brand palettes, CSS variable generation
Pro tip: Lock one brand colour first, generate around it
🔗 coolors.co

6. Carbon — Cleaner alternative to Ray.so for documentation

Carbon and Ray.so overlap in purpose but have different strengths. Carbon gives you more control over fonts and padding — better for documentation screenshots where precise readability matters more than visual flair.
When I'm writing a README or a technical guide I use Carbon. When I'm posting to social I use Ray.so. Both are free, both are browser-only.
Best for: README code blocks, technical documentation, internal wikis
🔗 carbon.now.sh

7. Shots.so — Browser and device mockups with zero effort

You paste a screenshot URL or upload an image and Shots.so wraps it in a clean browser frame, a phone mockup, or a desktop window. The output looks like something from a proper design team.
I use it for portfolio case studies and product demos. A raw screenshot says "I built a thing." The same screenshot in a polished device frame says "I built a thing and I know how to present it." Hiring managers notice the difference.
Best for: Portfolio projects, App Store screenshots, demo slides, LinkedIn posts
🔗 shots.so

The common thread

Every tool on this list is browser-only, free, and needs no account. None of them ask for your email before they let you do the thing you came to do.
That sounds like a low bar. But spend five minutes trying to find a TikTok audio extractor that doesn't route you through three fake download buttons first, or a colour palette tool that doesn't lock the export behind a signup wall — and you'll appreciate how rare genuinely friction-free tools actually are.
If you have a tool that clears this bar and deserves more attention, drop it in the comments. My bookmark bar has room.

DEV Community: Aly Hasan