NPM Examples

Start with Rasterex Viewer Examples to use a runnable NPM integration instead of assembling a project from individual snippets.

The examples are maintained as runnable applications and are useful when you want to compare setup, viewer initialization, file loading, event handling, and component workflows in context.

• Start with the example closest to your framework and then copy only the viewer setup and workflow code that applies to your application.
• Use the component documentation in this site for the detailed API contract behind each example workflow.

Most NPM examples follow the same high-level setup: install the viewer package, create a viewer container, initialize the viewer from client-side code, open a file, and subscribe to events needed by your UI.

npm install @rasterex/viewer

Use the examples when you need a complete reference for project wiring, lifecycle handling, and practical UI flows.

• New application setup: copy the project structure and viewer initialization pattern.
• Framework integration: compare how the viewer is mounted and cleaned up in the selected framework.
• Feature workflows: review working file, annotation, measurement, calibration, PDF, CAD, and collaboration flows.
• Troubleshooting: compare your setup against a known working application.

Start with the problem you are trying to solve. Each solution page explains the verified workflow, links to the relevant component references, and keeps NPM SDK guidance separate from the PostMessage variant.

The workflow source is maintained in Rasterex workflow examples. The current repository provides source links for the reference applications; live-demo and StackBlitz URLs are listed only after those deployments exist.

Use the source README and application code to inspect the host UI sequence. These examples use the PostMessage workflow repository, so use the solution page and the NPM component references when implementing the NPM SDK contract.

• Compare drawing revisions source — solution guide.
• Compare PDF and DWG versions source — solution guide.
• Embed comparison in an ERP source — solution guide.
• Measure and take off quantities source — solution guide.
• Save and reload markups source — solution guide.