HTML5/JavaScript Document Viewer SDK Technology

The LEADTOOLS Document Viewer is an OEM-ready, zero-footprint document-viewing solution for HTML5/JavaScript front ends with a Microsoft .NET (IIS) or Java (Linux/Apache) hosted back end. Developers can create robust, fully featured applications with rich document-viewing features, including text search, annotation, memory-efficient paging, inertial scrolling, and vector display. With only a few lines of code, the LEADTOOLS Document Viewer can be added to any project. It can be used to view raster and document formats alike, making it ideal for Enterprise Content Management (ECM), document retrieval, and document normalization solutions.

The LEADTOOLS Document Viewer is also available as a .NET control for WinForms and WPF.

Overview of LEADTOOLS HTML5/JavaScript Document Viewer SDK Technology

  • View document, vector, and raster formats in one viewer:
  • Flexible, secure, and stable file management
    • Utilize a completely diskless cache to satisfy the most stringent security and privacy requirements
    • Integrate with third-party cloud storage including SharePoint, OneDrive, and Google Drive™
  • Document-specific interactive tools:
  • View and edit complex document objects such as:
    • Annotations (LEAD proprietary, Adobe PDF native, and IBM FileNet P8 and Daeja)
    • Hyperlinks
    • Unicode text, including Japanese, Chinese, Arabic, and Hebrew
    • Fonts and styles
    • Embedded images with compression
    • Table of Contents
    • Metadata
    • Bookmarks
  • Virtual Document Composer
    • Create documents on the fly from any number of pages in any order from multiple source documents
    • Modify virtual documents programmatically or by hand using drag-and-drop interface
    • Save virtual documents to the server and share between multiple users
    • Export virtual documents to actual document formats such as PDF or TIFF
  • Document Comparer
    • Quickly find visual differences between two or more documents with side-by-side or overlay comparison
    • Synchronize the scrolling of two or more document viewers
  • Fully customizable user interface uses generic parent containers (e.g., Control & DIV) to enable easy integration of core Document Viewer features into any UI library and platform
  • Standalone, ready-to-run viewing solution is perfect for rapid customization and integration into existing document management systems, workflows, and hosting environments
  • Maximize performance and conserve system resources through efficient large-document paging and thumbnail browsing with configurable lazy-loading
  • Keep track of changes with Document History Tracking
  • Robust configuration options and functions to manage local, global, and web cache including examples for SQL Server, Azure, and Ehcache
  • Print documents with ability to set paper size, visible printable area, and DPI
  • Seamlessly integrates with the LEADTOOLS Document Converter technology to convert any file
  • Ideal viewer control for ASP.NET MVC applications
  • Can be hosted in IIS using web services and Linux using Java services
  • Easy to use and customizable viewer programming interface available for .NET (C# & VB) and HTML5/JavaScript

Create the HTML5/JavaScript Zero-footprint Document Viewer with less than 20 Lines of Code

First, create your layout with generic containers:

<!-- View -->
<div id="viewer" style="height: 800px;width: 900px; float:left;"></div>
<!-- Thumbnails -->
<div id="thumbnails" style="height: 800px;width: 200px; float: left;"></div>

Then, initialize your viewer and load a PDF

window.onload = function () {
    //We need to point the service path 
    lt.Documents.DocumentFactory.servicePath = "WebApp";
    lt.Documents.DocumentFactory.serviceApiPath = "api";
    var createOptions = new lt.Documents.UI.DocumentViewerCreateOptions();
    createOptions.viewContainer = document.getElementById("viewer");
    createOptions.thumbnailsContainer = document.getElementById("thumbnails");
    //When using elements we have to style them ourself, with it set to false we use a canvas instead.
    createOptions.thumbnailsCreateOptions.useElements = false;
    createOptions.viewCreateOptions.useElements = false;
    var documentViewer = lt.Documents.UI.DocumentViewerFactory.createDocumentViewer(createOptions);
    documentViewer.view.preferredItemType = lt.Documents.UI.DocumentViewerItemType.svg;;
    lt.Documents.DocumentFactory.loadFromUri("", null)
        .done(function (document) {

Technology Related to HTML5/JavaScript Document Viewer

Start Coding with LEADTOOLS

Download the Full Evaluation

The Full Evaluation Download includes all LEADTOOLS Document, Medical, Imaging, and Vector technologies for all development and target platforms. Get everything LEADTOOLS all in one convenient download.

Download Projects using NuGet

LEADTOOLS provides NuGet packages for .NET Framework, .NET Core, UWP, and Xamarin development. Download projects that reference our NuGets and start coding right away.

Note for Linux customers:
The LEADTOOLS Evaluation for Linux download includes an Eclipse project with setup and build instructions. Alternatively, you can contact support to request a Linux-based virtual-machine image with the LEADTOOLS Document Viewer client and service already set up in Eclipse/Apache and ready to evaluate.

Supported Development Platforms for HTML5/JavaScript Document Viewer

Code Tips That use HTML5/JavaScript Document Viewer

Documentation Links for HTML5/JavaScript Document Viewer

White Papers Written About HTML5/JavaScript Document Viewer

  • Converting and Viewing Documents with LEADTOOLS

    Convert a Word document into a PDF file. View the PDF, annotate it, and then save it. This process sounds simple enough, right? What if the original document was a TIFF file? Is it just as easy to convert a TIFF to a PDF and then view, annotate, and save the new file? What if you have ten different file types to view, annotate, and save, and what if those different files are both raster images and vector documents? And what if your job requirement specified that you can only do this task in one application, using one viewer control? This commonly requested task no longer sounds so simple. The new Document Converter and Document Viewer found in LEADTOOLS Version 19 not only make it possible to view and annotate raster and vector based file formats in the same control, they make it easy.

  • End-to-End eDiscovery with LEADTOOLS Document Imaging

    When it comes to change, the desire for efficiency is surely at or near the top of the list of reasons. Some processes and industries are harder to change, especially those that have been around for a long time. Court systems in many countries are one of the oldest and most well established processes to ensure all-around fairness, even if it must sacrifice expediency. Thankfully, the legal industry has taken major strides towards adapting to the digital age with the evolution of eDiscovery and document imaging.

Demo Applications that Include HTML5/JavaScript Document Viewer

HTML5/JavaScript Document Viewer

Use the LEADTOOLS Document Viewer in an HTML5/JavaScript application.

  • Load a document from local disk and url
  • Draw annotations on the document
  • Use thumbnail viewer
  • Interactive zooming/panning

HTML5/JavaScript Document Composer

Interactively create, organize, and export a document from the pages of multiple files within the Document Viewer.

HTML5/JavaScript Document Comparer

Compare two documents side-by-side split screen view or with overlay within the Document Viewer.

Screenshots of HTML5/JavaScript Document Viewer

HTML5/JavaScript Document Viewer

HTML5/JavaScript Document Viewer

HTML5/JavaScript Document Composer

HTML5/JavaScript Document Composer

Videos of HTML5/JavaScript Document Viewer

Document Converter and Document Viewer

In this video, we will explore the LEADTOOLS Document Converter and Document Viewer, which were introduced in LEADTOOLS Version 19. This unique framework includes .NET and HTML5/JavaScript development libraries. It is perfect for developing a unified solution for converting, viewing, editing, searching and annotating document and image file formats.

NOTE: Since the release of this video, this LEADTOOLS feature has been updated. Some portions of this video may not reflect the most recent version of LEADTOOLS. If you have questions regarding this video or LEADTOOLS, please contact

LEADTOOLS SDK Products that Include HTML5/JavaScript Document Viewer

LEADTOOLS Document Imaging Suite v20

The LEADTOOLS Document Imaging Suite SDK is a comprehensive collection of LEADTOOLS SDK features designed to build end-to-end document imaging solutions that require OCR, MICR, OMR, ICR, barcode, forms recognition and processing, PDF, HTML5 Zero-footprint viewing, conversion, print, capture, archival, annotation, and image viewing functionality. This powerful set of tools utilizes LEAD's award-winning image processing technology to intelligently identify document features that can be used to recognize and extract data from any type of scanned or faxed form image.