Code Monkey home page Code Monkey logo

webviewer-ui's Introduction

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.

WebViewer UI

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.

Any approved pull requests made to this repository are merged into WebViewer's internal builds, and can be accessed through the nightly builds. Any approved pull requests to the master branch will go to WebViewer's nightly experimental builds and pull requests to version number branches will go to that version's nightly stable.

Nightly stable and experimental builds can also be downloaded from WebViewer's NPM package.

Install

npm install

Install WebViewer Core Dependencies

The preferred method to install the Core dependencies is to use the WebViewer NPM package.

Once installed, copy the Core folder into the path being used by the viewer for its dependencies (/lib by default).

Run

npm start

Build

npm run build

Troubleshooting

If you are using NPM version 7 or higher, you may get an error indicating an issue with the dependency tree. There are two possible solutions for this:

  • Downgrade your version of Node to v14, which uses NPM version 6.
  • When running npm install add the flag --legacy-peer-deps. You can read more about this flag in this Stack Overflow post.

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
  lib/             - Lib folder created upon npm install, used for dev testing only

API documentation

See API documentation.

Contributing

See contributing.

License

See license.

webviewer-ui's People

Contributors

webviewer-ui avatar zhijiezhang avatar kristianhein avatar khein-pdftron avatar justinjung04 avatar andreysaf avatar mparizeau-pdftron avatar awy3 avatar achenpdftron avatar jamesjypark avatar s0uldrag0n avatar bollain avatar lbittner-pdftron avatar sisardor avatar liamross avatar jiaqihuang-233 avatar wanboli avatar jniemin avatar difel110185 avatar edwinkorsten avatar jimmylin39 avatar sabieber avatar zsydyc avatar luketully-pdftron avatar bertg avatar henry-travelapp avatar correyl avatar daneverso avatar naueramant avatar martis347 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.