> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/get-started/manually.md).
# Build a JavaScript PDF viewer with Apryse WebViewer SDK using a manual setup
Get started with the Apryse WebViewer SDK. Download and manually install a PDF viewer and editor in a vanilla JavaScript app without using a package manager, then render your first document in the Web
This guide shows how to manually integrate the Apryse [WebViewer SDK](/web/what-is-webviewer/overview.md) into a web project without using a package manager or bundler. The approach is useful when you need full control over asset hosting, or when [npm](/web/get-started/npm.md) or CDN-based setups aren’t an option. The examples use a simple HTML‑based project to focus on the core integration steps. By the end, you’ll successfully initialize WebViewer and render a PDF document in the UI.
You can also download our ready-to-use [GitHub samples](https://github.com/ApryseSDK/webviewer-samples) to get started quickly, or explore the interactive [Showcase demo](https://showcase.apryse.com/) to see WebViewer's full capabilities in action.
## Prerequisites
Before you start:
* Install [Node.js](https://nodejs.org/en/download) and npm. We recommend using the latest active LTS release.
* Install [Visual Studio Code](https://code.visualstudio.com/Download) or another code editor to develop and debug your code.
* Get your Apryse trial key.
{% @apryse-license-key/apryse-license-key platform="WEB\_VIEWER" variant="full" %}
## 1. Create your project
Set up your project by creating a folder and preparing a workspace for your WebViewer application.
1. In your terminal, go to the directory where you want to create the project.
2. Create a new project folder and move to it so you can start working with it:
{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}
```shell
mkdir webviewer-manual-integration
cd webviewer-manual-integration
```
{% endcode %}
{% endtab %}
{% endtabs %}
## 2. Download WebViewer
In this step, you’ll manually download the WebViewer package and add it to your project.
1. Download the [WebViewer package](https://downloads.apryse.com/downloads/WebViewer.zip), which includes the library files, samples, and documentation.
2. Extract the downloaded `WebViewer.zip` file into the `webviewer-manual-integration` project folder. Your project structure should look similar to this:
{% code lineNumbers="true" %}
```
webviewer-manual-integration/
└── WebViewer/
├── doc/
├── lib/
├── licenses/
├── samples/
├── scripts/
├── package.json
└── server.js
```
{% endcode %}
## 3. Create the PDF viewer
In this section, you'll create an HTML page for your WebViewer application, add the WebViewer script, define a container for the viewer, and initialize WebViewer so it can load and display a document.
1. Open the `webviewer-manual-integration` folder in Visual Studio Code.
2. Create a new `index.html` file in the `webviewer-manual-integration` folder.
3. Add the following HTML to the `index.html` file:
{% tabs %}
{% tab title="HTML" %}
{% code title="index.html" lineNumbers="true" %}
```html
Basic WebViewer
```
{% endcode %}
{% endtab %}
{% endtabs %}
{% hint style="info" %}
**Info**
This guide uses a `