I built 31 developer tools in a weekend — here's what I learned

chenghui wu — Sun, 19 Jul 2026 08:08:27 +0000

Every time I want to format a JSON blob, decode a JWT, or convert a Unix timestamp, I end up on a different random site — each covered in ads, popups, and "click here to install our extension" banners. Half of them upload my data to their server for no reason.

So this weekend I built DevKits — a single site with 31 developer tools that all run 100% in the browser. No uploads, no accounts, no tracking.

What's in it

Right now, 31 tools across 9 categories:

JSON: formatter, validator, JSONPath tester
Converters: JSON ↔ TypeScript / Go / YAML / CSV / XML
Encoding: Base64, URL, HTML entities, image → data URL
Security: JWT decoder, MD5/SHA-256/SHA-512, password generator
Text: regex tester, diff, case converter, word counter, Lorem Ipsum
Web: color converter, user-agent parser
Time: Unix timestamp, cron expression parser
AI: OpenAI/Claude/Gemini token counter
Formatting: SQL, XML, Markdown → HTML

Live at devkits.vip. Open source? Not yet, but the whole project is deployable to Vercel in ~2 minutes.

Why not just use `it-tools.tech` or `smallpdf` or …?

Fair question. Existing sites have some (or all) of these problems:

Bloat. Loading 500KB of JS to format 200 characters of JSON.
Ads. Layout shifts on every visit.
Privacy. Some upload your input to a backend to "process" it — a red flag when your input is a JWT or an API response.
Cluttered UX. "Please sign in to save your favorite tools." No thanks.

DevKits does the opposite:

Every First Load JS is under 130KB. Most pages are 105–115KB.
Zero ads, zero cookies, zero cross-site tracking.
Everything runs client-side. Even the MD5 implementation, the tokenizer, the cron parser — all pure functions in your browser.
Every tool page is a single URL you can bookmark.

Tech stack

Next.js 15 with the App Router
TypeScript (strict mode)
Tailwind CSS (with @tailwindcss/typography for the Markdown preview)
Vercel for hosting

I picked Next.js specifically because:

SSG is a first-class citizen. All 41 pages are pre-rendered at build time. No cold starts.
The metadata API is a joy. Per-page title, description, canonical, OpenGraph, and JSON-LD structured data — all just typed objects.
File-based routing scales beautifully. Adding a new tool is: (1) one entry in tools.ts, (2) one page.tsx, (3) one client component. The sitemap, homepage listing, and "related tools" links update automatically.

The tool registry pattern (my favorite part)

The whole site is driven by a single tools.ts config file:

export interface Tool {
  slug: string;
  title: string;
  shortName: string;
  description: string;
  category: ToolCategory;
  keywords: string[];
  faq: { question: string; answer: string }[];
}

export const tools: Tool[] = [
  {
    slug: "json-formatter",
    title: "JSON Formatter & Validator",
    shortName: "JSON Formatter",
    description: "Format, beautify, and validate JSON online. Free, fast, and 100% local...",
    category: "json",
    keywords: ["json formatter", "json beautifier", "json validator"],
    faq: [
      { question: "Is my data uploaded?", answer: "No..." },
      // ...
    ],
  },
  // 30 more tools...
];

From this single array, four things are auto-generated:

sitemap.xml — every tool becomes a URL entry
Homepage listing — grouped by category
Per-page metadata — title / description / canonical / OG / Twitter card
JSON-LD structured data — SoftwareApplication + FAQPage schema for rich Google search results

The "related tools" section on each page is also just tools.filter(t => t.slug !== current.slug).slice(0, 6). So internal linking is automatic.

Adding a new tool takes about 20 minutes.

The token counter surprised me

The AI Token Counter (for GPT-4o / Claude / Gemini) was the trickiest. Real tokenization requires shipping ~1MB of tokenizer vocabulary. Way too heavy for a "