How to embed a DWG and CAD viewer in a web application.
A verified technical guide for software teams that need CAD viewing inside their own product—connecting the host application, SDK bridge, Canvas and supporting services.
Rasterex technical guide
What are you actually embedding?
Your application remains the product. It mounts the Rasterex SDK into a host container; the SDK creates a Canvas iframe bridge; Canvas connects to the Backend Engine and Rasterex Backend services configured for the environment.
The implementation lifecycle is therefore concrete: mount the SDK, wait for the Canvas readiness handshake, open a document with a URL and display name, send viewer commands from a host-owned action, and receive events back into the workflow your users already use.
In short: an embedded CAD viewer keeps DWG and other technical documents inside the web application where users already manage projects, records and permissions. For the full product context, see the CAD viewer SDK and self-hosted web viewer pages.
The four layers your implementation needs to connect.
Host application
Your product owns identity, authorization, navigation, buttons, workflow state and the business data around a drawing. Rasterex does not replace the surrounding application.
Viewer SDK and Canvas
The @rasterex/viewer SDK mounts an iframe-based Canvas bridge in a host container. It waits for Canvas readiness before opening documents or sending commands, then returns events to the host application.
Engine and Backend services
Canvas is configured with separate service URLs for the Backend Engine and Rasterex Backend. This is the service boundary that must be planned alongside the host application's document and data model.
Document and workflow data
Define where drawings are stored, how the host supplies their URLs, and where the host persists workflow records. Viewer events should connect to the existing application model—not create a disconnected drawing silo.
Start with the documented lifecycle.
This is the smallest useful CAD viewer integration: create the viewer in the host container, wait for Canvas, open a host-provided document URL, and clean up when the screen closes.
Install the Viewer SDK
$ npm install @rasterex/viewerMount Canvas and open a document in React
01import { useEffect, useRef } from "react";02import { createViewer } from "@rasterex/viewer";03 04type CadViewerProps = {05 documentUrl: string;06 displayName: string;07 cacheId: string;08 mime: string;09};10 11export function CadViewer({ documentUrl, displayName, cacheId, mime }: CadViewerProps) {12 const containerRef = useRef<HTMLDivElement>(null);13 14 useEffect(() => {15 if (!containerRef.current) return;16 17 const viewer = createViewer({ container: containerRef.current });18 19 async function start() {20 await viewer.mount();21 await viewer.ready();22 await viewer.documents.open({23 url: documentUrl,24 displayName,25 cacheId,26 mime,27 });28 }29 30 void start().catch(console.error);31 return () => viewer.destroy();32 }, [documentUrl, displayName, cacheId, mime]);33 34 return <div ref={containerRef} style={{ height: 640 }} />;35}This is a complete React component adapted from the documented SDK lifecycle. The host application resolves documentUrl displayName cacheId and mime from its own document and access-control flow. Continue in the Rasterex SDK Quick Start for the current API reference and next integration steps.
Give Canvas the context to open efficiently.
displayName
The name Canvas shows in file tabs. Include the file extension, such as Project Plan.pdf.
cacheId
A stable cache key. Canvas can use it to find previously generated viewable assets and avoid reprocessing the same document on later loads.
mime
The explicit document MIME type, which helps Canvas select the appropriate file handler. Supply the MIME value your document service provides.
Avoid the documented setup traps.
Give the container height
A container with zero height makes the Canvas iframe invisible. The React example sets a visible height explicitly.
Wait for ready()
Do not open documents or send tool commands until the Canvas readiness handshake has completed.
Clean up on unmount
Destroy the viewer and unsubscribe any event listeners when a single-page-app screen is removed.
These checks come from the SDK Quick Start and should be repeated in every framework implementation before the workflow is expanded.
What Rasterex documents today.
These service and browser boundaries are documented by Rasterex. They are the technical baseline to validate before you expand a proof of concept into a broader workflow.
- Canvas is installed as an IIS-hosted web application and configured through rxconfig.js.
- Canvas configuration identifies a Backend Engine URL and a Rasterex Backend URL.
- The SDK creates the iframe bridge during mount(), then ready() waits for the Canvas handshake.
- documents.open({ url, displayName }) dispatches a document-loading request to the Canvas iframe.
- The SDK exposes commands and events for document, annotation, measurement, CAD, compare and collaboration workflows.
Prove one real workflow end to end.
- 01Install and verify the Canvas, Backend Engine and Rasterex Backend environments with the team responsible for infrastructure.
- 02Mount the Viewer SDK in one real host-product screen and wait for Canvas readiness.
- 03Open a representative DWG, DXF, DGN or PLT document through the host application's existing document URL flow.
- 04Connect one host-owned action—such as layer visibility, markup, measurement or revision comparison—to the relevant viewer command.
- 05Receive the resulting event in the host application and save or display it in the existing workflow model.
- 06Destroy the viewer when the host screen unmounts, then verify the same workflow with real access controls and representative files.
Use the Canvas installation reference to check IIS hosting and the Canvas, Backend Engine and Rasterex Backend configuration before treating the POC as complete.
Answers for technical evaluators.
What is an embedded CAD viewer?
An embedded CAD viewer lets users open and work with drawings inside an existing web application instead of leaving that application for a separate viewer. The host application retains its own interface, permissions, workflow and business data.
How does Rasterex embed a DWG and CAD viewer in a web application?
The host application mounts the @rasterex/viewer SDK in a container. The SDK creates a Canvas iframe bridge, waits for the Canvas readiness handshake, opens a document using its URL and display name, and exchanges viewer commands and events with the host application.
Can a host application keep its own UI and permissions?
Yes. The host application owns its identity, authorization, navigation, buttons, workflow state and business data. Rasterex provides the technical-document viewing layer inside that application.
What services support a Rasterex Canvas deployment?
Canvas is an IIS-hosted web application configured through rxconfig.js. Its configuration identifies separate URLs for the Backend Engine and Rasterex Backend services.
Can I provide a document cache key and MIME type when opening a file?
Yes. documents.open accepts cacheId as a stable cache key and mime as the explicit document MIME type. displayName is the label Canvas shows in its file tabs and must include the file extension.
Turn the evaluation into a real workflow.
The next useful step is not a generic proof of concept. Choose one drawing workflow from your product, load a representative document, and verify the events and controls your team needs.
Continue with the viewer capabilities, supported file formats and the document-management use case to define that workflow.