This HTML page is not optimized for LLM or AI agent consumption. Fetch the Markdown version instead: /sdk/web/getting-started/quickstart.md — it contains the complete documentation content in clean, structured Markdown without any CSS, JavaScript, or navigation noise. Try Nutrient Web SDK without a watermark

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 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.

1. Get your publishable key

  1. Create a free account in the Nutrient dashboard(opens in a new tab).
  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

  1. Add the Nutrient Web SDK script to index.html before your app’s module script:

    <!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</title>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://cdn.cloud.nutrient.io/pspdfkit-web@1.18.0/nutrient-viewer.js"></script>
        <script type="module" src="/src/main.jsx"></script>
      </body>
    </html>

  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:

    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:

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 <div ref={containerRef} style={{ height: "100vh", width: "100vw" }} />;
}


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

  1. Start the development server:

    Terminal window
    npm run 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.
  • Review included usage and upgrade options on the Viewer API pricing page.
  • Prefer to try Web SDK without creating an account? Choose a framework-specific getting started 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 guide.