Last month I released tools.pixiaoli.cn -- a collection of 33+ developer utilities that run entirely in your browser. No servers, no accounts, no data leaving your machine.\n\nHere's what I learned building it.\n\n## The Core Principle: Zero Network Requests for User Data\n\nEvery tool on the site follows one rule: your data never touches a server.\n\nThis sounds simple, but it changes everything about how you architect the tools:\n\n
\nTraditional approach:\nBrowser -> Send data to server -> Server processes -> Return result\n\nClient-side approach:\nBrowser -> Process in browser -> Display result (data never leaves)\n
\n\nThe second approach means:\n- No backend costs -- zero server bills\n- No privacy concerns -- data stays local\n- Instant results -- no network latency\n- Works offline -- once loaded, no internet needed\n\n## The Tool List (Yes, All 33+)\n\nHere's what's included:\n\n### Formatters and Converters\n- JSON Formatter/Validator -- with syntax highlighting and error pinpointing\n- CSV to JSON Converter -- handles quoted fields, escaped commas\n- JSON to CSV Converter -- flatten nested objects automatically\n- XML to JSON Converter -- bidirectional conversion\n- YAML to JSON Converter -- with error line highlighting\n\n### Text and Writing\n- WeChat Markdown Editor -- the most popular tool, converts Markdown to WeChat-compatible rich text with one click\n- Text Difference Checker -- side-by-side diff with highlighted changes\n- Word/Character Counter -- with reading time estimate\n- Case Converter -- camelCase, snake_case, PascalCase, kebab-case\n\n### Image Tools\n- Image Format Converter -- PNG, JPG, WebP, BMP\n- Image Compressor -- quality slider with preview\n- Image to Base64 -- for embedding in CSS/HTML\n- QR Code Generator -- customizable colors and style\n\n### Encoding and Security\n- Base64 Encoder/Decoder -- text and file\n- URL Encoder/Decoder -- with component encoding options\n- HTML Entity Encoder/Decoder -- for safe HTML output\n- Hash Generator -- MD5, SHA-1, SHA-256, SHA-512\n\n### Developer Utilities\n- Regex Tester -- with match highlighting and group capture\n- Cron Expression Parser -- shows next 5 execution times\n- UUID Generator -- v1, v4, and custom format\n- Color Picker -- HEX, RGB, HSL with palette generation\n- Timestamp Converter -- Unix to human-readable, any timezone\n\n## Architecture: How to Build This Without a Server\n\n### The Simple Pattern\n\nEach tool is a self-contained HTML file with embedded CSS and JavaScript:\n\n
html\n<!DOCTYPE html>\n<html>\n<head><title>JSON Formatter</title></head>\n<body>\n <textarea id="input"></textarea>\n <button id="format">Format</button>\n <pre id="output"></pre>\n <script>\n document.getElementById('format').addEventListener('click', () => {\n const input = document.getElementById('input').value;\n const output = JSON.stringify(JSON.parse(input), null, 2);\n document.getElementById('output').textContent = output;\n });\n </script>\n</body>\n</html>\n
\n\nNo build tools. No npm. No webpack. Just HTML, CSS, and vanilla JavaScript.\n\n### The Hard Part: Edge Cases\n\nThe actual challenge is not architecture -- it is handling every edge case your users will hit:\n\n1. JSON Formatter: Handle trailing commas, single quotes, comments in "JSON-like" input\n2. CSV Converter: Deal with newlines inside quoted fields, different delimiters (comma, tab, semicolon)\n3. Image Converter: Browser limitations on format support, memory limits for large images\n4. Markdown Editor: WeChat's rich text has specific restrictions (no style tags, limited HTML)\n\n### Performance at Scale\n\nWith 33+ tools on one site, performance matters:\n\n- Lazy loading: Tools load only when clicked, not on page load\n- No frameworks: React/Vue add 40KB+ for a simple formatter -- unnecessary\n- Minimal DOM manipulation: Direct textContent and classList instead of innerHTML\n- Web Workers for heavy computation: Hash generation and image processing run off the main thread\n\n## What Users Actually Care About\n\nAfter launching, I tracked which tools got the most use:\n\n1. WeChat Markdown Editor (40% of traffic) -- Chinese developers writing WeChat articles\n2. JSON Formatter (25%) -- the universal developer need\n3. Image Format Converter (15%) -- designers and developers converting assets\n4. CSV/JSON Converters (10%) -- data processing workflows\n5. Everything else (10%) -- the long tail\n\nThe surprise? The WeChat Markdown Editor dominates. It solves a very specific pain point: WeChat's article editor does not support Markdown, but everyone writes in Markdown. Our tool converts Markdown to WeChat-compatible HTML with one click.\n\n## Privacy as a Feature, Not a Buzzword\n\nMost "online formatters" send your code/data to their servers. You can verify this yourself:\n\n1. Open any online JSON formatter\n2. Open browser DevTools, Network tab\n3. Paste some JSON and click Format\n4. Watch the POST request fly off to their server\n\nWith tools.pixiaoli.cn, there are zero XHR/fetch requests when you use a tool. Everything happens in the browser's JavaScript engine.\n\nThis matters most for:\n- API keys in config files\n- Personal data in CSV files\n- Proprietary code being formatted\n- Sensitive text being encoded\n\n## Try It\n\nThe site is at tools.pixiaoli.cn. No signup, no ads, no tracking. Just tools.\n\nIf you are a developer who has ever hesitated before pasting code into a random online formatter -- this is for you.\n\n---\n\n*Built with vanilla HTML/CSS/JS. No frameworks, no servers, no data collection. Open source contributions welcome.*
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)