The Moment I Realized the Problem
A few months ago, I was debugging a production issue at midnight. I had a large JSON config file that was not parsing correctly. I did what every developer does — I opened the first Google result for "json formatter online" and pasted my config.
Then it hit me. That config contained database connection strings, API keys, and internal service URLs. I opened DevTools and checked the Network tab.
Sure enough: a POST request carrying my entire input to the site's server. My production credentials had just traveled across the internet to a server I knew nothing about.
I checked three more popular formatting sites. Same pattern. Every one of them sent the input to their backend for processing.
This Is Not a Theoretical Risk
Think about what developers paste into online tools on a daily basis:
- JSON files containing API keys, database credentials, and service configurations
- Base64 strings that encode authentication tokens and binary data
- SQL queries revealing table names, column structures, and business logic
- JWTs containing user identities, roles, and session data
- Regex patterns tested against real production data
- Code diffs showing proprietary source code changes
The leading online developer tool sites handle tens of millions of visits per month. That is an enormous volume of sensitive developer data flowing through third-party servers every day.
And here is the thing: none of these operations require a server. JSON formatting, Base64 encoding, URL encoding, regex matching, text diffing, JWT decoding, SQL formatting, hash generation — all of these can be done entirely in the browser with JavaScript.
So I Built CodeNeat
CodeNeat is a set of 8 developer tools where every operation runs 100% in your browser. No data is ever sent to any server for processing.
The 8 Tools
1. JSON Formatter & Viewer
Format, validate, minify, and explore JSON with syntax highlighting and interactive tree view.
2. Base64 Encode/Decode
Encode and decode Base64 strings. Instant results with zero server round-trip.
3. URL Encode/Decode
Full Unicode support for URL encoding and decoding.
4. Regex Tester
Real-time matching with capture groups and flag controls.
5. Diff Checker
Side-by-side text comparison with line-level highlighting.
6. JWT Decoder
Decode and inspect JWTs — header, payload, signature, expiration.
7. SQL Formatter
Multi-dialect SQL formatting. Your queries never leave the browser.
8. Hash Generator
MD5, SHA-1, SHA-256, SHA-512. All computation via Web Crypto API.
How It Works
Each tool is a pure TypeScript function in lib/tools/:
// lib/tools/json.ts
export function formatJson(input: string, indent: number = 2): string {
const parsed = JSON.parse(input);
return JSON.stringify(parsed, null, indent);
}
These functions are imported directly into React client components. No fetch(). No XMLHttpRequest. No server endpoint.
How to Verify
Method 1: DevTools
Open any tool on codeneat.dev, open DevTools Network tab, filter by Fetch/XHR, use the tool. Zero processing requests.
Method 2: Offline
Load any tool, disconnect from the internet, use the tool. It works because the processing never needed a server.
Method 3: Source Code
Open source: github.com/Ahnhyeongkyu/codeneat. Search for fetch( in lib/tools/. Zero results.
The Stack
- Framework: Next.js 16 with App Router
- Language: TypeScript
- Styling: Tailwind CSS v4 + shadcn/ui
- Deployment: Vercel
- License: MIT
What Is Next
A Chrome extension that brings these tools into the browser toolbar. The core logic ports directly since it is pure functions.
Try It
codeneat.dev — free, no account required.
If useful: Star on GitHub to help others discover it.
Your code should stay yours. That is not a feature — it should be the default.
Top comments (0)