Some test text!

menu
Advancedkeyboard_arrow_down

Advanced 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.

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.