betich's tools

A small workshop kept in public — https://tools.betich.me

Two tools so far, both of which do their real work in the browser:

• squoosh — compress and convert images. The webp, avif, jpeg and png encoders run as wasm in a worker pool; nothing is uploaded.
• mail merge — a base image, text layers, and a spreadsheet. One image comes out per row, with Google Fonts or an uploaded face, gradients, strokes, drop shadows and inline colour spans.

The server is optional. It adds saving, share links, a font catalogue and batch rendering; with it down, both tools still work and the status dot in the top bar says so.

Layout

shared/    the document model, the merge engine, and the canvas renderer
client/    react + vite + tailwind v4, deployed to cloudflare pages
server/    bun + elysia + sqlite, behind a cloudflare tunnel

shared/src/render.ts is the heart of it: one Canvas2D renderer, typed structurally so the identical code runs against the browser's CanvasRenderingContext2D and the server's @napi-rs/canvas. The preview and the exported file cannot drift, because they are produced by the same function.

Running it

bun install
bun run dev            # client on :5173, server on :8787

The client proxies /api to the server in dev. In production they are separate origins and talk over CORS.

bun run typecheck      # all three packages
bun run build          # client bundle

Deploying

Client → Cloudflare Pages, project betich-tools, custom domain tools.betich.me.

cd client && bun run deploy

client/.env.production points the bundle at the API. Note that Cloudflare's universal SSL only covers one level of subdomain, which is why the API is tools-api.betich.me and not api.tools.betich.me.

Server → Docker Compose on the box, reached through its own Cloudflare Tunnel.

cp .env.example .env
docker compose up -d --build

The tunnel is dedicated to this stack (deploy/tunnel.yml + deploy/tunnel-credentials.json, created once with cloudflared tunnel create tools) so restarting it never disturbs anything else sharing the machine. SQLite, uploaded assets and cached font files live in the tools-data volume.

GOOGLE_FONTS_API_KEY is optional: without it the font picker falls back to a curated list, and the server still resolves any family it is asked for through the keyless CSS2 endpoint.

API

route
GET /api/health	liveness, plus the project count
GET /api/tools	the tool registry the launchpad reads
GET /api/fonts	Google Fonts catalogue, cached
GET /api/fonts/:family/:variant	TTF proxy
POST /api/assets	upload a base image or a font face
`GET	POST
POST /api/projects/:id/share	mint or lock a share link
GET /api/share/:slug	open a shared merge (x-share-password if locked)
POST /api/render	render one row to PNG
POST /api/render/batch	render every row, returns a ZIP

Interactive docs at /api/docs.

Seeding a collection

server/scripts/seed-mentor-cards.ts builds a real merge end to end — parsing a CSV, deriving fields, uploading the artwork, creating the project and locking a share link. It is worth reading as the worked example of the document model.

bun run scripts/seed-mentor-cards.ts --api https://tools-api.betich.me --password <password>

Design

See DESIGN.md. The visual world follows track.betich.me: a near-black indigo ground, lavender ink at four alpha steps, uppercase tracked Roboto Mono, hairlines instead of shadows, and one bloom of light.

---

made with <3 by betich.me