Use Rasterex Canvas with JavaScript and TypeScript.
Use the Viewer SDK lifecycle in a JavaScript or TypeScript project to mount Canvas, wait for readiness and open documents inside your application.
Rasterex technical guide
Create, mount, wait for ready, open, then destroy.
The Viewer SDK is the framework-neutral JavaScript and TypeScript integration path. It creates the Canvas iframe bridge, waits for readiness, opens documents and exposes viewer commands and events.
React, Vue and Angular are documented examples—not prerequisites. Use this lifecycle inside the component or screen lifecycle of the frontend stack you use.
The Viewer SDK gives your app a modern Canvas lifecycle.
Create a Viewer
Create a Viewer in the web application screen that owns the Canvas container.
Mount with a container
Create the Viewer with a DOM container, then await mount()and ready() before document actions.
Use any framework
The documented lifecycle works in plain JavaScript and TypeScript, or inside React, Vue, Angular and other JavaScript frontend frameworks.
Use the documented Viewer lifecycle in your application.
The JavaScript and TypeScript examples differ only in application typing and lifecycle ownership. See the separate NPM quick start for package installation.
Mount Canvas and open a document
01import { createViewer } from "@rasterex/viewer";02 03const viewer = createViewer({ container: "#rx-viewer" });04 05async function start() {06 await viewer.mount();07 await viewer.ready();08 await viewer.documents.open({09 url: "https://files.example.com/sample.pdf",10 displayName: "Sample.pdf",11 });12}13 14start().catch(console.error);15 16// Call viewer.destroy() when the owning screen or component is removed.Typed Viewer SDK lifecycle
01import { createViewer, type RasterexViewer } from "@rasterex/viewer";02 03let viewer: RasterexViewer | null = null;04 05export async function openDocument(container: HTMLElement) {06 viewer = createViewer({ container });07 await viewer.mount();08 await viewer.ready();09 await viewer.documents.open({10 url: "https://files.example.com/sample.pdf",11 displayName: "Sample.pdf",12 });13}14 15export function disposeDocumentViewer() {16 viewer?.destroy();17 viewer = null;18}Validate the lifecycle before building workflows.
- The viewer container has explicit height so the iframe is visible.
- mount() and ready() complete before document or tool commands run.
- displayName includes the document file extension.
- The application destroys the Viewer when its owner screen or component is removed.
- A direct iframe integration follows the dedicated documented PostMessage contract rather than guessed message formats.
JavaScript and TypeScript answers.
Does Rasterex work with JavaScript and TypeScript?
Yes. The Viewer SDK is documented with JavaScript and TypeScript examples. The same viewer lifecycle can be used in framework components or in a plain JavaScript application.
Does Rasterex require React?
No. React is one documented adaptation. The quick start also includes Vue and Angular examples, and the core SDK lifecycle is independent of a specific UI framework.
What is the Viewer SDK lifecycle?
Create the viewer with a container, await mount(), await ready(), then open a document. Destroy the viewer when the screen or component that owns it is removed.
Can I integrate without the NPM SDK?
Yes. Rasterex also documents a direct Canvas iframe and PostMessage integration path. Use its dedicated setup reference for the supported message contract rather than inventing message names or payloads.
Apply the installed Viewer SDK to the workflow your product needs.
Once a document opens reliably, use the workflow guides for annotations, measurement, revision comparison, BIM, issue management and facility management.