Document Web Services Viewer API

Nutrient Document Web Services Viewer API is a service that integrates with Document Engine to support our Web SDK. It enables document rendering, processing, and storage in web applications.

This guide walks you through the steps to get started with DWS Viewer API. You’ll set up Nutrient Web SDK and use it to render a document using the DWS Viewer API.

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. You may download and use our sample PDF(opens in a new tab) 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.

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.pspdfkit.com/pspdfkit-web@1.9.1/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 adding annotations or comments and they’ll be automatically persisted by DWS Viewer API with its out-of-box syncing capabilities.

Next steps

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

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

Test without installing
Learn more