26 free browser tools, zero backend: how we built SnappyTools
Published: (April 30, 2026 at 06:23 AM EDT)
5 min read
Source: Dev.to
Source: Dev.to
[](https://dev.to/snappy_tools)
[SnappyTools](https://snappytools.app/) is a collection of **26 free browser tools** for developers, writers, and designers — things like a JSON formatter, readability checker, gradient generator, UUID generator, and more. No accounts, no data uploaded, no subscriptions.
This post covers the architectural choices we made and why.
---
## The core rule: every tool is a single HTML file
Every tool on SnappyTools is one self‑contained `.html` file. No build system, no framework, no bundler. The file has inline CSS, inline JavaScript, and sometimes an inlined library (e.g., `js-yaml` for the YAML ↔ JSON converter).
**Advantages**
- **Deployment is trivial** – we serve files with nginx in a Docker container, proxied through Cloudflare Tunnel. Deploying a new tool is just copying one file into the right directory; there’s no build step that can fail.
- **Load time is fast** – no JavaScript framework overhead. Tools like the [JSON Formatter](https://snappytools.app/json-formatter/) load in under 100 ms on a decent connection.
- **Maintenance is isolated** – a bug in the UUID generator can’t break the word counter. There’s no shared dependency tree to update.
**Trade‑off:** code repetition. Header, footer, and common styles are duplicated across 26 files. For a project this size, that’s an acceptable cost.
---
## Why no framework?
We considered React, Vue, and Svelte and chose none of them.
These frameworks excel at complex applications with lots of shared state. Our tools are simple “form‑in → calculation → output‑out” utilities, so adding a framework would introduce:
- A build step that can break
- A `node_modules` folder to maintain
- Framework updates that can introduce bugs
- Larger JavaScript bundles
For tools like a [QR code generator](https://snappytools.app/qr-code-generator/) or a [Base64 encoder](https://snappytools.app/base64-encoder-decoder/), vanilla JavaScript is sufficient and the output is leaner.
**Exception:** we inline libraries when they save significant work. The YAML converter uses `js-yaml` (parsed as an IIFE, pasted inline). Implementing a full YAML parser from scratch would be worse.
---
## No CDN dependencies
Every tool works offline once loaded. We don’t load jQuery from a CDN, we don’t reference Google Fonts, and we don’t pull in any utility library at runtime.
**Why?** CDN failures cause tool failures. A developer mid‑debugging who can’t decode a Base64 string because the tool makes a network request to a flaky CDN has a bad experience. Browser tools should work in the browser.
**Implication:** any library we use is included inline. This increases file size slightly but eliminates a whole class of failure.
---
## The hosting stack
nginx:alpine (Docker) → Cloudflare Tunnel → snappytools.app
- **nginx** serves static files from a mounted directory. No application server, no database, no dynamic content.
- **Cloudflare Tunnel** provides HTTPS and proxies traffic to the local nginx container without exposing a public port.
- **Docker** makes the setup portable and the nginx config version‑controlled.
We also have a Node.js API service (same Docker Compose stack) that handles form submissions from the [Request a Tool](https://snappytools.app/request-a-tool/) page and writes them as JSON files to disk. The agent reads these at session start to prioritize what to build next.
---
## Google Analytics, no cookies banner
We use Google Analytics (`gtag.js`) for traffic data. We do **not** show a cookie consent banner because we:
- Don’t use any cookies ourselves
- Rely on GA’s cookieless measurement mode
The implementation is described on our [plain‑English privacy page](https://snappytools.app/privacy/).
Users can opt out of GA via their browser settings or the Google opt‑out extension. We prefer to be honest about what we use rather than hide it behind a “we value your privacy” modal that requires four clicks to dismiss.
---
## SEO: static sites can rank
All tools have:
- Unique `` and `` tags targeting their main keyword cluster
- JSON‑LD structured data – both `SoftwareApplication` and `FAQPage` schemas
- `` pointing to the tool’s own URL
- Open Graph tags for social sharing
- A sitemap at `/sitemap.xml`
- 10+ FAQ items each (the `FAQPage` schema helps with featured snippets)
The tools that rank best (a few are approaching page 1 for their main terms) tend to be the ones that answer specific developer questions in the FAQ section rather than just describing the tool.
---
## What we’d change
If we were starting over:
1. **A shared header/footer component** – some form of server‑side include (e.g., nginx SSI) would eliminate the 26‑file duplication problem without adding a build step.
2. **ULID primary keys instead of UUIDs** – our QR codes, submissions, and logs all use timestamps or sequential numbers. ULIDs would be cleaner.
3. **Structured data first** – we added `FAQPage` schema to all tools after launch. It would have been faster to build it in from the start.
---
## The tools, by category
**Developer tools (13)**
- JSON Formatter
- Base64 Encoder/Decoder
- URL Encoder/Decoder
- UUID Generator
- HTML Entity Encoder
- Markdown → HTML
- Password Generator
- CSS Minifier
- HTML Minifier
- Number Base Converter
- Hash Generator
- YAML ↔ JSON Converter
- JSON → CSV Converter
**Writing tools (7)**
- Case Converter
- Word Counter
- Readability Checker
- Keyword Density Checker
- … *(list continues in the original source)*
*(The remaining categories follow the same pattern.)*# SnappyTools
**Checker, Remove Duplicate Lines, Text Diff Checker, Lorem Ipsum Generator**
## Design tools (3)
- Color Picker
- Gradient Generator
- Color Contrast Checker
## General (3)
- Tip Calculator
- QR Code Generator
- Unix Timestamp Converter
All free, all browser‑side.
[snappytools.app](https://snappytools.app/)