DEV Community

Remolinator
Remolinator

Posted on

How I built a Serverless PDF Editor with Vanilla JS (and $0 cloud bills)

We all have that moment. You need to merge two PDF contracts or compress a video file, and you search on Google. You find a tool, upload your file, and then... you wait.

And then you wonder: "Wait, did I just upload my tax return to a random server in a country I can't pronounce?"

That paranoia is exactly why I built DuneTools.

I wanted to challenge the status quo of heavy, server-dependent web apps. My goal was simple: build a suite of tools (PDF, Video, Image) that runs 100% in the browser. No uploads. No privacy risks. Just pure JavaScript.

Here is how I built it (and why I ditched React for this one).

1. The Architecture: Client-Side is King ๐Ÿ‘‘

Most PDF tools work like this:
User -> Upload -> Server processes (Python/PHP) -> Download

DuneTools works like this:
User -> Browser (WASM + JS) processes -> Done

By using libraries like pdf-lib and WebAssembly wrappers for FFMPEG, modern browsers are powerful enough to handle heavy media editing. This has two massive benefits:

  1. Privacy: The file never leaves the user's device.
  2. Cost: My server costs are flat. Whether I have 10 users or 10,000, I don't pay for CPU processing time.

2. Why Vanilla JS? (No React, No Vue) ๐Ÿฆ

I know, I know. It's 2025. Why aren't you using Next.js?

For a tool like this, performance is the feature. I didn't want to ship 200KB of hydration scripts just to render a "Merge PDF" button.

My "Hybrid" Build Workflow

Instead of a heavy JS framework, I use Python as a static site generator:

  1. I write my logic in plain Vanilla JS.
  2. I use Python + Jinja2 templates to generate the HTML pages for each tool (SEO is crucial here).
  3. The Python script compiles everything into a static folder ready for deployment.

The result?

  • Lighthouse Score: 100/100 ๐ŸŸข
  • Load Time: Instant.

3. The Deployment: Vercel (Zero Config) โ–ฒ

Since this is a client-side app with no backend database, I didn't want to manage servers, SSH keys, or Docker containers.

I chose Vercel for deployment. It fits perfectly with my "lazy developer" philosophy:

  1. Git Integration: I push my generated static files to GitHub, and Vercel detects the change and deploys automatically.
  2. Global CDN: My static assets (JS/WASM) are cached on the edge, making the tool load instantly from anywhere in the world.
  3. Cost: Free. Since I'm not using Serverless Functions for processing (remember, it's all client-side), I stay comfortably within the free tier limits.

Itโ€™s the ultimate "set it and forget it" setup.

4. The Result: DuneTools ๐Ÿœ๏ธ

The project is now live. It includes:

  • PDF Tools: Merge, Split, Compress.
  • Video: Converter, GIF maker.
  • Images: Compression, resizing.

Itโ€™s fast, itโ€™s free, and most importantly, itโ€™s private.

I'd love for you to roast my code or give me feedback on the UX.

๐Ÿ‘‰ Try it here: DuneTools.com

(P.S. If you are an Indie Hacker looking for a privacy-first alternative to iLovePDF, I built this for you!)

Top comments (1)

Collapse
 
remolinator profile image
Remolinator

"Thanks for reading! ๐Ÿ‘‹ I'm the creator, hanging around to answer any questions about the tech stack (Vanilla JS + WASM + Vercel) or the privacy architecture. Let me know what you think!"