---
title: "Try Nutrient Web SDK without a watermark"
canonical_url: "https://www.nutrient.io/sdk/web/getting-started/quickstart/"
md_url: "https://www.nutrient.io/sdk/web/getting-started/quickstart.md"
last_updated: "2026-07-29T15:17:12.346Z"
description: "Follow the recommended quick start guide to add Nutrient Web SDK to a React + Vite app with a free publishable key."
---
# Try Nutrient Web SDK without a watermark
This quick start guide shows the recommended way to try Nutrient Web SDK.
This guide uses React + Vite and the CDN installation path as a fast, end-to-end example. If you want to install Web SDK with a package manager, follow the [React + Vite getting started](https://www.nutrient.io/sdk/web/getting-started/react-vite.md) guide.
Using a publishable key enables you to evaluate Web SDK without a watermark and includes free monthly viewer usage. For current limits and upgrade options, refer to the [Viewer API pricing](https://www.nutrient.io/api/pricing/viewer-api/).
## 1. Get your publishable key
**Steps:**
1. Create a free account in the [Nutrient dashboard](https://dashboard.nutrient.io/sign_up/).
2. Click the Viewer API card from the homepage.
3. Copy your publishable key. You’ll add it to `NutrientViewer.load()` in the next steps.
## 2. Add Web SDK from the CDN
**Steps:**
1. Add the Nutrient Web SDK script to `index.html` before your app’s module script:
```html
Vite + React
```
2. Make sure the viewer container can fill the page. The default Vite template includes CSS that can interfere with full-page viewers. In `src/index.css`, remove these properties from the `body` rule if they exist:
```css
/* src/index.css */
display: flex;
place-items: center;
```
## 3. Render a PDF with your publishable key
Replace the contents of `src/App.jsx` or `src/App.tsx` with the following code:
```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,
// Replace with the publishable key you copied from the Nutrient dashboard.
session: "your_api_key_here",
document: "https://www.nutrient.io/downloads/nutrient-web-demo.pdf",
});
}
return () => {
NutrientViewer?.unload(container);
};
}, []);
return ;
}
export default App;
```
In development, React 18+ runs `useEffect` twice when `StrictMode` is enabled. The cleanup function in this example calls `NutrientViewer.unload()` so the viewer can safely mount again.
## 4. Start the app
**Steps:**
1. Start the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```
2. Open the local URL shown in your terminal.
3. You’ll see the PDF rendered in Nutrient Web SDK without a watermark.
## Next steps
- Explore Web SDK features in the [Web SDK guides](https://www.nutrient.io/guides/web.md).
- Review included usage and upgrade options on the [Viewer API pricing page](https://www.nutrient.io/api/pricing/viewer-api/).
- Prefer to try Web SDK without creating an account? Choose a framework-specific [getting started](https://www.nutrient.io/sdk/web/getting-started.md) guide. No key is required for that path, but rendered documents include a watermark.
If you run into setup issues, refer to the [common Web SDK troubleshooting](https://www.nutrient.io/guides/web/troubleshooting/common-issues.md) guide.
---
## Related pages
- [Get started with Web SDK](/sdk/web/getting-started.md)
- [Choose your Web SDK setup](/sdk/web/getting-started/deployment-options.md)
- [Add PDF functionality with Next.js](/sdk/web/getting-started/nextjs.md)
- [Add PDF functionality with React + Vite](/sdk/web/getting-started/react-vite.md)
- [Add PDF functionality with TypeScript](/sdk/web/getting-started/typescript.md)