The latest articles on DEV Community by Serban Andrew Locota (@andrei_veridox). https://dev.to/andrei_veridox 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%2F4156049%2Fcd8d207e-1d4f-4bb9-a694-3213c19464eb.png https://dev.to/andrei_veridox en Serban Andrew Locota Mon, 05 Oct 2026 00:22:34 +0000 https://dev.to/andrei_veridox/trying-loupe-in-a-web-app-install-and-integration-notes-4ff7 https://dev.to/andrei_veridox/trying-loupe-in-a-web-app-install-and-integration-notes-4ff7 <p>Loupe is a browser document viewer for apps that need PDF, Word and images in the same workflow. You supply the toolbar and layout; the package handles viewer state and the format adapters.</p> <p>Some notes from setting it up, in case you try it.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fz6i5antmkxed6pctsdem.gif" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fz6i5antmkxed6pctsdem.gif" alt="Loupe playground with a fictional delivery note, then the install and main.ts code" width="600" height="338"></a></p> <h2> Install </h2> <p>The current release is v0.1.3. It installs with npm from a GitHub release, rather than the public npm registry:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm <span class="nb">install </span>https://github.com/AndreiLocota/loupe/releases/download/v0.1.3/andreilocota-loupe-0.1.3.tgz </code></pre> </div> <p>The <a href="https://tryloupe.lovable.app/developers" rel="noopener noreferrer">developer page</a> has the working example and capability table. The core is headless, with separate PDF, DOCX and image adapters. React bindings are optional.</p> <h2> The bits to check in your app </h2> <p>Give the viewer container a definite height. Without one, the document loads with no error, but the container is 0 px tall and nothing shows. Make sure your bundler serves the worker and WASM assets. If you use server rendering, keep the adapters on the client. Dispose of the viewer when you unmount it.</p> <p>Then try your real layout. A document beside an approval form has much less room than a full-screen demo. Check whether someone can read a table, find an amount and copy a reference at that width.</p> <p>A scan is also worth including in your test folder. Loupe has no OCR: PDF search needs text already in the file. Image controls vary by format, so check the capability table rather than assuming every button applies.</p> <h2> Scope and licence </h2> <p>Viewing runs in the browser without an API key or hosted backend at runtime. The package is free for commercial use under its use licence, but it isn’t open source. It’s also pre-1.0, so the API can change.</p> <p>The Word inspector on the demo site is a separate application built around the viewer. Its retained-comments and tracked-changes inspection isn’t an SDK API.</p> <p><a href="https://tryloupe.lovable.app/playground" rel="noopener noreferrer">Try the playground</a> with your own files. It accepts PDF, Word and the supported image formats, and nothing is uploaded.</p> webdev testing frontend javascript