---
title: Overview
position: 1
seo_title: Overview of the PDFViewer Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  PDFViewer component and check out the extensive set of available options in
  its live demo.
---
## PDFViewer Overview

The PDFViewer is a valuable user interface (UI) component that allows you to seamlessly present PDF documents on your website or in your application. With this component, users can conveniently access and view PDF files directly, without the need for an external PDF reader. 

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/pdfviewer"},{"text":"Blazor","url":"https://demos.telerik.com/blazor-ui/pdfviewer/overview"},{"text":"jQuery","url":"https://demos.telerik.com/kendo-ui/pdfviewer/index"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/pdfviewer"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/pdfviewer"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/pdfviewer"}],"demo":"components/pdf-viewer/overview"}'></LiveDemo>

### Anatomy

The anatomy of the PDFViewer summarizes the visual and functional elements of the component. The main elements include a toolbar and a scrollable canvas area for displaying the document pages. The toolbar contains a variety of navigation and action tools that are sorted into semantic groups and visually separated by spacer elements.

The next image shows the anatomy of a PDFViewer and includes the following elements:

<BlueprintImage data='{"description":"","labels":[{"text":"Pager tools"},{"text":"Spacer element"},{"text":"Zoom and Selection tools"},{"text":"Action button tools"},{"text":"Toolbar"},{"text":"Canvas"},{"text":"Page"}]}'>![A Telerik and Kendo UI PDFViewer component](images/components-pdfviewer-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI PDFViewer component")</BlueprintImage>

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular PDFViewer","description":"Find more information about the Kendo UI for Angular PDFViewer in the official product documentation of the component.","url":"http://www.telerik.com/kendo-angular-ui/components/pdfviewer/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor PDFViewer","description":"Find more information about the Telerik UI for Blazor PDFViewer in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/pdfviewer/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery PDFViewer","description":"Find more information about the Kendo UI for jQuery PDFViewer in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/pdfviewer/overview"}'>![Kendo UI for jQuery logo.](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact PDFViewer","description":"Find more information about the KendoReact PDFViewer in the official product documentation of the component.","url":"http://www.telerik.com/kendo-react-ui/components/pdfviewer/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core PDFViewer","description":"Find more information about the Telerik UI for ASP.NET Core PDFViewer component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/pdf/pdfviewer/overview"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC PDFViewer","description":"Find more information about the Telerik UI for ASP.NET MVC PDFViewer component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/pdf/pdfviewer/overview"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>

</Wrap>