Building Privacy-First Browser Tools with WebAssembly

#Why Privacy Matters in Developer Tools

In an era where most online tools require uploading your files to remote servers, we asked a simple question: why can't these tools run entirely in your browser?

That question led us to build Ichiban Tools — a collection of developer utilities that process images, videos, PDFs, and more, all without ever leaving your device.

#The Architecture

Our stack is built on a few key technologies:

#WebAssembly for Heavy Lifting

We use FFmpeg compiled to WebAssembly for video and audio processing. This means format conversions happen at near-native speed, entirely in the browser.

import { FFmpeg } from '@ffmpeg/ffmpeg';

const ffmpeg = new FFmpeg();
await ffmpeg.load();
await ffmpeg.writeFile('input.mp4', inputData);
await ffmpeg.exec(['-i', 'input.mp4', '-vf', 'scale=1280:-1', 'output.webm']);
const data = await ffmpeg.readFile('output.webm');

#Client-Side PDF Manipulation

For our PDF editor, we leverage pdf-lib — a pure JavaScript library that can create and modify PDFs without any server interaction:

import { PDFDocument } from 'pdf-lib';

const pdfDoc = await PDFDocument.load(existingPdfBytes);
const pages = pdfDoc.getPages();
const firstPage = pages[0];

firstPage.drawText('Hello, World!', {
  x: 50,
  y: firstPage.getHeight() - 100,
  size: 30,
});

#On-Device AI with Transformers.js

Our summarizer and translator tools use Hugging Face Transformers.js, running AI models directly in the browser via WebAssembly and WebGPU:

import { pipeline } from '@huggingface/transformers';

const summarizer = await pipeline(
  'summarization', 
  'Xenova/distilbart-cnn-12-6'
);
const result = await summarizer(longText, {
  max_length: 130,
  min_length: 30,
});

#Performance Considerations

Running everything client-side comes with trade-offs:

Key insight: For most developer tools, the convenience of instant, private processing outweighs the raw speed advantage of server-side processing.

#What's Next

We're continuing to expand the toolkit with:

• Markdown editor with live preview
• Color palette generator
• Base64 encoder/decoder
• RegEx tester with visual matching

All of these will follow our core principle: your data never leaves your browser.

Have ideas for new tools? We'd love to hear from you! Open an issue on our GitHub repository.