PDF Viewer Web Component. Built with stencil and pdfjs.

Usage no npm install needed!

<script type="module">
  import teamhivePdfViewer from 'https://cdn.skypack.dev/@teamhive/pdf-viewer';


Built With Stencil

Hive PDF Viewer

This web component allows you to add PDF rendering support to your web applications.


  • Rendering PDFs on web (Angular, Ionic, React, Stencil, etc.)
  • Search
  • Fit to Page / Fit to Width
  • Side panel for quick thumbnail navigation


  • npm i @teamhive/pdf-viewer


<hive-pdf-viewer src="http://www.mydomain.com/example.pdf"></hive-pdf-viewer>

Somewhere in your project (e.g. main.ts):

import { defineCustomElements } from '@teamhive/pdf-viewer/dist/loader';


Add viewer assets to angular.json assets block:

    "projects": {
        "app": {
            "architect": {
                "build": {
                    "options": {
                        "assets": [
                                "glob": "**/*",
                                "input": "node_modules/@teamhive/pdf-viewer/dist/pdf-viewer/pdf-viewer-assets",
                                "output": "pdf-viewer-assets"

Follow the Stencil JS Framework Integration guide for more info.


Property Default Description
src The PDF web address location (http, https)
page 1 The default page index.
enableToolbar true If the toolbar is available for display.
enableSideDrawer true If the side drawer UI (and button) is available for display.
enableSearch true If the document can be searched through. Hides the button when false.


Event Description
linkClick(href: string) Emits the href clicked when it's not an internal document annotation.
pageChange(currentPage: number) Emits the current page number when the current page changes.


Sean Bannigan Sean Perkins Justin True
Sean Bannigan Sean Perkins Justin True