DEV Community: xueboyang1985

How to Build a Browser Tool and Sell It on Gumroad — A Complete Guide

xueboyang1985 — Thu, 04 Jun 2026 09:37:32 +0000

I built 24 browser-based tools. Here is the complete technical guide for building your own and selling PRO licenses on Gumroad.

Architecture: One HTML File + GitHub Pages + Gumroad

No frameworks, no backend, no monthly costs. One HTML file on GitHub Pages. Gumroad handles payments.

The PRO Flow

User hits free limit → PRO modal
Buy button → Gumroad popup (window.open, NOT target=_blank)
Payment → Gumroad postMessage with license key
message listener catches key
Key verified via Gumroad API (/v2/licenses/verify)
localStorage saves PRO (in try-catch!)

Gotchas From 24 Tools

postMessage security: Check d.success && d.purchase, never just d.license_key. I had this bug in 17 files.

localStorage: Wrap in try-catch. Uncaught throws crash the whole page.

CDN scripts: Always <script defer>. Without it, slow CDN blocks rendering.

Gumroad publish: curl returns false every time. Use PowerShell.

Buy button: Popup connects the page to Gumroad. Redirect breaks postMessage.

Packed 5 templates with everything pre-configured: Browser Tools Starter Kit ($19)

I Built 24 Free Browser Tools in 6 Weeks — Here's What I'd Do Differently

xueboyang1985 — Sun, 31 May 2026 00:44:53 +0000

Six weeks ago, I had zero browser tools. Now I have 24. Revenue: $0.

This is not a success story. It's a reality check on what happens when you focus on building and ignore distribution.

What I Built

24 tools, each a single HTML file with vanilla JavaScript. Hosted on GitHub Pages. No server, no database, no frameworks.

Hub: 24 Free Browser Tools

The tools span four categories:

PDF & Document: Merge, split, convert, extract — 7 PDF tools
Image: Compress, resize, crop, AI background remover, color picker
Developer: JSON-CSV converter, text diff, base64 encoder, UUID generator, markdown editor
Productivity: Password generator, QR codes, timestamp converter, case converter, word counter

All running client-side. Your files never leave your browser.

What Went Right

1. Single HTML File Architecture

No build step. No npm install. No node_modules. Each tool is one file:

<!DOCTYPE html>
<html>
<head>
  <style>/* all CSS inline */</style>
</head>
<body>
  <!-- all HTML -->
  <script>
  // all JavaScript
  </script>
</body>
</html>

This means: instant deploys, zero dependencies, trivially auditable. Users can view source and confirm nothing shady is happening.

2. Browser APIs Are Incredible Now

Canvas API — Image compression, resize, crop. All at native speed.
Web Crypto API — crypto.getRandomValues() for true-random UUIDs and passwords.
WebAssembly — Runs a full AI neural network for background removal. ~5 seconds per image, no cloud GPU.
EyeDropper API — Pick any color from your screen.

I didn't need a single server-side dependency. The browser IS the platform.

3. Free Hosting That Scales

GitHub Pages: free, global CDN, auto-deploys on git push. Even if 100,000 people use a tool simultaneously, GitHub's CDN handles it without me paying a cent.

What Went Wrong

1. I Built Too Many Tools

24 tools is too many. Each one needs:

A blog post for SEO
A Gumroad product listing
Cross-links to other tools
Testing across browsers
Bug fixes

That's 24 x 5 = 120 tasks just for maintenance, before any promotion.

If I could start over: build 5 really good tools instead of 24 decent ones.

2. Distribution Is 10x Harder Than Building

Coding 24 tools took 6 weeks. Getting anyone to use them? That's the real work.

My promotion efforts so far:

4 dev.to articles (this is #5)
Hacker News Show HN (0 upvotes)
Reddit posts (0 comments)
Directory submissions (pending review)

Building something is the easy part. Getting distribution is the entire game.

3. Free Is a Bad Marketing Strategy

"It's free!" sounds great until you realize it means "no urgency to buy." My free limits are generous — most users never hit them. This is great for users, terrible for revenue.

If I could restart, I'd make the free tier slightly more restrictive and add a free trial of PRO features.

4. No Email Collection

I have no way to contact users. No newsletter, no onboarding email, no "we miss you" automation. Every user who visits is a one-time event. If they don't buy immediately, I never see them again.

Adding a simple "Save your work" feature that requires email would have changed everything.

5. Zero Social Proof

Nobody wants to be the first person to buy something. The bundle page has no reviews, no testimonials, no "X people bought this." It's empty. Social proof is the strongest conversion lever, and I have none.

The Tech That Surprised Me

ONNX Runtime Web for background removal. A full neural network running in WebAssembly, in the browser, with no API key. The model is ~40MB but caches after first load. Processing takes ~5 seconds. This shouldn't be possible in a browser, but it is.

pdf-lib for PDF manipulation. Pure JavaScript, no native dependencies. Handles merge, split, page extraction, metadata. The API is surprisingly clean.

Service Workers. I didn't implement them, but all these tools would benefit from offline-first architecture. Next priority.

What I'm Doing Next

Product Hunt launch — targeting next week
Email capture — newsletter signup on the hub page
Content marketing — more dev.to articles, SEO blog posts
Tool directories — submit to nologin.tools, alternativeto.net, etc.

I'm documenting everything publicly. If you're building client-side tools or indie products, follow along.

Try the Tools

All 24 tools →

All free. No signup. No tracking. PRO bundle ($19.99 one-time) if you want unlimited everything.

GitHub: xueboyang1985 | Previously: 7 PDF Tools | 5 Image Tools | 10 Dev Tools

10 Free Developer Utility Tools That Run Entirely in Your Browser

xueboyang1985 — Sun, 31 May 2026 00:10:28 +0000

Every developer has a collection of bookmarklets and random websites they use for quick utilities: format some JSON, diff two configs, generate a UUID, encode something in base64.

Most of these tools send your data to a server. I built 10 developer utility tools that never leave your browser.

The Stack (or Lack Thereof)

Each tool is one HTML file. No React, no Vue, no build step. Vanilla JS + browser APIs:

crypto.getRandomValues() for UUIDs, random numbers, secure passwords
Canvas API for QR code rendering
localStorage for saving preferences (with try-catch guards)
LCS algorithm for text diffing
GitHub-Flavored Markdown parser (regex-based, not a library)

Hosting: GitHub Pages (free, global CDN). No server-side code. No database.

The 10 Tools

1. JSON Formatter & CSV Converter

Format, validate, minify JSON. Convert between JSON and CSV with smart type inference. Handles nested objects and big integers.

Try it →

2. Text Diff Checker

Compare two texts side by side. Line-by-line and character-level diff using Longest Common Subsequence algorithm. Highlights insertions and deletions.

Try it →

3. Base64 Encoder & Decoder

Encode/decode text and files to/from Base64. Also includes hex and binary modes. File drag-and-drop support.

Try it →

4. UUID Generator

Generate UUID v4 (random) and v7 (time-ordered). Batch up to 100 at once. Uses crypto.getRandomValues() for true randomness.

Try it →

5. Password Generator

crypto.getRandomValues() for secure randomness. Configurable length (8-128 chars), character sets, ambiguous character exclusion. Full entropy — no Math.random() shortcuts.

Try it →

6. QR Code Generator

Generate QR codes for URLs, WiFi networks, email, SMS, and vCard contacts. Wraps qrcodejs library. Download as PNG.

Try it →

7. Markdown Editor

Split-pane editor with live preview. GitHub-Flavored Markdown (tables, strikethrough, code blocks). Copy HTML or download.

Try it →

8. URL Encoder & Decoder

Full URL and component encoding. Data URL generation. Handles edge cases like nested encoding and special characters.

Try it →

9. Timestamp Converter

Human-readable dates to Unix timestamps (seconds and milliseconds) and vice versa. Timezone-aware ISO 8601 support. Relative time display.

Try it →

10. Number Base Converter

Binary, octal, decimal, hexadecimal. Fractional number support. Step-by-step conversion mode for learning.

Try it →

Bonus: Quick Reference Tools

Case Converter — UPPER, lower, Title, Sentence, camelCase, snake_case, kebab-case
Word Counter — Words, characters, sentences, paragraphs, reading time
Random Generator — Numbers, coin flips, dice rolls, list picker, shuffle (crypto.getRandomValues)
HTML Formatter & CSS Minifier — Tag-aware HTML indentation, CSS whitespace stripping
Color Picker — HEX/RGB/HSL converter with EyeDropper API support

Why Browser-Native?

Security. Your JSON payloads, API keys, and configuration files never leave your device.

Offline. All tools work without internet after first load. Service workers cache everything.

Speed. No network round-trip. Type a UUID, get it instantly. Diff two files, see results immediately.

Auditable. View source to confirm: no telemetry, no analytics, no hidden API calls.

Free vs PRO

Every tool works fully for free with reasonable limits. The PRO Bundle ($19.99 one-time) removes all limits across all tools with a single license key.

Part of 24 free browser tools — all client-side, no signup, no tracking.

Previously: 7 PDF Tools | 5 Image Tools

5 Browser-Based Image Tools That Work Entirely Offline — No Upload Required

xueboyang1985 — Sat, 30 May 2026 23:43:46 +0000

Every image tool website wants you to upload your photos to their server. I never liked that — especially when the photos are personal.

So I built 5 image tools that process everything in your browser. The image data stays in JavaScript memory, gets processed by Canvas API or WebAssembly, and the result is downloaded directly.

How Client-Side Image Processing Works

Modern browsers have incredible built-in capabilities:

Canvas API — Draw, transform, and export images at pixel level. Resize, crop, compress, all without plugins.
WebAssembly — Run compiled C/C++ code at near-native speed. This is how the background remover runs a full AI model.
EyeDropper API — Pick any color from your screen without taking a screenshot.

With these three APIs, you can build professional-grade image tools that never need a server.

The 5 Tools

1. Image Compressor

Drag in a JPG, PNG, or WebP. Adjust quality slider. Download the compressed version.

How it works: Canvas API re-encodes the image at your chosen quality level. For PNG, it also strips metadata. For JPEG, it uses the browser's native JPEG encoder.

Free limit: 5 MB per image. PRO: unlimited size.

Try Image Compressor →

2. Image Resizer

Resize by percentage, pixels, or max dimension. Aspect ratio lock. Preview before downloading.

How it works: Canvas API draws the image at the target dimensions using drawImage(). Bilinear interpolation by default, high-quality if browser supports it.

Free: 5 MB. PRO: unlimited.

Try Image Resizer →

3. Image Cropper

Interactive crop selector on the image. Touch-friendly for mobile. Set aspect ratios (1:1, 4:3, 16:9, freeform).

How it works: Canvas drawImage() with source rectangle coordinates extracts the cropped region.

Free: 5 MB. PRO: unlimited.

Try Image Cropper →

4. AI Background Remover

This is the most technically interesting one. It runs a neural network (ISNet) entirely in-browser via ONNX Runtime Web with WebAssembly backend.

How it works:

The ONNX model (~40 MB) downloads on first use and caches in browser storage
Your image is preprocessed to 1024x1024
The model runs inference in WebAssembly — ~5 seconds per image
The alpha mask is applied to create a transparent PNG

No API key. No cloud credits. No server processing. Just your browser and a neural network.

Free: 720p output. PRO: full HD+, batch processing, background color replacement.

Try Background Remover →

5. Color Picker

Click a color on the color wheel, paste a hex code, or use the EyeDropper API to pick directly from your screen. Converts between HEX, RGB, and HSL in real-time.

Also saves color history to localStorage.

Try Color Picker →

Performance Comparison

Tool	Free Limit	Processing Time	Output Quality
Image Compressor	5 MB	~1s	Configurable
Image Resizer	5 MB	< 1s	Bilinear
Image Cropper	5 MB	< 1s	Lossless crop
Background Remover	720p	~5s per image	AI neural network
Color Picker	Unlimited	Real-time	N/A

Privacy First

These tools are genuinely private — not "privacy policy" private, but technically private:

No server receives your files (there is no server)
No analytics script tracks your usage
No cookies (except color history you choose to save)
Works offline after first load
View source to verify — it's just HTML and JS

One Key, All Tools

All 5 image tools are part of a 24-tool collection. The free versions have generous limits. A single PRO key ($19.99, one-time) removes all limits across every tool. No subscription.

Source code for everything is on GitHub — MIT license.

Previously: 7 Free PDF Tools That Never Upload Your Files

7 Free PDF Tools That Never Upload Your Files — All Client-Side

xueboyang1985 — Sat, 30 May 2026 23:40:55 +0000

Most 'free online PDF tools' make you upload your files to some server. You drag in a contract, a tax form, or a client document — and it gets sent to who-knows-where.

I built a different approach: 7 PDF tools that run entirely in your browser.

How It Works

Every tool is a single HTML file with vanilla JavaScript. When you open the page:

Your browser downloads the HTML + JS (static files from GitHub Pages CDN)
PDF processing libraries (pdf-lib, jsPDF, pdf.js) load from CDN
You select a file — it stays in browser memory
Processing happens using your browser's JavaScript engine and Canvas API
The result is downloaded directly to your computer

No upload. No server. No tracking. You can disconnect from the internet after the page loads and everything still works.

The 7 Tools

1. Merge PDFs

Combine multiple PDFs into one. Drag to reorder pages before merging.

Use case: Combine scanned pages into a single document, merge contracts with appendices.

2. Split PDF

Extract specific pages or split every page into separate files. Supports page ranges (e.g. 1-5, 8, 10-12).

Use case: Pull out just the signature page from a contract, split a batch scan into individual documents.

3. Images to PDF

Convert JPG, PNG, or WebP images into a PDF. Options for page size (A4, Letter, original), orientation, and margins.

Use case: Convert photos of receipts into a single PDF expense report.

4. PDF to Images

Extract pages from a PDF as PNG or JPG images. Scale options (1x-4x). Batch download as ZIP.

Use case: Extract charts from a PDF report for a presentation.

5. Extract Images

Pull all embedded images from a PDF file. Handy for extracting photos, logos, or diagrams.

6. Base64 to PDF (and back)

Convert PDF to base64 text (for embedding in JSON, HTML, or APIs) and vice versa.

7. Text to Image

Convert any text into an image — useful for creating text-based graphics or watermarks.

The Tech Stack

pdf-lib (1.17.1) — Merge, split, PDF manipulation
jsPDF (2.5.1) — Images to PDF
pdf.js (3.11.174) — PDF to images, extract images
JSZip (3.10.1) — Batch download as ZIP
FileSaver.js — Trigger downloads

All loaded from CDN with defer so nothing blocks rendering. No frameworks, no build step, no npm.

Free Limits

Feature	Free	PRO
Merge pages	10	Unlimited
Split pages	10	Unlimited
Images to PDF	5 images	Unlimited
PDF to images	10 pages	Unlimited
File size	10 MB	Unlimited

Free limits are generous — most casual users never hit them.

Why Client-Side Matters

Privacy: Your documents never leave your device
Speed: No upload wait time. Processing happens immediately
Offline: Works after the first page load
Security: No server to hack, no database to leak

Try It

Launch PDF Tools →

Source on GitHub (MIT license).

Part of a collection of 24 free browser tools — all client-side, no signup, no tracking.

I Built 24 Free Browser Tools That Run 100% Client-Side — No Upload, No Tracking

xueboyang1985 — Sat, 30 May 2026 07:29:00 +0000

Six weeks ago, I started building browser-based tools as a side project. Today, I have 24 tools — and they have collectively handled zero server requests. Because there is no server.

Every tool is a single HTML file with vanilla JavaScript. Hosted on GitHub Pages. No frameworks, no build step, no backend, no database.

Hub page: https://xueboyang1985.github.io/free-browser-tools/

The Stack

Hosting: GitHub Pages (free, global CDN)
Frontend: Vanilla HTML/CSS/JS — no build tools, no frameworks
PDF: pdf-lib, jsPDF, pdf.js
QR: qrcodejs
Images: Canvas API
Crypto: Web Crypto API

Why Client-Side?

Most free online tools make you upload files to a server. With client-side tools your data never leaves your computer. No tracking. Works offline.

The 24 Tools

PDF Tools — merge, split, images to/from PDF, extract images
Image Compressor — JPG/PNG/WebP, adjustable quality
Image Resizer & Cropper — aspect ratio lock
Background Remover — neural network via WebAssembly, no API key needed
Password Generator — crypto.getRandomValues, customizable
QR Code Generator — URLs, WiFi, email, vCard
JSON-CSV Converter — bidirectional, bigint support
Base64 Encoder — text + file encoding
Color Picker — EyeDropper API, HEX/RGB/HSL
HTML Formatter & CSS Minifier
URL Encoder — full URL + component encoding
Timestamp Converter — Unix, ISO 8601, relative time
Number Base Converter — binary/octal/decimal/hex
Random Generator — numbers, coin, dice, picker, shuffle
Text Diff Checker — line/char diff, highlighted
Word Counter — words, chars, reading time
Case Converter — camelCase, snake_case, kebab-case
Markdown Editor — live preview, GFM
UUID Generator — v4 and v7, bulk up to 1000
WhatsApp Chat Formatter — export to MD/HTML/CSV
Subtitle Converter — SRT to VTT to ASS
Kindle Highlights Exporter — parse My Clippings.txt

The Technical Approach

Every tool is a single HTML file. No bundlers, no React, no build step. Vanilla JS + CDN libraries.

Key APIs used: File API, Canvas API, Web Crypto API, pdf-lib, ONNX Runtime (WebAssembly for AI background removal).

Monetization

All tools are free to use. The PRO Bundle (9.99) removes free limits (e.g. 125 PDF pages, 5MB images) with a single license key across all 24 tools. One-time payment, lifetime access, 3 devices.

The Hard Part

24 tools, 6 weeks, zero server costs. Revenue so far: $0. Building was easy. Getting traffic is the real challenge.

DEV Community: xueboyang1985

How to Build a Browser Tool and Sell It on Gumroad — A Complete Guide

Architecture: One HTML File + GitHub Pages + Gumroad

The PRO Flow

Gotchas From 24 Tools

I Built 24 Free Browser Tools in 6 Weeks — Here's What I'd Do Differently

What I Built

What Went Right

1. Single HTML File Architecture

2. Browser APIs Are Incredible Now

3. Free Hosting That Scales

What Went Wrong

1. I Built Too Many Tools

2. Distribution Is 10x Harder Than Building

3. Free Is a Bad Marketing Strategy

4. No Email Collection

5. Zero Social Proof

The Tech That Surprised Me

What I'm Doing Next

Try the Tools

10 Free Developer Utility Tools That Run Entirely in Your Browser

The Stack (or Lack Thereof)

The 10 Tools

1. JSON Formatter & CSV Converter

2. Text Diff Checker

3. Base64 Encoder & Decoder

4. UUID Generator

5. Password Generator

6. QR Code Generator

7. Markdown Editor

8. URL Encoder & Decoder

9. Timestamp Converter

10. Number Base Converter

Bonus: Quick Reference Tools

Why Browser-Native?

Free vs PRO

5 Browser-Based Image Tools That Work Entirely Offline — No Upload Required

How Client-Side Image Processing Works

The 5 Tools

1. Image Compressor

2. Image Resizer

3. Image Cropper

4. AI Background Remover

5. Color Picker

Performance Comparison

Privacy First

One Key, All Tools

7 Free PDF Tools That Never Upload Your Files — All Client-Side

How It Works

The 7 Tools

1. Merge PDFs

2. Split PDF

3. Images to PDF

4. PDF to Images

5. Extract Images

6. Base64 to PDF (and back)

7. Text to Image

The Tech Stack

Free Limits

Why Client-Side Matters

Try It

I Built 24 Free Browser Tools That Run 100% Client-Side — No Upload, No Tracking

The Stack

Why Client-Side?

The 24 Tools

The Technical Approach

Monetization

The Hard Part

Links