https://github.com/aprysesdk/webviewer-html-annotate
Annotate live HTML web pages by providing URL
https://github.com/aprysesdk/webviewer-html-annotate
annotate-html comment-on-websites draw-on-live-html draw-on-websites html-markup markup-website review-website
Last synced: 11 months ago
JSON representation
Annotate live HTML web pages by providing URL
- Host: GitHub
- URL: https://github.com/aprysesdk/webviewer-html-annotate
- Owner: ApryseSDK
- Created: 2020-10-29T22:37:53.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2022-06-21T23:37:45.000Z (about 4 years ago)
- Last Synced: 2024-07-30T20:00:25.736Z (almost 2 years ago)
- Topics: annotate-html, comment-on-websites, draw-on-live-html, draw-on-websites, html-markup, markup-website, review-website
- Language: JavaScript
- Homepage:
- Size: 621 KB
- Stars: 6
- Watchers: 25
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# webviewer-html-annotate
Annotate live HTML pages by simply providing URL. This way you can preserve all the animations and any interactive content. [Watch the video](https://youtu.be/OGswLirzMW8) to see a demo and walkthrough of the project.
The sample uses [WebViewer HTML by PDFTron](https://www.npmjs.com/package/@pdftron/webviewer-html) for annotating HTML, and [Website-scraper](https://www.npmjs.com/package/website-scraper) for scraping the website from URL.
## Install
#### Client
```
cd client
npm i
```
#### Server
```
cd server
npm i
```
## Run
#### Client
```
cd client
npm start
```
#### Server
```
cd server
npm start
```
## How it works
1. Client app makes the request to the Node.js Express server.
2. Node.js Express server serves the endpoint `/website?url=someurl.com`,
3. From the `url` query parameter, we download all the website dependencies (HTML, CSS, JS, images).
4. The server responds back with link to access downloaded resources and a thumbnail preview in `base64`.
5. WebViewer then renders out live HTML that can be annotated.