React file viewer: Display PDFs, images, and Office documents in your app

Table of contents

    In this blog post, learn how to build a React file viewer using Nutrient Web SDK. You’ll open and view PDF, image, and Office files directly in your web browser using client-side processing, with no server required. You can check out the demo to see it in action.
    React file viewer: Display PDFs, images, and Office documents in your app
    TL;DR

    Build a React file viewer with Nutrient Web SDK to display PDF documents, images, and Office files entirely in the browser — no server or Microsoft Office required. After creating a Vite‑powered React project, you’ll install the SDK, copy its WebAssembly assets, and load any .pdf, .docx, .pptx or image file with a single NutrientViewer.load() call. The same viewer unlocks text editing, page manipulation, annotations, and eSignatures out of the box.

    Why choose a React file viewer — and what it lets you do

    A dedicated React file viewer lets users preview documents without extra downloads, keeps files entirely on the client side for better security, and cuts server costs. When you integrate Nutrient Web SDK, you unlock even more:

    Explore Demo

    Opening and rendering multiple file formats in the browser

    Nutrient Web SDK brings support for PDF, image, and Office 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 image (JPG, PNG, and TIFF) or Office document (Word, Excel, and PowerPoint) to PDF directly in the browser. The resulting PDF is then rendered in our JavaScript viewer.

    Requirements to get started

    To get started, you’ll need:

    Setting up a new React project with Vite

    1. To get started, create a new React project using Vite:
    Terminal window
    # Using Yarn
    yarn create vite nutrient-react-example --template react
    # Using npm
    npm create vite@latest nutrient-react-example -- --template react
    1. Change to the created project directory:
    cd nutrient-react-example

    Adding Nutrient to your project

    1. Add the Nutrient dependency:
    yarn add @nutrient-sdk/viewer
    npm install --save @nutrient-sdk/viewer
    1. The Nutrient Web SDK loads its WebAssembly and supporting files from a local path, so you need to copy them to the public folder. Start by installing the required copy plugin:
    Terminal window
    npm install -D rollup-plugin-copy

    Then, update your Vite configuration (vite.config.ts) to copy the SDK’s asset files during build:

    import { defineConfig } from "vite";
    import react from "@vitejs/plugin-react";
    import copy from "rollup-plugin-copy";
    export default defineConfig({
    plugins: [
    copy({
    targets: [
    {
    src: "node_modules/@nutrient-sdk/viewer/dist/nutrient-viewer-lib",
    dest: "public/",
    },
    ],
    hook: "buildStart",
    }),
    react(),
    ],
    });

    Displaying a document

    Nutrient supports the following file formats:

    • PDF, PDF/A (1, 2, 3)
    • DOCX, DOC, DOTX, DOCM
    • XLSX, XLS, XLSM
    • PPTX, PPT, PPTM
    • TIFF, TIF (including multipage)
    • PNG, JPEG, JPG
    1. Add your document to the public directory. You can use our demo PowerPoint document as an example.

    2. Now that everything is set up, you’ll render a PDF using the Nutrient SDK.

    Basic usage in App.tsx:

    import { useEffect, useRef } from "react";
    function App() {
    const containerRef = useRef(null);
    useEffect(() => {
    const container = containerRef.current;
    let cleanup = () => {};
    (async () => {
    const NutrientViewer = (await import("@nutrient-sdk/viewer")).default;
    // Unload any previous instance.
    NutrientViewer.unload(container);
    if (container && NutrientViewer) {
    NutrientViewer.load({
    container,
    document: "slides.pptx", // The document to load.
    baseUrl: `${window.location.protocol}//${
    window.location.host
    }/${import.meta.env.PUBLIC_URL ?? ""}`,
    });
    }
    cleanup = () => {
    NutrientViewer.unload(container);
    };
    })();
    return cleanup;
    }, []);
    return <div ref={containerRef} style={{ height: "100vh", width: "100vw" }} />;
    }
    export default App;
    1. Start the app and run it in your default browser:
    Terminal window
    # Using Yarn
    yarn dev
    # Using npm
    npm run dev

    A note about fonts

    In client-side web applications for Microsoft Office-to-PDF conversion, Nutrient addresses font licensing constraints through font substitutions, typically replacing unavailable fonts with their 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 even 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 React guides:

    Conclusion

    In this blog post, you learned how to create a React file viewer using Nutrient Web SDK. It enables opening and viewing PDF, image, and Office files directly in the browser using client-side processing. No server is required.

    If you’re looking for a way to render your documents in your web application, then Nutrient Web SDK is a great option. It’s a powerful and flexible library that can help you provide your users with a seamless and enjoyable experience.

    To get started, you can either:

    • Start your free trial to test out the library and see how it works in your application.
    • Launch our demo to see the viewer in action.

    FAQ

    How can I build a React.js file viewer for PDF, image, and Office files?

    You can build a React.js file viewer by using the Nutrient Web SDK, which supports viewing PDFs, images, and Office files directly in the browser without requiring server-side processing.

    What file formats does the Nutrient Web SDK viewer support?

    Nutrient Web SDK supports PDF, PDF/A, DOCX, DOC, DOTX, DOCM, XLSX, XLS, XLSM, PPTX, PPT, PPTM, TIFF, PNG, JPEG, and JPG formats.

    How can I set up a React project to use Nutrient Web SDK?

    Create a new React app using Vite. Then add the Nutrient dependency via npm or yarn. Finally, copy the Nutrient library assets to your project’s public directory.

    Can I manipulate documents within the viewer?

    Yes, you can edit text, manipulate pages, add annotations, and include signatures in the documents displayed within the viewer.

    Is it possible to customize the viewer’s capabilities?

    Yes, you can customize the viewer to meet specific requirements by adding features like Instant synchronization, document assembly, page manipulation, forms, signatures, redaction, and document security.

    Do I need a server to use Nutrient Web SDK in a React app?

    No, Nutrient Web SDK enables client-side processing, so you don’t need a server to render documents in your React app.

    What should I do if a font is missing when converting Office documents?

    Nutrient substitutes missing fonts with similar ones, like replacing Arial with Noto. For exact font matching, you can provide custom fonts by embedding them or setting paths to .ttf files.

    Hulya Masharipov

    Hulya Masharipov

    Technical Writer

    Hulya is a frontend web developer and technical writer at Nutrient who enjoys creating responsive, scalable, and maintainable web experiences. She’s passionate about open source, web accessibility, cybersecurity privacy, and blockchain.

    Explore related topics

    FREE TRIAL Ready to get started?