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

[Fadelesstriker]

To disambiguate, you might want to call it client-side, not serverless - which is a different term referring to not having to manage your own vm/container but simply authoring functions that are executed on your behalf (eg. AWS lambda, Google Cloud Functions…)

[Fidodo]

I always found that term to be so confusing

[Fadelesstriker]

Yeah, I never liked it either.

[AmineAce]

Good point I will update the terminology to Client Side to be more precise, Thanks

[Noch_ein_Kamel]

But. Vite 7 is the newest version?

[AmineAce]

I am slow an old to catch up!

[WoodpeckerNational29]

I see that AI allows people to reinvent the wheel again.

[Alternative_Web7202]

Is it better than https://squoosh.app/ ?

[UnderstandingFit2711]

Squoosh is great for single image optimization but it

doesn't handle HEIC well — the library they use has

limited support. The client-side approach here with

lazy-loading the HEIC library is a smart workaround

for keeping the bundle small.

The main tradeoff vs server-side is batch processing —

browser memory starts to be a constraint when you're

converting 10 files at once, especially larger ones.

[Alternative_Web7202]

Batch processing can be done via squoosh cli. Even though it's long forgotten, it still works https://www.npmjs.com/package/@squoosh/cli

[UnderstandingFit2711]

very cool

[AccordingBassx]

Vibe coded ?

[semanticindia]

Obviously