--- title: "Getting started with Document Web Services (DWS) Viewer API" canonical_url: "https://www.nutrient.io/guides/dws-viewer/getting-started/" md_url: "https://www.nutrient.io/guides/dws-viewer/getting-started.md" last_updated: "2026-05-27T13:10:05.652Z" description: "Learn how to upload documents via API or dashboard, generate tokens, and integrate DWS Viewer API with Nutrient Web SDK." --- # Getting started with DWS Viewer API Nutrient [Document Web Services Viewer API](https://www.nutrient.io/guides/dws-viewer.md) is a service that integrates with Document Engine to support our [Web SDK](https://www.nutrient.io/guides/web.md). 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 DWS Viewer API. **Test without installing** See DWS Viewer API capabilities in the Nutrient dashboard. [Read more](https://dashboard.nutrient.io/viewer-api/api_explorer/) **View example** Prefer to jump straight into code? View a detailed example that covers various capabilities of DWS APIs. [Read more](https://github.com/PSPDFKit/awesome-nutrient/tree/master/dws) ## Setting up your DWS dashboard **Steps:** 1. Before you begin, [sign up](https://dashboard.nutrient.io/sign_up/?product=viewer) for a free account in the Document Web Services (DWS) dashboard. 2. Create a new application in the [DWS Viewer API dashboard](https://dashboard.nutrient.io/viewer-api/). 3. Select the **Documents** tab and upload a test document to your application. You may download and use [our sample PDF](https://www.nutrient.io/downloads/nutrient-web-demo.pdf) for testing purposes.![](@/assets/guides/document-engine/as-a-service/dws-documents-tab.png) 4. You’ll see the uploaded document in the dashboard. Click the **View** button to open the document in the DWS dashboard.![](@/assets/guides/document-engine/as-a-service/dws-uploaded-document.png) 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](https://www.nutrient.io/guides/dws-viewer/developer-guides/generate-a-session-token.md) 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](https://www.nutrient.io/sdk/web/getting-started.md#other-frameworks) of your choice. You may also refer to the Web SDK getting started guide with [React + Vite](https://www.nutrient.io/sdk/web/getting-started/react-vite.md) 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. **Steps:** 1. Add the following ` ``` 2. You’re now ready to use Nutrient Web SDK and reference `window.NutrientViewer` in the client-side code. ## Rendering a PDF **Steps:** 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: ```tsx // 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: "", }); } return () => { NutrientViewer?.unload(container); }; }, []); // Set the container height and width. return (

); } export default App; ``` 2. Start the development server: ```bash npm run dev # or yarn dev # or pnpm 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 you can explore further: - It lets you [upload and process documents directly](https://www.nutrient.io/guides/dws-viewer/developer-guides/upload-documents.md) from your application. - For production use cases, [generate a session token](https://www.nutrient.io/guides/dws-viewer/developer-guides/generate-a-session-token.md) programmatically. - Configure token settings such as expiry date, time, and editing permissions. For details, refer to the [DWS API authentication](https://www.nutrient.io/guides/dws-viewer/developer-guides/backend-authentication.md) guide. For detailed instructions on integrating Nutrient Web SDK, check out our [React + Vite guide](https://www.nutrient.io/sdk/web/getting-started/react-vite.md). **Test without installing** See DWS Viewer API capabilities in the Nutrient dashboard. [Read more](https://dashboard.nutrient.io/viewer-api/api_explorer/) **Learn more** Follow a detailed tutorial that goes more in depth on DWS Viewer and DWS Processor. [Read more](https://www.nutrient.io/guides/dws-viewer/examples/build-secure-pdf-viewers-with-table-extraction.md) --- ## Related pages - [DWS Viewer API](/guides/dws-viewer.md) - [Supported file types](/guides/dws-viewer/file-types.md) - [Supported languages](/guides/dws-viewer/language-support.md) - [Privacy](/guides/dws-viewer/privacy.md) - [Support](/guides/dws-viewer/support.md) - [Security](/guides/dws-viewer/security.md) - [Pricing](/guides/dws-viewer/pricing.md)