<?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: NOCODE STUDIO</title>
    <description>The latest articles on DEV Community by NOCODE STUDIO (@nocode_studio).</description>
    <link>https://dev.to/nocode_studio</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.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3876737%2Fab7c21dd-871d-4e68-8bf7-3115245801b6.png</url>
      <title>DEV Community: NOCODE STUDIO</title>
      <link>https://dev.to/nocode_studio</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/nocode_studio"/>
    <language>en</language>
    <item>
      <title>I Was Tired of Uploading PDFs… So I Built My Own Tool</title>
      <dc:creator>NOCODE STUDIO</dc:creator>
      <pubDate>Sun, 19 Apr 2026 04:16:25 +0000</pubDate>
      <link>https://dev.to/nocode_studio/i-was-tired-of-uploading-pdfs-so-i-built-my-own-tool-6jk</link>
      <guid>https://dev.to/nocode_studio/i-was-tired-of-uploading-pdfs-so-i-built-my-own-tool-6jk</guid>
      <description>&lt;p&gt;I didn't start by writing code. I started with a simple frustration. Every time I needed to split a PDF, the process felt wrong.&lt;/p&gt;

&lt;p&gt;Upload file → wait → download → hope nothing breaks.&lt;/p&gt;

&lt;p&gt;And the bigger issue:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Why am I uploading my files at all?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That didn't sit right with me, especially when dealing with sensitive files. Some of these PDFs contain sensitive data. Invoices, contracts, internal docs…&lt;/p&gt;

&lt;p&gt;Things that shouldn’t leave my machine.&lt;/p&gt;

&lt;p&gt;So I wanted to see if I could build a tool that runs entirely in the browser, keeping data private and the UX instantaneous.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The Breaking Point&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;One day I was working on a small SaaS idea that needed basic PDF processing.&lt;/p&gt;

&lt;p&gt;Nothing fancy. Just:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Split pages&lt;/li&gt;
&lt;li&gt;Extract a few sections&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The first hurdle, how do you manipulate heavy PDF structures in a client-side environment? After testing a few libraries, I landed on pdf-lib.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;import { PDFDocument } from "pdf-lib";&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why this choice?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Zero Backend:&lt;/strong&gt; It runs natively in the browser environment.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Lightweight:&lt;/strong&gt; Perfect for MVPs and fast-loading web apps.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Simple API:&lt;/strong&gt; The mental model for copying and merging pages is very intuitive.&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;Defining the Input Logic&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I wanted a UI that felt familiar to anyone who has ever hit "Print." Instead of complex checkboxes, I opted for a simple string input: 1, 2, 5-8.&lt;/p&gt;

&lt;p&gt;The goal was to convert that string into a clean array of indices:&lt;/p&gt;

&lt;p&gt;"1, 2, 5-8" → &lt;a href="https://dev.toconverting%20to%200-based%20indices%20for%20the%20code"&gt;0, 1, 4, 5, 6, 7&lt;/a&gt;.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Parsing Page Ranges&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I wrote a small utility function to handle the string-to-array logic, ensuring it could handle both individual pages and ranges while filtering out duplicates via a &lt;strong&gt;Set&lt;/strong&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;parsePageRanges&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&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;pages&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Set&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

  &lt;span class="nx"&gt;input&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;split&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;,&lt;/span&gt;&lt;span class="dl"&gt;"&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;part&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;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;trimmed&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;part&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;trim&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;trimmed&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;includes&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;-&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="kd"&gt;let&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;end&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;trimmed&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;split&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;-&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;Number&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;start&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;end&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;end&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;end&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

      &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;=&lt;/span&gt; &lt;span class="nx"&gt;end&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&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;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; 
      &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&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;num&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Number&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;trimmed&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nf"&gt;isNaN&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;num&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;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;num&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="k"&gt;return&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="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Loading the PDF&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Next, we need to get the file into a format pdf-lib understands. Using &lt;strong&gt;arrayBuffer()&lt;/strong&gt; allows us to handle the file locally without any multi-part form uploads.&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;bytes&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;file&lt;/span&gt; &lt;span class="k"&gt;instanceof&lt;/span&gt; &lt;span class="nx"&gt;File&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;arrayBuffer&lt;/span&gt;&lt;span class="p"&gt;()&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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pdf&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;PDFDocument&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;load&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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;totalPages&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;pdf&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getPageCount&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Extracting and Exporting&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This is where the "magic" happens. We create a blank PDF document, copy the selected pages from the source, and save it.&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;indices&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;parsePageRanges&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;input&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;newPdf&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;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="c1"&gt;// Copy the selected pages from the source PDF&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;copiedPages&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;newPdf&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;pdf&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;indices&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Add them to the new document&lt;/span&gt;
&lt;span class="nx"&gt;copiedPages&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="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;newPdf&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;span class="c1"&gt;// Save and return the bytes&lt;/span&gt;
&lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;newPdf&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;save&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Pros&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Building this small utility changed how I think about SaaS architecture.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Privacy is a Feature:&lt;/strong&gt;&lt;br&gt;
Users love knowing their files never touch a server.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Architecture over Infrastructure:&lt;/strong&gt;&lt;br&gt;
Sometimes the best "system" is the one you don't build. By avoiding a backend, I avoided costs, security risks, and scaling issues.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Browser Power:&lt;/strong&gt;&lt;br&gt;
Modern Web APIs and libraries are significantly more capable of heavy lifting than we often give them credit for.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Cons&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Because the processing happens on the user's machine, it may tipically:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Memory Limits:&lt;/strong&gt; Extremely large PDFs (think 500MB+) might crash a mobile browser.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Client Performance:&lt;/strong&gt; A low-end device will process the split slower than a dedicated server.&lt;/p&gt;

&lt;p&gt;However, for 95% of real-world use cases, the speed and privacy gains far outweigh these edge cases.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Result&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This has become a &lt;a href="https://github.com/nocoderoom/pdf-splitter-js" rel="noopener noreferrer"&gt;PDF Splitter&lt;/a&gt; utility in my development.&lt;/p&gt;

&lt;p&gt;If you're building a full-scale SaaS, an internal dashboard, or a quick MVP, remember: You might not need a backend for that.&lt;/p&gt;

&lt;p&gt;Next time you're designing a feature, don't ask "How do I build this system?" Ask "Can I avoid building the system entirely?"&lt;/p&gt;




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