How I Shipped 91+ Privacy-First Utilities with $0 Server Cost: The Architecture of OmniUtil.pro

m.m.robiul islam — Sun, 12 Jul 2026 20:37:20 +0000

Every time you want to format a piece of JSON, debug a JWT token, compress a PDF, or erase a photo's background, you make a compromise. You upload your proprietary files or sensitive API keys to a random server, hoping they won't log it.

As a developer, I asked myself: Can we build a hyper-scalable ecosystem of professional tools that run 100% in the browser, protect user privacy, and maintain absolute zero compulsory server costs?

The answer is OmniUtil.pro, which recently crossed version v3.66.0 with 91 production-ready tools live. In this post, I will break down the exact client-side architecture that makes this platform lightning-fast and entirely serverless.

🚀 The Architecture: Core Technical Pillars

Building 90+ separate interactive applications within a single Next.js codebase without causing compilation chaos or catastrophic bundle sizes required sticking strictly to a "local-first" philosophy.

1. Static Edge Core Stack

OmniUtil is powered by Next.js 16 (App Router), TypeScript, and Tailwind CSS v4[cite: 1]. The entire application is deployed statically to edge nodes[cite: 1]. The homepage acts as a lightweight, SEO-optimized marketing landing layer (/), while the interactive heavy lifting is deferred to the workspace at /dashboard. This division ensures sub-second Largest Contentful Paint (LCP) times.

2. Native Client-Side Cryptography (Web Crypto API)

Instead of importing heavy third-party NPM libraries that slow down standard bundle loads, our security tools—like the RSA Key Pair Generator and the AES-256 Text Vault—rely entirely on the browser's native C++ compiled SubtleCrypto engine.

For example, chunked files are streamed dynamically using standard Web APIs, ensuring that your data is processed instantly without a single byte leaking to an external server.

3. Heavy-Lifting via WASM Engines

When JavaScript limits performance, OmniUtil brings the desktop experience to the browser tab using WebAssembly (WASM)[cite: 1]:

ProStudio Screen Recorder: Captures HD streams at 1440p @ 60fps and processes timelines, crops, and multi-segment edits natively through a split browser audio-video layer combined with ffmpeg.wasm[cite: 1].
Big Data SQL Explorer: Provides a full local operational BI database dashboard using @duckdb/duckdb-wasm to parse and run analytical SQL loops over 150MB+ CSV or JSON datasets inside the user's tab[cite: 1].
AI Models: The Audio Transcriber and Background Remover execute Whisper and ONNX neural network tasks on-device using Transformers.js[cite: 1].

4. Interconnected Workflow Pipelines

Instead of flat, isolated utilities, OmniUtil tools pass raw binary memory fragments (Blob) or text structures through a shared React framework called TransientWorkspaceContext[cite: 1].

You can drop a photo, execute the AI background removal pipeline, pass it straight to the media compressor, stamp a watermark, and export—all without ever re-uploading the file[cite: 1].