<p>At first glances, PDF viewer seems to be as easy as opening a PDF URL in an Iframe; however, not only uncustomizable, but also, if some browsers doesn't support PDF browsing, it could be a problem.</p>
<p>A solution to this would be <a target="_blank" href="https://github.com/mozilla/pdf.js">Mozilla's PDF.js</a>. However, the PDF viewer isn't prebuilt for you in <a target="_blank" href="https://github.com/mozilla/pdfjs-dist">pdf.js-dist</a>, only some minimal JavaScript files.</p>

<h2 id="building-pdfjs-by-yourself">Building PDF.js by yourself</h2>
<p>By this way, it will also build the PDF viewer (which is normally used in Mozilla Firefox). You can also customize HTML, CSS and JavaScript.</p>
<pre><code class="lang-sh">git init
npm i gulp-cli
git submodule add https://github.com/mozilla/pdf.js.git
<span class="hljs-built_in">cd</span> pdf.js
npm i

<span class="hljs-comment"># Edit web/app_options.js (for default PDF); and `web/viewer.html or CSS files (for UI) to your liking</span>

npx gulp generic
cp -r build/generic ../pdf.js-dist
<span class="hljs-built_in">cd</span> -
npx http-server pdf.js-dist -o /web/viewer.html
</code></pre>
<h2 id="i-already-built-it-for-you">I already built it for you</h2>
<p>This is here. Just copy the <a target="_blank" href="https://github.com/patarapolw/pdf.js-viewer/tree/main/dist"><code>/dist</code></a> folder.</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://github.com/patarapolw/pdf.js-viewer">https://github.com/patarapolw/pdf.js-viewer</a></div>
<h2 id="my-example-project">My example project</h2>
<p><a target="_blank" href="https://ly.polv.cc">This online Lilypond compiler / playground</a> is made using this, using the endpoint <code>/pdf.js/web/viewer.html?file=&lt;FILEPATH&gt;#pagemode=none</code>. It's a quick project of mine to compile MIDI and WAV files, and share it.</p>


At first glances, PDF viewer seems to be as easy as opening a PDF URL in an Iframe; however, not only uncustomizable, but also, if some browsers doesn't support PDF browsing, it could be a problem.

A solution to this would be [Mozilla's PDF.js](https://github.com/mozilla/pdf.js). However, the PDF viewer isn't prebuilt for you in [pdf.js-dist](https://github.com/mozilla/pdfjs-dist), only some minimal JavaScript files.



## Building PDF.js by yourself

By this way, it will also build the PDF viewer (which is normally used in Mozilla Firefox). You can also customize HTML, CSS and JavaScript.

```sh
git init
npm i gulp-cli
git submodule add https://github.com/mozilla/pdf.js.git
cd pdf.js
npm i

# Edit web/app_options.js (for default PDF); and `web/viewer.html or CSS files (for UI) to your liking

npx gulp generic
cp -r build/generic ../pdf.js-dist
cd -
npx http-server pdf.js-dist -o /web/viewer.html
```

## I already built it for you

This is here. Just copy the [`/dist`](https://github.com/patarapolw/pdf.js-viewer/tree/main/dist) folder.

%[https://github.com/patarapolw/pdf.js-viewer]

## My example project

[This online Lilypond compiler / playground](https://ly.polv.cc) is made using this, using the endpoint `/pdf.js/web/viewer.html?file=<FILEPATH>#pagemode=none`. It's a quick project of mine to compile MIDI and WAV files, and share it.

Customizable PDF viewer with self-built PDF.js

Building PDF.js by yourself

I already built it for you

My example project