Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/PDFTron/webviewer-custom-ui
Demonstrates how to get started with making your own UI
https://github.com/PDFTron/webviewer-custom-ui
pdf-viewer react-pdf-viewer webviewer
Last synced: 3 days ago
JSON representation
Demonstrates how to get started with making your own UI
- Host: GitHub
- URL: https://github.com/PDFTron/webviewer-custom-ui
- Owner: PDFTron
- License: other
- Created: 2020-06-15T19:21:38.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-11-29T13:08:38.000Z (7 months ago)
- Last Synced: 2024-03-04T05:16:08.757Z (4 months ago)
- Topics: pdf-viewer, react-pdf-viewer, webviewer
- Language: JavaScript
- Size: 1.71 MB
- Stars: 13
- Watchers: 9
- Forks: 19
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Lists
- my-awesome-list - webviewer-custom-ui
README
# WebViewer - Custom UI
[WebViewer](https://www.pdftron.com/documentation/web/) is a powerful JavaScript-based PDF Library that's part of the [PDFTron PDF SDK](https://www.pdftron.com).
This repo is specifically designed for any users interested in making their [own UI](https://www.pdftron.com/documentation/web/guides/core/).
This sample codebase demonstrates
* How to leverage PDFTron's document renderer without an ``
* How to define custom `` elements and implement functionality from the PDFTron SDK such as
* Zoom In/Out
* Drawing Rectangles
* Select Tool
* Creating and Applying Redactions
* How to implement searching using [DocViewer Search APIs](https://www.pdftron.com/documentation/web/guides/advance-text-search/)
## Initial setup
Before you begin, make sure your development environment includes [Node.js](https://nodejs.org/en/).
## Install
```
git clone https://github.com/PDFTron/webviewer-custom-ui.git
cd webviewer-custom-ui
npm install
```
## Run
```
npm start
```
## Build
Run `npm run build` to build the project. The build artifacts will be stored in the `build/` directory. See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
To test the build directory locally you can use [serve](https://www.npmjs.com/package/serve) or [http-server](https://www.npmjs.com/package/http-server). In case of serve, by default it strips the .html extension stripped from paths. We added serve.json configuration to disable cleanUrls option.
## WebViewer APIs
See [API documentation](https://www.pdftron.com/documentation/web/guides/ui/apis).
## Contributing
See [contributing](./CONTRIBUTING.md).
## License
See [license](./LICENSE).
