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

This guide walks you through the steps to integrate Nutrient into your project. By the end, you’ll be able to render a PDF document in the user interface (UI).

Installation

Install Nutrient Web SDK into your existing Laravel project.

1. Add the Nutrient Web SDK (@nutrient-sdk/viewer) dependency:

   • npm
   • pnpm
   • yarn

   npm i @nutrient-sdk/viewer

2. Make the Nutrient Web SDK assets available to your Laravel app in your /public/assets/ directory. They can be copied as part of the build process by adding the following lines to your webpack.config.mix file:

   mix.copy(
     "./node_modules/@nutrient-sdk/viewer/dist/nutrient-viewer.js",
     "./public/assets/nutrient/nutrient-viewer.js",
   );
   mix.copy(
     "./node_modules/@nutrient-sdk/viewer/dist/nutrient-viewer-lib",
     "./public/assets/nutrient/nutrient-viewer-lib",
   );

3. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting(opens in a new tab) section of our guides.

Render a PDF

1. Rename the PDF document you want to display in your application to document.pdf, and place it in the public directory. You can use this demo document(opens in a new tab) as an example.

2. In resources/views/welcome.blade.php, add an empty <div> element with a defined height to where Nutrient will be mounted:

   <div id="nutrient" style="width: 100%; height: 100vh"></div>

3. Include nutrient-viewer.js on the welcome.blade.php page:

   <script src="assets/nutrient-viewer.js"></script>

4. Initialize Nutrient Web SDK in Laravel by calling NutrientViewer.load():

   <script>
     NutrientViewer.load({
       container: "#nutrient",
         document: "document.pdf" // Add the path to your document here.
     })
     .then(function(instance) {
       console.log("Nutrient loaded", instance);
     })
     .catch(function(error) {
       console.error(error.message);
     });
   </script>

5. Run php artisan serve. You should see the PDF rendered in the browser.

Troubleshooting