The latest articles on DEV Community by diego diego (@diego_diego_3992068b374b4). https://dev.to/diego_diego_3992068b374b4 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%2F3829506%2F4b24096a-25fa-44bf-a074-b2ce3211d644.png https://dev.to/diego_diego_3992068b374b4 en diego diego Tue, 17 Mar 2026 13:13:53 +0000 https://dev.to/diego_diego_3992068b374b4/i-built-a-pdf-editor-and-realized-most-of-them-work-in-a-way-people-wouldnt-expect-641 https://dev.to/diego_diego_3992068b374b4/i-built-a-pdf-editor-and-realized-most-of-them-work-in-a-way-people-wouldnt-expect-641 <h1> I built a PDF editor… and realized most of them work in a way people wouldn’t expect </h1> <p>I’ve been working on a PDF editor recently, and I went down a rabbit hole I didn’t expect.</p> <p>At first, I thought building a “simple” PDF tool would be straightforward: upload a file → edit → download.</p> <p>But the deeper I went, the more I realized something surprising:</p> <p><strong>most online PDF tools don’t work the way users think they do.</strong></p> <h2> The assumption everyone makes </h2> <p>When you upload a PDF to an online editor, most people assume:</p> <ul> <li>the file is processed instantly </li> <li>maybe some light transformations happen </li> <li>then it’s sent back </li> </ul> <p>In reality, a lot of tools:</p> <ul> <li>upload your file to a server </li> <li>store it (sometimes longer than expected) </li> <li>process it remotely </li> <li>sometimes pass it through multiple services </li> </ul> <p>Not necessarily malicious — but definitely not always transparent.</p> <h2> The real technical challenge </h2> <p>I tried to approach the problem differently.</p> <p>Instead of focusing on features first, I asked:</p> <blockquote> <p>what would a clean and predictable architecture for PDF editing look like?</p> </blockquote> <p>That’s where things got interesting.</p> <h2> Problem #1: Rendering vs Editing </h2> <p>PDFs are not like HTML.</p> <p>You don’t have:</p> <ul> <li>semantic structure </li> <li>editable DOM </li> <li>consistent fonts </li> </ul> <p>What you get instead is:</p> <ul> <li>glyph positioning </li> <li>embedded fonts </li> <li>drawing instructions </li> </ul> <p>So editing text is not “editing text”.</p> <p>It’s more like:</p> <blockquote> <p>remove pixels and redraw something that looks identical</p> </blockquote> <h2> Problem #2: Fonts are a nightmare </h2> <p>This was by far the hardest part.</p> <p>Even if you extract the font:</p> <ul> <li>it may be subsetted </li> <li>it may fail to load in the browser </li> <li>it may render differently than in the original PDF </li> </ul> <p>So you end up dealing with:</p> <ul> <li>fallback strategies </li> <li>font matching heuristics </li> <li>visual inconsistencies </li> </ul> <p>And yes… bold text randomly becoming non-bold is a real thing 😅</p> <h2> Problem #3: Pixel-perfect editing </h2> <p>If you want a clean UX, you can’t just slap a contenteditable div on top.</p> <p>You need:</p> <ul> <li>canvas rendering for accuracy </li> <li>hidden input handling for typing </li> <li>custom caret drawing </li> <li>manual selection logic </li> </ul> <p>Basically… rebuilding a mini text engine.</p> <h2> A different approach </h2> <p>After experimenting with multiple architectures, I ended up with something like this:</p> <ul> <li>render the PDF page as an image (canvas) </li> <li>detect text blocks </li> <li>mask original text when editing </li> <li>redraw text manually using canvas </li> <li>keep interaction logic separate from rendering </li> </ul> <p>This avoids a lot of inconsistencies between HTML and PDF rendering.</p> <h2> Client-side vs Server-side </h2> <p>There’s also an interesting trade-off:</p> <h3> Client-side: </h3> <ul> <li>better for privacy </li> <li>no upload needed </li> <li>limited by browser capabilities </li> </ul> <h3> Server-side: </h3> <ul> <li>more powerful </li> <li>easier to control rendering </li> <li>raises privacy concerns </li> </ul> <p>There’s no perfect solution — it depends on the use case.</p> <h2> What surprised me the most </h2> <p>Honestly?</p> <p>How complex something as “simple” as editing a PDF actually is.</p> <p>It’s one of those problems that looks trivial from the outside, but gets messy very quickly.</p> <h2> Curious to hear your thoughts </h2> <p>If you’ve worked with PDFs before:</p> <ul> <li>how did you handle font rendering? </li> <li>did you go client-side or server-side? </li> <li>any tricks for keeping visual consistency? </li> </ul> <p>I’d love to learn how others approached this.</p> webdev ai programming javascript