Some test text!

menu
Advancedkeyboard_arrow_down

Advanced UI customization

Built in React, the WebViewer UI provides a great developer experience for anyone interested in the source code. You can make adjustments of your own, run it to test, and build it to deploy.

linkFolder 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
  hooks/           - Custom React hooks

linkWorking with the public repo in Github

For a better developer experience, we have open sourced the project in Github. It allows you to keep track of your changes better or sync with future versions easier.

linkForking and linking

A fork is a copy of a repository. Forking a repository allows you to freely experiment with changes without affecting the original project. To fork and sync with PDFTron's webviewer-ui repo, follow these steps:

  1. Go to https://github.com/PDFTron/webviewer-ui.
  2. In the top-right corner of the page, click Fork.
  3. Open terminal and navigate to your destination folder.
  4. Run the following:

    git clone https://github.com/YOUR-USERNAME/webviewer-ui
    cd webviewer-ui
    git remote add upstream https://github.com/PDFTron/webviewer-ui

See Forking a repo for more information.

linkSwitching branches

The default branch of the repo is the latest stable WebViewer version. For example, if the default branch is 7.1, then it means the latest official WebViewer version is 7.1.

You should switch the branch to be the WebViewer version you are currently using for your application. For example, if you are using WebViewer 7.0 then you should switch to the 7.0 branch and modify the code there. If you are using the legacy UI, then you need to switch to legacy/7.0 instead.

Code in the master branch is considered to be experimental and is not safe to be used in production. Generally we don't recommend that you modify the code in the master branch.

linkRunning

To run the project,

  1. Go to your forked webviewer-ui repo
  2. Run npm install
  3. Run npm run download-webviewer
  4. Run npm start

linkBuilding

To build the source files into webviewer-ui.min.js,

  1. Run npm run build

linkSyncing the fork

When you want to merge any changes from the original PDFTron's webviewer-ui repo, follow these steps:

  1. Open terminal and navigate to the forked webviewer-ui
  2. Run the following:

    git fetch upstream master
    git checkout master
    git merge upstream/master

See Syncing a fork for more information.

linkMaking pull requests

If you want your changes to be implemented into PDFTron's webviewer-ui so that they are available in future releases, see Creating a pull request.

linkApply changes in your app

After npm run build, copy all the files in the webviewer-ui/build folder to the lib/ui folder in your app. Restart your app and you should see the new changes. You can write a script to automate this process.

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

Join our upcoming webinar to learn about how to collaborate on videos frame by frame directly in your browser

Save your seat
close