WebViewer UI built in React

by React

WebViewer UI

WebViewer UI sits on top of WebViewer, a powerful JavaScript-based PDF Library that's part of the PDFTron PDF SDK. Built in React, WebViewer UI provides a slick out-of-the-box responsive UI that interacts with the core library to view, annotate and manipulate PDFs that can be embedded into any web project.

This repo is specifically designed for any users interested in advanced customizations. With the source code access, it gives developers full control to customize & style the UI, build custom controls & logic, integrate into workflows, or build a UI from scratch.

Initial setup

Before you begin, make sure your development environment includes Node.js.

To work with this repo, you must download the latest WebViewer and link it to this repo.

  1. Download WebViewer.
  2. Follow steps from forking WebViewer.

Now you can navigate to WebViewer/lib/ui and run the commands to install, run and build.

Install

npm install

Run

npm start

Build

npm run build

Project structure

src/
  apis/            - APIs exposed in myWebViewer.getInstance()
  components/      - React components
  constants/       - JavaScript or CSS constants
  core/            - APIs from the Core
  event-listeners/ - Listeners for the Core events
  helpers/         - Reused functions
  redux/           - Redux files for state managing

GitHub