Getting started with React PDF Viewer in Preact

10 Jul 20261 minute 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.

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-react-pdfviewer/styles/material3.css';

Note: keep import order consistent with component dependencies.

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