Getting Started with TypeScript PDF Viewer (Server-Backed)

24 Jun 20265 minutes to read

This section explains how to create and run the TypeScript PDF Viewer in server-backed mode. In this mode, PDF rendering and processing are performed on a server-side web service, while the TypeScript application acts as the client.

NOTE

Starting with the 2026 Vol 2 main release (June 2026), no new features will be added to the Server PDF Viewer, as almost all of the PDF Viewer functionalities are now available in the Standalone PDF Viewer. If you are currently using the server-backed PDF Viewer, please refer to the migration documentation to transition to the Standalone PDF Viewer.

Prerequisites

To get started, ensure the following software is installed on your machine:

Create a TypeScript application

Create a simple TypeScript application using the Essential® JS 2 quickstart seed repository.

This application is integrated with the webpack.config.js configuration and uses the latest version of the webpack-cli. For more information about webpack and its features, refer to the webpack documentation.

Step 1: Open the command prompt from the required directory and clone the quickstart project from GitHub.

git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart

Step 2: Navigate to the ej2-quickstart folder.

cd ej2-quickstart

Step 3: By default, the ej2-quickstart repository is preconfigured with the @syncfusion/ej2 package in ~/package.json. This package installs all Syncfusion Essential JS 2 components, including the PDF Viewer and other EJ2 controls.

To install only the PDF Viewer component, replace the dependencies with @syncfusion/ej2-pdfviewer in package.json:

"@syncfusion/ej2-pdfviewer": "*"

Step 4: Install the dependent npm packages.

npm install

Add CSS references

Add the required Syncfusion styles to src/styles/styles.css:

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

NOTE

Refer to the Themes topic to learn more about built-in themes and different ways to refer to themes in a TypeScript project.

Add the PDF Viewer component

To load and display a PDF in server-backed mode, configure the PDF Viewer with the serviceUrl property.

Update src/app.ts as shown below:

import { PdfViewer, Toolbar, Magnification, 
         Navigation, Annotation, LinkAnnotation,
         ThumbnailView, BookmarkView, TextSelection, 
         TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation,
               Annotation, LinkAnnotation, ThumbnailView,
               BookmarkView, TextSelection, TextSearch,
               FormFields, FormDesigner);

const pdfviewer: PdfViewer = new PdfViewer({
  // Specifies the URL of the server-side PDF Viewer web service
  serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'
});

pdfviewer.appendTo('#PdfViewer');

// Load a PDF document through the server
pdfviewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', '');

Add a container element in index.html:

<div id="PdfViewer" style="height: 640px"></div>

Note: The Web API service URL shown above is provided for evaluation only. For production, host your own PDF Viewer web service.

Run the application

Run the following command to start the TypeScript application:

npm start

The application will connect to the configured PDF Viewer web service and render the document in the browser. The image below shows how the PDF Viewer is rendered in the browser:

Rendered PDF Viewer in browser

View Sample in GitHub

Run the PDF Viewer web service

To host your own PDF Viewer web service:

  1. Download the web service sample from GitHub:
    GitHub Web service sample
  2. Navigate to the appropriate folder based on your .NET version:
  3. Restore all project dependencies using the following command:
dotnet restore
  1. Run the Service Using the Following Code:
dotnet run

The service will run at:

https://localhost:7255/pdfviewer

Configure this URL in the serviceUrl property of the PDF Viewer.

Important: In server-backed mode, do not include pdfium.js or pdfium.wasm. All rendering is performed on the server.

NOTE

For hosting the web service on Linux, include SkiaSharp.NativeAssets.Linux. For AWS environments, use the following packages:

Amazon Web Services (AWS) NuGet package name
AWS Lambda SkiaSharp.NativeAssets.Linux
AWS Elastic Beanstalk SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1

NOTE

Looking for the full JavaScript PDF Viewer component overview, features, pricing, and documentation? Visit the JavaScript PDF Viewer page.

See also