Tools

A collection of small, self-contained developer tools built with React + TypeScript + Vite. Everything runs entirely in the browser — no backend, no data leaves your machine.

Tools included

Encoders

• Base64 — encode/decode with full UTF-8 support
• URL Encode/Decode — component (encodeURIComponent) or full-URL (encodeURI) modes
• JSON Formatter — pretty-print, minify, and validate
• JWT Decoder — decode header & payload (does not verify signatures)

Dev Utilities

• Regex Tester — live match highlighting, flags, and capture groups
• Diff Viewer — line-by-line comparison of two texts
• Markdown Preview — live GitHub-Flavored Markdown rendering
• QR Code Generator — encode text/URLs, download as PNG

Architecture

Tools are driven by a single registry at src/tools/registry.ts. Routes (src/main.tsx) and the home grid (src/pages/Home.tsx) are both generated from it, and each tool is lazy-loaded.

To add a tool: create a component under src/tools/<name>/, then append one entry to the tools array in registry.ts. No routing or navigation changes needed.

Local development

npm install
npm run dev        # start Vite dev server (http://localhost:5173)

Other scripts:

npm run build      # type-check + production build into dist/
npm run preview    # serve the production build locally
npm run typecheck  # type-check only

Docker

Multi-stage build: Vite builds the static site, then nginx serves it with an SPA routing fallback.

docker build -t tools .
docker run --rm -p 8080:80 tools

Then open http://localhost:8080.