UtilsLab
49 single-purpose calculators and tools across five categories, driven by one declarative registry and prerendered to static HTML that runs entirely in the browser.
The problem
Everyday users and developers want quick, single-purpose utilities without accounts, ads, or sending data to a server. UtilsLab is a free collection of 49 tools — financial, health, math, everyday, and developer — where everything runs client-side and every page is prerendered for instant loads.
Challenges
Scaling to 49 tools with a consistent UX
Hand-building 49 bespoke pages would inevitably drift apart in look and behavior and become a maintenance burden. Instead, every tool is described declaratively — its input fields plus a pure function that turns those inputs into typed result widgets (a stat, a table, a chart series) — and one generic shell renders them all uniformly. Adding a tool is a matter of describing it and dropping it into the catalog, not building another page.
Fully client-side privacy
The promise is no accounts, no servers, and nothing leaving your machine. Every calculation lives in pure, framework-independent logic modules that run in the browser; there is no backend to send data to, and the whole site is prerendered to static files, so there is nowhere for user input to go even in principle.
SEO for a static tool site
For people to discover these tools on Google, each one needs its own crawlable page with a unique title and description. The build enumerates every tool and emits a real, individually-titled HTML file per tool ahead of time, so search engines index 49 distinct landing pages rather than one JavaScript shell.
Heavy formatter libraries without bundle bloat
The developer formatters lean on genuinely large parsing libraries. If they all shipped up front, the whole site would load slowly for someone who only wanted a tip calculator. Each heavy library is instead loaded on demand, the first time its tool is actually opened, so the base download stays tiny and users only pay for what they use.
Implementation
Central tool registry
A single catalog collects every tool definition and exposes helpers for grouping by category, surfacing featured tools, and instant client-side search across titles, descriptions, and keywords. That one catalog is the source of truth that drives routing, navigation, search, and which pages get prerendered.
Declarative schema with escape hatches
A tool can be described three ways: a standard calculator (input fields plus a compute function), a reversible text transform (e.g. minify ↔ beautify), or — for the handful that don't fit a form, like the scientific calculator and the unit and color converters — a fully custom component. The common cases stay effortless without boxing in the exceptions.
Static prerendering
The entire site is prerendered ahead of time. The tool and category routes each derive their full list of pages from the central catalog, telling the build exactly what to generate, and category URLs are constrained to the known set of categories so invalid paths never render.
Shared UI and pure-logic testing
The shared shell seeds each tool's inputs from its declared defaults and recomputes results reactively as the user types, splitting the output into stat cards and table/chart blocks with reusable renderers. Because the calculation logic is pure and separated from the UI, it's covered by fast unit tests, with a separate browser test suite for the components.
Why this stack
- SvelteKit + Svelte 5
- File-based routing with per-page prerender control, plus fine-grained reactivity that makes live-recomputing calculators trivial to build.
- adapter-static
- Emits pure static HTML/JS with no server: instant loads, hosting that's cheap anywhere, and a client-only privacy guarantee that's structural rather than promised.
- Tailwind CSS 4
- One theme system gives all 49 tools consistent per-category theming without hand-written CSS per page.
- TypeScript
- Typed contracts for tools, fields, and results make the declarative catalog safe and self-documenting, so a new tool has to conform to compile.
- On-demand formatters
- Real parsing libraries give correct output for the developer tools, loaded lazily so they never weigh down the base bundle.
- Vitest + Playwright
- Fast unit tests for the pure calculation logic, plus a browser suite for the interactive components.
What it does
- Financial: mortgage, loan, compound interest, sales tax, ROI, savings goal — with amortization tables and charts
- Health & fitness: BMI, calorie, body fat, BMR, ideal weight, water intake, running pace
- Math: scientific calculator, percentage, fraction, quadratic solver, statistics
- Everyday: age, tip, discount, unit converter, color converter
- Developer: Base64/URL/HTML encode, JSON/CSS/JS/HTML/SQL/Markdown formatters, hash, JWT, UUID, timestamp, and more
- Instant client-side search, per-category theming, and reversible text tools with live recomputation