3 min read

Tools

vitetanstack-startreacttypescripttailwindcssreact-ariavite-pwa

Overview 🔗

tools.sznm.dev is a unified web application for browser-based utilities. It brings tools that were previously split across separate projects into one Vite and React app with shared UI and a consistent navigation model.

The current catalog includes tools for:

  • WhatsApp links, image compression, user-agent inspection, QR codes, and calendar links
  • JavaScript performance comparisons in a QuickJS-based sandbox
  • JSON, CSV, Base64, text-diff, case, color, timestamp, and UUID conversion
  • Password, hash, JWT, and regular-expression utilities

Why I Built This 🔗

I had several standalone utility apps that were each their own project. Maintaining them separately meant duplicated dependencies, inconsistent UI, and fragmented deployment pipelines. When I wanted to add another tool, the overhead of starting a new project was discouraging.

Consolidating them into one Vite and React app reduced that overhead. Tool routes, adapters, and shared components now live in one codebase, so new utilities can use the same navigation and UI primitives.

Key Features 🔗

Unified Directory 🔗

The catalog and command menu provide quick access to the available tools, with pinned tools for frequently used utilities.

Local Processing Where Practical 🔗

Many utilities process inputs in the browser, including image compression, QR generation, hashing, and benchmarking. The app also has PWA support for tools that do not require a network connection.

Shareable State 🔗

Several tools encode their inputs or settings in the URL so a configured state can be shared or restored later.

Worker-Backed Processing 🔗

The JavaScript performance comparator runs snippets in QuickJS through Web Workers. Other tools use worker deadlines or background processing for operations that could otherwise block the tab.

Build Notes 🔗

Consistent Experience 🔗

All utilities share one Vite and React app, common navigation, and React Aria-based UI primitives, so the interaction model stays familiar from tool to tool.

Safe Processing 🔗

Many utilities process inputs locally in the browser. Longer-running operations use Web Workers where they need isolation or protection from blocking the page.