<?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: Jenna Lee</title>
    <description>The latest articles on DEV Community by Jenna Lee (@jenna_lee_c0da101289d8ab3).</description>
    <link>https://dev.to/jenna_lee_c0da101289d8ab3</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%2F4172691%2Fc15524b7-249d-4f79-9067-b5ab0cbfa6dc.png</url>
      <title>DEV Community: Jenna Lee</title>
      <link>https://dev.to/jenna_lee_c0da101289d8ab3</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/jenna_lee_c0da101289d8ab3"/>
    <language>en</language>
    <item>
      <title>We built 39 file tools that run entirely in the browser. Here is what worked and what did not.</title>
      <dc:creator>Jenna Lee</dc:creator>
      <pubDate>Fri, 09 Oct 2026 07:01:55 +0000</pubDate>
      <link>https://dev.to/jenna_lee_c0da101289d8ab3/we-built-39-file-tools-that-run-entirely-in-the-browser-here-is-what-worked-and-what-did-not-3bio</link>
      <guid>https://dev.to/jenna_lee_c0da101289d8ab3/we-built-39-file-tools-that-run-entirely-in-the-browser-here-is-what-worked-and-what-did-not-3bio</guid>
      <description>&lt;p&gt;Most free online converters upload your file, process it on a server and send it back. We wanted the opposite: image, PDF, video, audio, archive and spreadsheet tools where the file never leaves the user's device. The result is &lt;a href="https://squishlytools.com" rel="noopener noreferrer"&gt;Squishly Tools&lt;/a&gt;, 39 tools that are all client side, static hosted and available in 40 languages.&lt;/p&gt;

&lt;p&gt;Here is what we learned building it.&lt;/p&gt;

&lt;h2&gt;
  
  
  The stack, per file type
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Images.&lt;/strong&gt; Canvas does most of the work: decode, resize, re-encode to JPEG, WebP or AVIF with &lt;code&gt;canvas.toBlob&lt;/code&gt;. HEIC needed a WASM decoder. The surprise was PNG. The browser's own PNG encoder is 32 bit and unoptimised, so "compressing" a PNG through Canvas often made it bigger. We switched to UPNG.js for palette quantisation, which is how services like TinyPNG get their savings.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;PDF.&lt;/strong&gt; PDF.js renders pages, pdf-lib edits them. Merging, splitting, rotating and filling forms are all pure pdf-lib. Compressing scanned PDFs works by re-encoding the embedded page images, because a scan is really just big photos inside a PDF.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Video and audio.&lt;/strong&gt; A WebAssembly build of FFmpeg handles compression, MOV to MP4, video to GIF and MP4 to MP3. It is the heaviest part of the site, so it only loads when a media tool is opened.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Archives.&lt;/strong&gt; JSZip for ZIP files, and the native &lt;code&gt;CompressionStream&lt;/code&gt; and &lt;code&gt;DecompressionStream&lt;/code&gt; APIs for gzip. Native streams are much faster than any JavaScript deflate.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Spreadsheets.&lt;/strong&gt; SheetJS for Excel, plus small hand written tools for CSV encoding repair, splitting files above Excel's 1,048,576 row limit, and removing duplicates.&lt;/p&gt;

&lt;h2&gt;
  
  
  The performance bug that looked like a hang
&lt;/h2&gt;

&lt;p&gt;A user reported that compressing a few large PNGs got stuck at 0%. It was not stuck, it was blocking the main thread. Colour quantisation over a 20 megapixel image ran for several seconds per file, the page froze, and the progress bar never repainted.&lt;/p&gt;

&lt;p&gt;Three fixes took it from about 36 seconds to about 14 seconds for three 20 MP images, with the page staying responsive:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Move the encoder into a Web Worker.&lt;/strong&gt; The worker is created from a blob URL and loads the library with &lt;code&gt;importScripts&lt;/code&gt;, so no extra build step is needed.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Build the palette from a sample.&lt;/strong&gt; The quantiser now builds its colour tree from roughly one million evenly spread pixels instead of all twenty million, then maps every pixel to it. Output quality was effectively identical.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Use native compression for the final step.&lt;/strong&gt; Instead of deflating the image data with pako in JavaScript, the worker filters the rows and hands them to &lt;code&gt;CompressionStream('deflate')&lt;/code&gt;, then writes the result back into the PNG's IDAT chunk with a fresh CRC.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Processing up to three files in parallel workers did the rest.&lt;/p&gt;

&lt;h2&gt;
  
  
  Things that are harder than they look
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Memory on phones.&lt;/strong&gt; Everything happens in RAM, so a 2 GB video that a laptop handles fine can crash a phone tab. We tell users honestly where the limits are rather than pretending there are none.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;"Is it really not uploading?"&lt;/strong&gt; Users are rightly sceptical. The simplest proof is offline mode: load a tool, turn the wifi off, and it still works. We put that test in the copy because it is more convincing than any privacy policy.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Localisation at scale.&lt;/strong&gt; 40 languages means about 3,500 static pages. The build is a single Node script that renders every tool page, guide and article per locale, writes hreflang tags, and generates the sitemap. Right to left languages get a flipped stylesheet generated from the main one.&lt;/p&gt;

&lt;h2&gt;
  
  
  Was it worth it?
&lt;/h2&gt;

&lt;p&gt;For users, yes: no account, no upload limits, no waiting in a queue, and private documents stay private. For us, static hosting means the whole site costs almost nothing to run, which is what lets it stay free.&lt;/p&gt;

&lt;p&gt;If you are building something similar, the short version is: Canvas and pdf-lib cover more than you expect, FFmpeg in WebAssembly is viable if you lazy load it, and anything slow belongs in a worker.&lt;/p&gt;

&lt;p&gt;You can try the tools at &lt;a href="https://squishlytools.com" rel="noopener noreferrer"&gt;squishlytools.com&lt;/a&gt;. Questions about any of the above are welcome in the comments.&lt;/p&gt;

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