How to build an HTML5 PowerPoint (PPT and PPTX) viewer

Want to display PowerPoint presentations directly in a browser without forcing users to download files or install software? This tutorial shows you how to build an HTML5 PowerPoint viewer using the Nutrient Web SDK. You’ll open and view PPT or PPTX files directly in your web browser using client-side processing — no server required.

This serverless solution leverages WebAssembly to ship our C++ rendering engine and PDF processor to browsers, resulting in a standalone solution that doesn’t require complex backend infrastructure.

See the demo for a live example.

Opening and rendering Office documents in the browser

Nutrient Web SDK brings support for Word, Excel, and PowerPoint formats to your application, without you or your users needing any MS Office software, MS Office licenses, or third-party open source software. The technology works by converting an Office document to PDF directly in the browser, and the document is then rendered in our JavaScript viewer.

For both manual and npm installations, it’s important to note that the assets must be copied to a public folder. Make sure your server has the Content-Type: application/wasm MIME type set, as explained in our troubleshooting guide.

To serve the files, you need to use an npm package like serve(opens in a new tab) as a simple HTTP server.

Unlocking more capabilities with Office-to-PDF conversion

By converting an Office document to PDF using client-side JavaScript, you have the option to support a rich array of additional Office document functionality, such as:

• Text editing — Edit text directly in the displayed Office document.
• Page manipulation — Organize documents by adding, removing, or rearranging pages.
• Annotations — Boost collaboration by adding text highlights, comments, or stamps.
• Adding signatures — Draw, type, or upload a signature directly to an Office document.

Requirements

To get started, you’ll need:

• The latest stable version of Node.js(opens in a new tab).
• A package manager compatible with npm(opens in a new tab). This guide contains usage examples for the npm client(opens in a new tab) (installed with Node.js by default).

Adding Nutrient to your project

1. Install the @nutrient-sdk/viewer package:

   • npm
   • pnpm
   • yarn

   npm

   npm i @nutrient-sdk/viewer

2. Copy the required viewer artifacts to your assets directory:

   cp -R ./node_modules/@nutrient-sdk/viewer/dist/ ./assets/

Make sure the assets directory contains:

• nutrient-viewer.js (or an equivalent main script)
• A nutrient-viewer-lib/ directory with supporting library files

Integrating into your project

1. Include a sample document (e.g. document.ppt) in the public or root folder of your project.

2. Add a mounting <div> and a script reference to your HTML:

   <div id="nutrient" style="width: 100%; height: 100vh;"></div>
   <script type="module" src="index.js"></script>

3. Import the viewer in your JavaScript entry file:

   import "./assets/nutrient-viewer.js";

4. Initialize the viewer using NutrientViewer.load():

   const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;
   
   NutrientViewer.load({
       baseUrl,
       container: "#nutrient",
       document: "document.ppt",
   })
   .then((instance) => {
       console.log("Nutrient loaded", instance);
   })
   .catch((error) => {
       console.error(error.message);
   });

Serving your website

1. Install the serve package globally:

   npm install --global serve

2. Start a local server from the current directory:

   serve -l 8080 .

3. Open your browser and go to http://localhost:8080 to view your website.

A note about fonts

When converting an Office document with custom fonts to a PDF, Nutrient Web SDK might not have access to these fonts due to licensing constraints. Nutrient replaces unavailable fonts with equivalents — like Arial with Noto. For precise font matching, you can provide your own fonts, embed them into source files, or designate paths to your .ttf fonts for custom solutions.

Adding more capabilities

Once you’ve deployed your viewer, you can start customizing it to meet your specific requirements or easily add more capabilities. To help you get started, here are some of our most popular JavaScript guides:

• Instant synchronization
• Document assembly
• Page manipulation
• Editor
• Forms
• Signatures
• Redaction
• Document security

FAQ

Conclusion

This tutorial covered building an HTML5 PowerPoint viewer with the Nutrient Web SDK in Standalone mode. Nutrient Web SDK leverages WebAssembly technology to enable high-performance Office document rendering in the browser without any infrastructure prerequisites or internet access.

The HTML5 PowerPoint viewer should now be running in your web application. For troubleshooting, contact the Support team.

The HTML5 PowerPoint viewer also integrates with web frameworks like Angular, Vue.js, and React.js. Start a free trial to see all web frameworks, or launch the demo to see the viewer in action.

Related reading

• How to build a PowerPoint viewer in JavaScript — The framework-free walkthrough in more depth
• How to build a React PowerPoint viewer — The same walkthrough in React
• How to build an HTML5 Excel viewer — Render XLS and XLSX with the same setup
• How to build a Word viewer using HTML5 — Render DOC and DOCX with the same setup