Toolshed

Developer tools that run entirely in your browser. No account, no upload, no server round-trip — every tool is plain client-side JavaScript, so the data you paste never leaves the tab.

Tools

Tool	Path	What it does
Format converter	/	Convert and format JSON, XML, CSV, YAML and TOML, with automatic format detection
JSON to types	/json-to-typescript	Generate TypeScript, Zod, Go, Python, Rust or a JSON Schema from a sample
cURL to code	/curl-to-code	Turn a cURL command into fetch, axios, Python, Go or PHP
Diff	/diff	Compare two documents by their data, not their text
JSONPath	/jsonpath	Query JSON and see where each match came from
Regex tester	/regex	Match, replace and read a plain-English breakdown of a pattern
SQL formatter	/sql	Format or minify SQL across ten dialects
Cron parser	/cron	Describe a schedule and list its next runs in any time zone
Timestamp	/timestamp	Convert Unix time to and from dates across time zones
Color converter	/color	HEX, RGB, HSL, OKLCH, LAB, plus WCAG contrast
Base64	/base64	Encode and decode Base64, including the URL-safe alphabet
Escape / unescape	/escape	JSON strings, HTML entities and percent encoding
Hash	/hash	MD5, SHA-1, SHA-256, SHA-384 and SHA-512
UUID generator	/uuid	UUID v4 and v7, ULID and Nano ID
JWT decoder	/jwt-decoder	Inspect a token's header, payload and expiry

Development

bun install
bun run dev        # http://localhost:3000

Script	Purpose
bun run dev	Dev server
bun run build	Production build into dist/, then the service worker
bun run check	Typecheck, lint and tests
bun run deploy	Build and deploy to Cloudflare Workers
bun run test	Unit tests
bun run lint	ESLint
bun run typecheck	tsc --noEmit

Deployment

Runs on Cloudflare Workers via @cloudflare/vite-plugin.

bun run deploy

Every route is prerendered to static HTML at build time and served as a static asset, so the Worker is off the critical path entirely. sitemap.xml is generated from the same list.

Set VITE_SITE_URL at build time to control the absolute URLs used in canonical tags and the sitemap.

Offline

scripts/build-sw.ts generates a Workbox service worker after the build. It cannot be a Vite plugin: prerendering writes its HTML during closeBundle, after any plugin's generate hook, so an in-build plugin would emit a precache manifest containing the JavaScript but none of the pages.

Architecture

src/
  components/
    editor/     CodeMirror wrapper, theme, language loaders, pane shell
    layout/     App shell, header, command palette, settings
    ui/         shadcn/ui primitives
  lib/
    tools/      Tool registry (metadata, routing, code-splitting)
    formatters  Parsers and serializers for the five data formats
  routes/
    index.tsx   The converter, served at /
    $slug.tsx   Resolves every other tool from the registry
  tools/        One component per tool, lazily imported

Adding a tool

1. Write the component in src/tools/<name>.tsx with a default export.
2. Add an entry to TOOLS in src/lib/tools/registry.ts.
3. Add its path to TOOL_PATHS in src/lib/tools/paths.ts.

The registry drives routing, per-page metadata, the command palette and code-splitting, so there is no route file to write. paths.ts is read by vite.config.ts for prerendering and the sitemap, and is kept separate because the registry imports React components that have no business in a build config. A test asserts the two lists match, so forgetting step 3 fails the build rather than silently shipping an unindexed page.

Set persist: false for anything that handles credentials; it keeps the tool's input out of localStorage.

Editors

All editing and all syntax-highlighted output goes through components/editor/code-editor.tsx, a CodeMirror 6 wrapper. Options that change at runtime (language, wrapping, line numbers, read-only, diagnostics) are held in compartments so they reconfigure in place rather than recreating the view.

Syntax colours are CSS variables (--cm-* in styles.css) rather than a JavaScript theme object, so toggling dark mode re-themes every open editor with no JavaScript involved.

CodeMirror needs a DOM and therefore does not server-render; pages SSR their shell and the editor mounts on the client.