JavaScript Document Viewer SDK Quick Start

Install the Rasterex viewer SDK using your package manager of choice.

npm install @rasterex/viewer

This is the smallest complete, runnable application to mount the viewer and open a document. Copy these four files into your workspace to get started immediately:

import { createViewer } from "@rasterex/viewer";
import "./style.css";

const viewer = createViewer({
  container: "#rx-viewer"
});

async function start() {
  await viewer.mount();
  await viewer.ready();
  await viewer.documents.open({
    url: "https://pdfobject.com/pdf/sample.pdf",
    displayName: "sample.pdf"
  });
}

start().catch(console.error);

Verify your minimal integration works correctly:

• A full-page viewer canvas loads automatically inside your browser window.
• The sample PDF document (sample.pdf) is rendered in the center of the canvas area.
• You can scroll, zoom, drag, and navigate the document pages out-of-the-box.

Initialize the minimal document setup in your choice of frontend framework using these optimized integration structures:

Mount the viewer inside a lifecycle useEffect hook and bind it to a DOM container reference. Copy the component code:

import { useEffect, useRef } from "react";
import { createViewer } from "@rasterex/viewer";

export default function App() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const viewer = createViewer({
      container: containerRef.current
    });

    async function start() {
      await viewer.mount();
      await viewer.ready();
      await viewer.documents.open({
        url: "https://pdfobject.com/pdf/sample.pdf",
        displayName: "sample.pdf"
      });
    }

    void start().catch(console.error);

    return () => {
      viewer.destroy();
    };
  }, []);

  return <div ref={containerRef} style={{ width: "100vw", height: "100vh" }} />;
}

Create the viewer instance inside the onMounted lifecycle hook, and call destroy() inside onBeforeUnmount. Copy the Vue script:

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from "vue";
import { createViewer, type RasterexViewer } from "@rasterex/viewer";

const containerRef = ref<HTMLElement | null>(null);
let viewer: RasterexViewer | null = null;

onMounted(async () => {
  if (!containerRef.value) return;

  viewer = createViewer({
    container: containerRef.value
  });

  try {
    await viewer.mount();
    await viewer.ready();
    await viewer.documents.open({
      url: "https://pdfobject.com/pdf/sample.pdf",
      displayName: "sample.pdf"
    });
  } catch (error) {
    console.error(error);
  }
});

onBeforeUnmount(() => {
  viewer?.destroy();
});
</script>

<template>
  <div ref="containerRef" style="width: 100vw; height: 100vh;" />
</template>

Initialize the viewer within ngAfterViewInit using standalone module settings and clean templates. Copy the Angular component files:

import {
  AfterViewInit,
  Component,
  ElementRef,
  OnDestroy,
  ViewChild
} from "@angular/core";
import { createViewer, type RasterexViewer } from "@rasterex/viewer";

@Component({
  selector: "app-rasterex-quick-start",
  standalone: true,
  templateUrl: "./rasterex-quick-start.component.html"
})
export class RasterexQuickStartComponent implements AfterViewInit, OnDestroy {
  @ViewChild("viewerContainer", { static: true })
  viewerContainer!: ElementRef<HTMLElement>;

  private viewer: RasterexViewer | null = null;

  async ngAfterViewInit(): Promise<void> {
    const viewer = createViewer({
      container: this.viewerContainer.nativeElement
    });

    this.viewer = viewer;

    try {
      await viewer.mount();
      await viewer.ready();
      await viewer.documents.open({
        url: "https://pdfobject.com/pdf/sample.pdf",
        displayName: "sample.pdf"
      });
    } catch (error) {
      console.error(error);
    }
  }

  ngOnDestroy(): void {
    this.viewer?.destroy();
  }
}

Once you verify the minimal layout displays drawings, build custom user interactions by subscribing to creation events and control commands:

Listening for Annotation Events: Add an event listener to run code when annotations are drawn: viewer.annotations.on("created", (event) => { console.log(event.guid); }).

Activating Drawing Tools: Control drawing tools programmatically: viewer.tools.set({ group: "annotation", action: "TEXT", enabled: true }).

Resetting Selection State: Clear active tool highlight overlays back to standard navigation mode: viewer.tools.clear().

The SDK routes commands to the Canvas broker interface through the following steps:

• `mount()`: Dynamic HTML iframe generation and DOM injection to set up event bridge channels.
• `ready()`: Internal state handshakes wait for Canvas client readiness before accepting document actions.
• `documents.open({ url, displayName })`: File retrieval broker dispatch that loads documents directly in the iframe.

Watch out for these frequent mistakes when setting up your NPM integration:

• 0px Container Height: If your CSS container lacks an explicit height ruleset, the iframe renders with a height of 0px and is invisible.
• Pre-Ready Commands: Calling .open() or .tools.set() before await ready() resolves will throw error exceptions.
• Component Memory Leaks: In single-page applications, always save event handles and invoke them alongside viewer.destroy() during component destruction.

Explore detailed APIs to customize integration scopes:

• Learn advanced settings in Viewer Setup (or ?s=npm).
• Manage documents using Canvas Session.
• Analyze annotation methods inside Annotation API.