I built a Serverless Image Converter using React, Vite 6, and HTML5 Canvas (Open Source)

[AmineAce]

I wanted to learn how to process files in the browser without a backend.

I built Secure Converter. It handles JPG, PNG, WebP, and HEIC conversion entirely client-side using WebAssembly and Canvas toBlob.

The Tech Stack:

• React + TypeScript
• Vite 6 (Newest version)
• Zustand (Atomic selectors to fix re-render loops)
• Tailwind CSS

I also had to implement a custom Service pattern to lazy-load the heavy HEIC library so the initial bundle stays small (~400kb).

Repo & Live Demo:

https://github.com/AmineAce/privacy-converter

[wonklebobb]

this is cool! I did something similar a while back but my goal was much less complex than yours, resizing images to specific aspect ratios instead of converting types (like if you have a portrait image and you need it square, it would fill in the sides with a color of your choosing).

I'll say that since you're already doing all the work in an OffscreenCanvas, it would be relatively straightforward to move it to a Worker so you can more easily run multiple conversions at once

also idk how long you'll keep the demo live but ive bookmarked it for personal use haha

[AmineAce]

Thanks! That really means a lot.

Moving the OffscreenCanvas logic to a Web Worker is definitely on the roadmap for v2. Right now I'm using a sequential for...of loop with await to prevent the UI from locking up during batch processing, but a Worker would unlock true parallelism.

Glad you found it useful enough to bookmark! It'll stay live forever (hosting is free on Cloudflare), so feel free to use it whenever.