Skip to content

Integrate Simple CAD Viewer

Jump to bottom
mlight lee edited this page Nov 7, 2025 · 1 revision

cad-simple-viewer provides the high-performance core components of a CAD viewer such as document management, command handling, and collaboration between the UI and rendering engines. It's designed for optimal performance when handling large CAD files.

This module doesn't depend on any UI framework and doesn't provide any UI except canvas. If you want to integrate a high-performance CAD viewer into a web application with your own UI, this module is the correct choice.

Key Features

  • Document management optimized for large files
  • Efficient command stack and undo/redo operations
  • Optimized integration with rendering engines
  • Performance-focused settings and context management
  • Framework-agnostic design for maximum flexibility

When Should You Choose cad-simple-viewer?

Use cad-simple-viewer if you need core CAD logic only (document management, command stack, rendering engine integration) without any UI framework dependencies. This package is ideal if:

  • You want to build your own custom UI or integrate CAD functionality into a non-Vue or non-web environment.
  • You require maximum flexibility and performance for handling large CAD files, and plan to connect the logic to your own rendering or UI layer.
  • You want a framework-agnostic solution that provides only the essential CAD operations and canvas rendering.

Recommended for: Custom integrations, headless CAD processing, or advanced users building highly tailored CAD solutions.

Installation

npm install @mlightcad/cad-simple-viewer

Usage

Please refer to cad-simple-viewer-example on basic usage and advanced usage.

While cad-simple-viewer doesn't support saving drawings to DWG/DXF files, it provides comprehensive support for modifying drawings in real-time. You can add, edit, and delete entities within the drawing, and the viewer will automatically update to reflect these changes.

When you modify entities, you're working directly with the underlying drawing database. The viewer automatically detects these changes and updates the display accordingly. This real-time synchronization ensures that:

  • All modifications are immediately visible
  • The command stack properly tracks changes for undo/redo operations. This will be implemented soon.

This capability makes cad-simple-viewer suitable for applications that need to not only display CAD files but also allow users to interact with and modify the drawing content.

Important Note: The usage patterns in cad-simple-viewer are very similar to AutoCAD RealDWG. If you're familiar with AutoCAD RealDWG development, you'll find the API structure and workflow nearly identical. The main difference is that we use the realdwg-web API instead of the native RealDWG libraries.

In cad-simple-viewer-example it demonstrates how to create one drawing with realdwg-web API.

Available Exports

Core Classes

  • AcApContext - Main application context
  • AcApDocManager - Document management
  • AcApDocument - Individual document handling
  • AcApSettingManager - Settings management

Commands

  • AcApOpenCmd - Open file command
  • AcApZoomCmd - Zoom command
  • AcApPanCmd - Pan command
  • AcApSelectCmd - Selection command
  • AcApConvertToSvgCmd - SVG conversion command

Editor Components

  • AcEditor - Main editor class
  • AcEdCommandStack - Command stack management
  • AcEdSelectionSet - Selection handling
  • AcEdInputPoint - Input point management

View Components

  • AcTrScene - Scene management
  • AcTrLayoutView - Layout view handling
  • AcTrView2d - 2D view management

Role in MLightCAD

This package acts as the core logic layer, connecting the frontend UI with the rendering engines and managing all document-related operations.

Clone this wiki locally