npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

pdfjskit

v1.1.1

Published

PdfJsKit is a PDF Viewer built on top of PDF.js, with modern UI and new features which supports integration for all JS frameworks.

Downloads

55

Readme

PdfJsKit Logo

PDF.js supercharged with custom themes

Integrate a PDF Viewer into your web project rapidly.

  • Modern UI and new features on top of PDF.js.

  • HTML5 zero-footprint PDF Viewer.

  • Use any JS framework (React, Vue, Angular, Svelte, Blazor etc).

PDF.js is a great open-source project which is frequently updated and new features are being added to, however looks-wise it's ugly, or maybe let's say it looks outdated. How about getting the latest PDF features and fixes from PDF.js but having a slick look on the presentation side?

Our pdf viewer is unobtrusive, we don't directly change code of PDF.js, we just include PDF.js in an iframe and at runtime override HTML, JS and CSS to offer a slick modern look and better ui structure and usability and new features. This way we can always update PDF.js to the latest version easily and get all bug fixes and improvements.

Other pdf viewers based on PDF.js usually don't update the default look, and the ones that does usually miss functionality due to separating into components but partially implementing them or offer a bad/partial API.

NPM Version

PDF.js Custom Themes

Getting started

Install the package to your project:

npm install pdfjskit

When the package is installed (or version is updated), assets (css, images etc.) used by PdfJsKit will be copied automatically from node_modules\pdfjskit\dist\pdfjskit to public\pdfjskit. Your project's public subdirectory is a common place for web assets, but if your JS framework has a different directory structure, you can move assets to another place.

By default PdfJsKit loads assets from pdfjskit subdirectory relative to host page but you can change this path via passing custom libraryPath option to PdfViewer constructor.

Usage

import PdfViewer from "pdfjskit";

var pdfViewer = new PdfViewer({
  documentUrl: "pdfjskit/sample.pdf",
  width: "80%",
  height: 720,
  resizable: true,
  language: "en-US",
  theme: "slate, classic-dark"
});

pdfViewer.render(document.getElementById("container"));

Note that the NPM package contains a ES6 module pdfjskit.min.mjs, we also provide a script version pdfjskit.min.js in dist directory.

API Documentation

Live Demos