<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Mehdi Laalali2000</title>
    <description>The latest articles on DEV Community by Mehdi Laalali2000 (@mehdi_laalali2000_da46ad0).</description>
    <link>https://dev.to/mehdi_laalali2000_da46ad0</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1557126%2F95ace1c2-2886-4fb3-9d12-604fae971d5b.png</url>
      <title>DEV Community: Mehdi Laalali2000</title>
      <link>https://dev.to/mehdi_laalali2000_da46ad0</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/mehdi_laalali2000_da46ad0"/>
    <language>en</language>
    <item>
      <title>I built a PDF &amp; image toolbox that never uploads your files — 100% client-side</title>
      <dc:creator>Mehdi Laalali2000</dc:creator>
      <pubDate>Mon, 21 Sep 2026 15:54:07 +0000</pubDate>
      <link>https://dev.to/mehdi_laalali2000_da46ad0/i-built-a-pdf-image-toolbox-that-never-uploads-your-files-100-client-side-4mma</link>
      <guid>https://dev.to/mehdi_laalali2000_da46ad0/i-built-a-pdf-image-toolbox-that-never-uploads-your-files-100-client-side-4mma</guid>
      <description>&lt;p&gt;Every "free online tool" works the same way: you upload your file to a server, hope for the best, and get a result back. I got tired of that model — both as a user (why does a PDF compressor need my documents?) and as a developer (why pay for servers that just shuffle files?).&lt;/p&gt;

&lt;p&gt;So I built &lt;strong&gt;ToolHex&lt;/strong&gt; — a set of tools (image compressor/converter, PDF merge/split/compress, JPG→PDF, text tools, calculators) where the browser does everything. Your files never leave your device. There's no backend at all.&lt;/p&gt;

&lt;p&gt;Here's how the interesting parts work.&lt;/p&gt;

&lt;h2&gt;
  
  
  The browser is a pretty good runtime
&lt;/h2&gt;

&lt;p&gt;Most people don't realize how capable the web platform got:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Canvas API: decode any image, re-encode at any quality&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;bitmap&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;createImageBitmap&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;canvas&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getContext&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;2d&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;drawImage&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;bitmap&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;w&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;h&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;canvas&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;toBlob&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;blob&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;saveIt&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;blob&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;image/jpeg&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mf"&gt;0.8&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That's the core of the image compressor. No library needed for the happy path — the browser IS the image library.&lt;/p&gt;

&lt;h2&gt;
  
  
  mozjpeg in WASM for real JPEG quality
&lt;/h2&gt;

&lt;p&gt;The canvas encoder is fine, but mozjpeg produces ~20% smaller JPEGs at the same quality. It's a C library — running it in the browser means WebAssembly. I vendored the &lt;code&gt;@jsquash/jpeg&lt;/code&gt; codec and call it lazily:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;default&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;encode&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="k"&gt;import&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/assets/vendor/jsquash-jpeg/encode.js&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;buf&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;encode&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;imageData&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;quality&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;80&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Self-hosted, ~290 KB of wasm, cached after first use.&lt;/p&gt;

&lt;h2&gt;
  
  
  PNG is lossless — until you quantize the palette
&lt;/h2&gt;

&lt;p&gt;This one surprised me while building. "PNG compression" tools like TinyPNG don't re-encode losslessly — they do &lt;strong&gt;lossy palette quantization&lt;/strong&gt; (pngquant-style): reduce a photo to ≤256 colors with dithering, then write an indexed-color PNG. The file stays a real PNG, transparency intact, 60–85% smaller.&lt;/p&gt;

&lt;p&gt;I did it with UPNG.js + a Floyd–Steinberg dithering pass against the computed palette (with a 5-bit/channel lookup table so nearest-color search stays fast):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;q&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;UPNG&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;quantize&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="nx"&gt;rgba&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;buffer&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="nx"&gt;colors&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// extract palette -&amp;gt; dither each pixel against it -&amp;gt;&lt;/span&gt;
&lt;span class="c1"&gt;// UPNG.encode([dithered], w, h, colors) =&amp;gt; indexed PNG&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Banding without dithering is ugly; with error diffusion a 256-color photo looks nearly identical to the original. Fun rabbit hole.&lt;/p&gt;

&lt;h2&gt;
  
  
  Ghostscript. In the browser. In WASM.
&lt;/h2&gt;

&lt;p&gt;The PDF compressor is the one that felt impossible: real PDF compression needs a real PDF engine. There's a WASM build of Ghostscript (&lt;code&gt;@okathira/ghostpdl-wasm&lt;/code&gt;, ~15 MB — lazy-loaded, cached) with an in-memory filesystem and a &lt;code&gt;callMain&lt;/code&gt; API. Which means I can literally run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;Module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;FS&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;writeFile&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;in.pdf&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;bytes&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;Module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;callMain&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;
  &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;-sDEVICE=pdfwrite&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;-dPDFSETTINGS=/ebook&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;-dNOPAUSE&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;-dQUIET&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;-dBATCH&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;-sOutputFile=out.pdf&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;in.pdf&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="p"&gt;]);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;compressed&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;FS&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;readFile&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;out.pdf&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;encoding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;binary&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The same Ghostscript command that powers server-side tools — except the "server" is the user's own CPU. In benchmarks on my machine, a 19.6 MB scan-heavy PDF compresses to 0.15 MB in ~1.7 seconds.&lt;/p&gt;

&lt;p&gt;(One heads-up if you copy this: Ghostscript is AGPL v3. Conveying the binary means shipping the license + source link, which I do on a licenses page. Not legal advice, but read the license before embedding it anywhere commercial.)&lt;/p&gt;

&lt;h2&gt;
  
  
  PDF surgery with pdf-lib
&lt;/h2&gt;

&lt;p&gt;Merge, split, rotate, delete pages, JPG→PDF — all &lt;a href="https://github.com/Hopding/pdf-lib" rel="noopener noreferrer"&gt;pdf-lib&lt;/a&gt;. Its mental model is simple: load documents into memory, copy page objects between them, save. Lossless by construction since pages are never re-rendered:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;out&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;PDFLib&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;PDFDocument&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;create&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pages&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;out&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;copyPages&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getPageIndices&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="nx"&gt;pages&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;out&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addPage&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  The infra is one nginx file
&lt;/h2&gt;

&lt;p&gt;Every tool lives on its own subdomain (&lt;code&gt;compress.toolhex.online&lt;/code&gt;, &lt;code&gt;pdf.toolhex.online&lt;/code&gt;…), which keeps each site focused and SEO-clean. One regex server block routes all of them:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight nginx"&gt;&lt;code&gt;&lt;span class="k"&gt;server_name&lt;/span&gt; &lt;span class="p"&gt;~&lt;/span&gt;&lt;span class="sr"&gt;^(?&amp;lt;sub&amp;gt;[a-z0-9-]+)\.toolhex\.online$;&lt;/span&gt;
&lt;span class="s"&gt;root&lt;/span&gt; &lt;span class="n"&gt;/var/www/toolhex/&lt;/span&gt;&lt;span class="nv"&gt;$sub&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;No &lt;code&gt;if&lt;/code&gt; blocks, unknown subdomains 404 naturally because their docroot doesn't exist. Wildcard cert from Let's Encrypt via DNS-01 (HTTP-01 can't do wildcards). Deploys are rsync + &lt;code&gt;nginx -t &amp;amp;&amp;amp; systemctl reload nginx&lt;/code&gt; from a tiny script.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I learned
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;"No upload" is a feature users understand instantly.&lt;/strong&gt; It's on every page and people genuinely care.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;WASM quietly changed what "client-side" means.&lt;/strong&gt; mozjpeg and Ghostscript in a browser tab would have sounded absurd a few years ago.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Client-side ≠ simple.&lt;/strong&gt; Adaptively stepping quality down until a file actually shrinks, palette quantization, PDF object copying — the edge cases are real.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you want to see it: &lt;a href="https://toolhex.online/" rel="noopener noreferrer"&gt;toolhex.online&lt;/a&gt; — everything's free, no signup, and (obviously) nothing to upload. The image compressor and PDF compressor are the two I'd start with.&lt;/p&gt;

&lt;p&gt;Happy to answer questions about the WASM integration or the nginx setup in the comments. And if you have an idea for a tool that belongs in this family, I'm building more.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>privacy</category>
      <category>showdev</category>
    </item>
  </channel>
</rss>
