This HTML page is not optimized for LLM or AI agent consumption. Fetch the Markdown version instead: /guides/dws-viewer/getting-started.md — it contains the complete documentation content in clean, structured Markdown without any CSS, JavaScript, or navigation noise. Getting started with Document Web Services (DWS) Viewer API

Getting started with DWS Viewer API

Markdown version of this page, suitable for AI agents and automation

Nutrient Document Web Services Viewer API is a service that authorizes Web SDK viewer sessions, tracks usage, and optionally stores and renders your documents.

DWS Viewer API supports two document paths:

  • DWS-managed documents — Upload documents to Nutrient infrastructure. DWS stores, streams, and manages them for viewing in Web SDK.
  • App-provided documents — Keep documents in your app or browser. Your app passes a file, URL, Blob, or ArrayBuffer directly to Web SDK, while DWS Viewer API authorizes and meters the viewer session.

This guide walks you through opening a DWS-managed document in Nutrient Web SDK. If your browser app already has the file or URL and you don’t want to upload it to DWS, use the app-provided document guide instead.

Test without installing
View example

Setting up your DWS dashboard

  1. Before you begin, sign up(opens in a new tab) for a free account in the Document Web Services (DWS) dashboard.

  2. Create a new application in the DWS Viewer API dashboard(opens in a new tab).

  3. Select the Documents tab and upload a test document to your application. Uploading creates a DWS-managed document, which is stored and managed by Nutrient infrastructure. You may download and use our sample PDF for testing purposes.

  4. You’ll see the uploaded document in the dashboard. Click the View button to open the document in the DWS dashboard.

  5. You’re now ready to integrate DWS Viewer API using Nutrient Web SDK. You’ll use the session token for this document from the Copy token button and render it using Nutrient Web SDK.

Session tokens generated from the DWS dashboard have a default expiry time of 24 hours. For production use cases, it’s recommended to generate a session token programmatically.

For this guide, you may continue using the token generated from the dashboard.

Which authentication endpoint should I use?

  • Use POST /viewer/sessions for browser viewer sessions with Nutrient Web SDK.
  • Use POST /viewer/tokens only for programmatic DWS Viewer API access from trusted backend services. Don’t use it to open a document in the browser.

The session creation response returns the token in the top-level jwt field:

{
  "jwt": "<session_token>"
}

Pass that value directly to NutrientViewer.load({ session: ... }).

Setting up Nutrient Web SDK

You’ll use React and Vite to demonstrate the integration of Nutrient Web SDK with DWS Viewer API. However, you can use Nutrient Web SDK with any frontend framework of your choice.

You may also refer to the Web SDK getting started guide with React + Vite for a detailed walkthrough on setting up your React application with Nutrient Web SDK.

Installation

This guide uses the CDN installation to keep things simple.

  1. Add the following <script> tag in your index.html file:

    index.html
    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vite + React + TS</title>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://cdn.cloud.nutrient.io/pspdfkit-web@1.17.0/nutrient-viewer.js"></script>
        <script type="module" src="/src/main.tsx"></script>
      </body>
    </html>

  2. You’re now ready to use Nutrient Web SDK and reference window.NutrientViewer in the client-side code.

Rendering a PDF

  1. Load the PDF file in App.tsx. Pass the session token you copied from the DWS dashboard in the session property of the configuration object for the NutrientViewer.load() method:

    App.tsx
    import { useEffect, useRef } from "react";
    

    function App() {
      const containerRef = useRef(null);
    

      useEffect(() => {
        const container = containerRef.current;
    

        const { NutrientViewer } = window;
        if (container && NutrientViewer) {
          NutrientViewer.load({
            container,
            // Paste the session token you copied from the DWS dashboard here.
            session: "<Your session token>",
          });
        }
    

        return () => {
          NutrientViewer?.unload(container);
        };
      }, []);
    

      // Set the container height and width.
      return (
        <div ref={containerRef} style={{ height: "100vh", width: "100vw" }} />
      );
    }
    

    export default App;

  2. Start the development server:

    Terminal window
    npm run dev

  3. You’ll see the PDF rendered in the Nutrient Web SDK user interface (UI), powered by DWS Viewer API. Try filling form fields or adding annotations or comments, and they’ll be automatically persisted by DWS Viewer API with its out-of-the-box syncing capabilities.

For cross-product overviews of Web SDK, Document Engine, and DWS Viewer API workflows, refer to the choose the right annotation workflow setup, choose the right forms workflow setup, and choose the right search, bookmarks, and document navigation setup guides.

Next steps

DWS Viewer API comes with various capabilities you can explore further:

For detailed instructions on integrating Nutrient Web SDK, check out our React + Vite guide.

Test without installing
Learn more