Some test text!

menu
search

Get started with WebViewer & Svelte

Welcome to PDFTron. This guide will help you integrate a free trial of WebViewer into Svelte applications on the browser. It will help you clone the Svelte sample repository, walk through the project structure, and show you how to call other WebViewer API. Your free trial includes unlimited trial usage and support from solution engineers.

linkPrerequisites

linkInitial setup

  1. Clone the Svelte sample by executing

    git clone https://github.com/PDFTron/webviewer-svelte-sample.git
  2. Once cloned, navigate into the webviewer-svelte-sample folder and install all the required dependencies by executing

    npm install

npm will also download the PDFTron WebViewer and extract it to /public/lib.

You are now ready to run the sample or use more WebViewer APIs.

linkSample overview

After initial setup, your webviewer-svelte -sample directory should be laid out like this:

webviewer-svelte-sample
├── LICENSE
├── node_modules
│   └── ...
├── package.json
├── package-lock.json
├── public
│   ├── bundle.css
│   ├── bundle.css.map
│   ├── bundle.js
│   ├── bundle.js.map
│   ├── favicon.png
│   ├── global.css
│   ├── index.html
│   └── lib
├── README.md
├── rollup.config.js
└── src
    ├── App.svelte
    ├── main.js
    └── WebViewer.svelte

Notable files and directories include:

File/Folder NameDescription
LICENSELists the PDFTron copyright and license information.
App.svelteContains the main application code which instantiates a WebViewer and loads a document
main.jsAdds the application defined in App.svelte to the body element of /public/index.html
WebViewer.svelteContains the definition for the WebViewer component
bundle.jsJavaScript bundle that is compiled by Svelte
libContains the extracted WebViewer SDK

linkRun the sample

To run the sample, navigate to your /webviewer-svelte-sample directory and execute

npm run dev

Then navigate to http://localhost:5000. You should see WebViewer start up and load the sample PDF. Note it will change in real time if you edit any of the source files.

sample

linkUse more WebViewer APIs

To call more WebViewer API's, navigate to /src/WebViewer.svelte and add the API calls in the callback of the WebViewer constructor(you may need to make one if it is not provided).

const ele = document.getElementById('viewer');
window.PDFTron.WebViewer({
  path: '/lib'
}, ele)
.then(function(instance){
  // In this callback WebViewer will be initialized, so you can call WebViewer API here.
  instance.setTheme('dark');
});

If your Svelte application is already running, you should see the theme change right away. Otherwise execute npm run dev again, then navigate to http://localhost:5000 and you should see that the theme has changed.

sample-dark

For resources on how to use more of our WebViewer API, check out the WebViewer guides and API.

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.

PDFTron Receives USD$71 Million Growth Investment Led By Silversmith Capital Partners

Learn more
close