Toolbox

A small set of personal frontend tools — everything runs in the browser, no backend.

Live1: https://toolbox.seansun.xyz Live2: https://toolbox.seansun.net

Tools

• JSON — format / minify / validate
• JWT — decode, sign, verify (planned)
• Media — clip & concat audio/video via ffmpeg.wasm, all client-side (planned)

Tech stack

• Vite 8 + React 19 + TypeScript
• Tailwind CSS v4 + shadcn/ui (new-york style, zinc palette)
• react-router v7 (BrowserRouter)
• pnpm 10, Node 22

Develop

pnpm install
pnpm dev          # http://localhost:5173
pnpm typecheck    # tsc -b --noEmit
pnpm lint         # eslint .
pnpm build        # tsc -b && vite build → dist/
pnpm preview      # serve dist/ at http://localhost:4173

The dev server sets Cross-Origin-Opener-Policy: same-origin and Cross-Origin-Embedder-Policy: require-corp so ffmpeg.wasm (which needs SharedArrayBuffer) works in dev.

Adding a new tool

1. Create the page component at src/pages/<Name>.tsx.
2. Register the route in src/app/router.tsx.
3. Add an entry in src/lib/tools.ts — that drives the sidebar nav and home card grid.

License

MIT