Getting Started with React PDF Viewer in Preact

25 Aug 20262 minutes to read

This page is a short, task-focused overview for integrating the React PDF Viewer into a Preact app. Use the short sections below for quick tasks; a full example is provided below as an optional reference.

What is Preact?

Preact is a lightweight React alternative that preserves the React-compatible API. Use Preact when you want smaller bundle size while reusing the React viewer components.

Setup

How‑to: Create a Preact project and install the Syncfusion package.

npm init preact   # choose JavaScript or TypeScript as needed
cd my-project
npm install @syncfusion/ej2-react-pdfviewer --save
# or
yarn init preact
yarn add @syncfusion/ej2-react-pdfviewer

Import CSS

How‑to: Add the required Syncfusion theme and component CSS to src/style.css.

Themes for PDF Viewer can be applied using CSS or SASS files from the npm theme packages, CDN, CRG, or Theme Studio. For more information, see the themes documentation.

This guide uses the Tailwind 3 theme as an example. To install the Tailwind 3 theme package, use the following command:

npm install @syncfusion/ej2-tailwind3-theme
@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css';

The index.css file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, and SplitButtons separately.

Add component

How‑to: Render a minimal PdfViewerComponent in src/index.js.

Prefer a single Add component example using the CDN resourceUrl (no server required). Replace the CDN version as needed.

import { render } from 'preact';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
import './style.css';

function App() {
  return (
    <PdfViewerComponent
      id="container"
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib"
      style={{ height: '640px' }}>
      <Inject services={[Toolbar, Magnification, Navigation, Annotation]} />
    </PdfViewerComponent>
  );
}

render(<App />, document.getElementById('app'));

See also