DevChest

A fast, privacy-first developer utility hub — 24 tools, zero backend, everything runs in your browser.

DevChest — Developer Utility Hub

Live Demo

I got tired of bouncing between a dozen random "online JSON formatter" sites every time I needed a quick dev tool — half of them are sketchy, most of them ship your data to some server you know nothing about. So I built DevChest: one page, 24 tools, no backend at all.

What is it?

DevChest is an open-source collection of everyday developer utilities — formatters, encoders, generators, and text tools — bundled into a single fast web app. There's no server. Nothing gets transmitted anywhere. Everything runs locally in your browser using standard Web APIs.

Key properties:

  • Private by default — your input never leaves your machine
  • No login, no tracking, no cookies
  • Instant — tools load on demand via code splitting, so the initial bundle stays small
  • Keyboard-friendly — ⌘K / Ctrl+K jumps straight to the sidebar search

Screenshots

JSON Formatter tool
JSON Formatter
Regex Tester tool
Regex Tester

The tools

Formatters & minifiers — JSON, SQL, HTML/CSS, XML, YAML, TOML, JS/TS (via Prettier), Markdown, CSV, GraphQL, INI, Dockerfile (with lint), Nginx config, HTTP headers, and a structured log formatter for pino/winston/bunyan/logrus.

Encoders & decoders — Base64 (with drag-and-drop image → Data URL), URL encoding, and a JWT decoder that breaks down header, payload, signature, and expiration.

Regex & text — a live regex tester with inline match highlighting, a case converter that spits out 8 formats at once, and a side-by-side diff checker.

Security & generators — MD5/SHA-1/SHA-256/SHA-512 hash generator, bulk UUID v4 generator, and a Unix ↔ ISO timestamp converter with a live ticker.

Tech stack

Built on React 19 with the React Compiler doing the memoization work for me — no manual useMemo/useCallback scattered everywhere. Vite 8 with Rolldown handles the build, TypeScript 6 keeps things honest, and styling runs through Tailwind CSS v4 via the @tailwindcss/vite plugin — no tailwind.config.js, just @theme {} blocks.

Business logic lives entirely in src/lib/ as pure, side-effect-free functions. Components stay thin — they manage local UI state and call into lib/. That split makes everything fast to test without touching the DOM.

All 24 tools are lazy-loaded through React.lazy + Suspense, so you only pay for the tool you're actually using.

Testing

678 tests, 0 failures across 45 test files — every tool component and every lib module is covered, run with Vitest 4 and Testing Library.

A few patterns that came out of writing all of this:

  • fireEvent.change instead of userEvent for inputs containing {, }, [ — otherwise userEvent tries to interpret them as key sequences
  • Clipboard mocks set up after userEvent.setup(), or userEvent clobbers them
  • waitFor with explicit timeouts for the async Prettier-backed tools (JS/TS Formatter, Markdown Formatter)
  • vi.useFakeTimers() + fireEvent.click for anything running setInterval (the timestamp converter)

Architecture

No backend, period. Everything runs through standard Web APIs — DOMParser, SubtleCrypto, crypto.randomUUID, Clipboard. Nothing your input touches ever leaves the client.

Deployed to GitHub Pages with a fully automated workflow — every push to main triggers a build and deploy via GitHub Actions.

GitHub: g4m3m4g/DevChest