--- title: "Add PDF functionality with jQuery" canonical_url: "https://www.nutrient.io/sdk/web/getting-started/other-frameworks/jquery/" md_url: "https://www.nutrient.io/sdk/web/getting-started/other-frameworks/jquery.md" last_updated: "2026-05-23T00:08:18.235Z" description: "Learn how to integrate Nutrient Web SDK into your jQuery application. Step-by-step guide for adding PDF viewing, editing, and annotation features." --- # Add PDF functionality with jQuery Nutrient Web SDK is a JavaScript PDF library for viewing, annotating, and editing PDFs directly in the browser. Use it to add PDF capabilities to any web app. This guide walks you through the steps to integrate Nutrient into your project, installing using npm and integrating as a module. By the end, you’ll be able to render a PDF document in the user interface (UI). **Test without installing** You can test the SDK capabilities in our playground. [Read more](https://nutrient.io/demo/sandbox) ## Installation #### Note: Creating a new project (optional) If you don’t yet have a jQuery project set up, create a new folder with an `index.html` file and serve it locally. **Steps:** 1. Reference the Nutrient Web SDK library from your `index.html` file `` section: ```html ``` 2. This will load Nutrient Web SDK from the CDN, enabling you to reference `NutrientViewer` in your JavaScript code. 3. Make sure your server has the `Content-Type: application/wasm MIME` type set. Read more about this in the [troubleshooting](https://www.nutrient.io/guides/web/troubleshooting/common-issues.md) section of our guides. ## Rendering a PDF **Steps:** 1. Rename the PDF document you want to display in your application to `document.pdf`, and place it in your project’s root directory. You can use [this demo document](https://www.nutrient.io/downloads/nutrient-web-demo.pdf) as an example. 2. In the `index.html` file in the root folder of your application, add an empty `
` element with a defined `width` and `height` to where Nutrient will be mounted: ```html
``` 3. Initialize the SDK in JavaScript by calling `window.NutrientViewer.load()`: ```js // index.js window.NutrientViewer.load({ container: "#nutrient", document: "document.pdf", }).then((instance) => { console.log("Nutrient loaded", instance); }).catch((error) => { console.error(error.message); }); ``` 4. Import `index.js` into your HTML page: ```html ``` 5. You’ll see the PDF rendered in the browser when you serve the site locally: ```html
``` ### Optimizing load performance If your app doesn't open a PDF immediately — for example, the user navigates to a viewer on a different page — call [`NutrientViewer.preloadWorker()`](https://www.nutrient.io/api/web/functions/NutrientViewer.preloadWorker.html) early in your app to fetch and compile the WebAssembly artifacts in the background. When `NutrientViewer.load()` runs later, it can start rendering without waiting for them. ```js // Call early — for example, on app init or after login. NutrientViewer.preloadWorker(); ``` Refer to the [performance best practices](https://www.nutrient.io/guides/web/best-practices/performance.md) guide for more optimization techniques. ## Troubleshooting **Facing issues?** Visit the troubleshooting guide for solutions to some common errors. [Read more](https://www.nutrient.io/guides/web/troubleshooting/common-issues.md) --- ## Related pages - [Add PDF functionality with Electron](/sdk/web/getting-started/other-frameworks/electron.md) - [Add PDF functionality with Angular](/sdk/web/getting-started/other-frameworks/angular.md) - [Add PDF functionality with ASP.NET](/sdk/web/getting-started/other-frameworks/aspnet.md) - [Add PDF functionality with JavaScript + Vite](/sdk/web/getting-started/other-frameworks/javascript.md) - [Add PDF functionality with Blazor](/sdk/web/getting-started/other-frameworks/blazor.md) - [Add PDF functionality with Nuxt](/sdk/web/getting-started/other-frameworks/nuxt.md) - [Add PDF functionality with Flutter](/sdk/web/getting-started/other-frameworks/flutter.md) - [Add PDF functionality with Laravel](/sdk/web/getting-started/other-frameworks/laravel.md) - [Add PDF functionality with PWA](/sdk/web/getting-started/other-frameworks/pwa.md) - [Add PDF functionality with Svelte](/sdk/web/getting-started/other-frameworks/svelte.md) - [Add PDF functionality with PHP](/sdk/web/getting-started/other-frameworks/php.md) - [Add PDF viewing and editing to Vue applications](/sdk/web/getting-started/other-frameworks/vue.md)