CAD Viewer Component

CAD Viewer is a high-performance Vue 3 component for viewing and editing CAD files (DXF, DWG) entirely in the browser without requiring any backend server. It provides a modern user interface, state management, and seamless integration with optimized rendering engines for smooth browser-based CAD workflows with exceptional performance.

Key Features

• High-performance CAD editing and viewing with smooth 60+ FPS rendering
• No backend required - Files are parsed and processed entirely in the browser
• Enhanced data security - Files never leave your device, ensuring complete privacy
• Easy integration - No server setup or backend infrastructure needed for third-party integration
• Modern UI optimized for large CAD file handling
• State management for layers, entities, and settings
• Integration with optimized SVG and THREE.js renderers
• Dialogs, toolbars, and command line interface
• Vue 3 component for embedding high-performance CAD viewers in your own apps

When Should You Choose cad-viewer?

Use cad-viewer if you want a ready-to-use Vue 3 component for viewing and editing CAD files with a modern UI, dialogs, toolbars, and state management. This package is ideal if:

• You want to quickly embed a high-performance CAD viewer/editor into your Vue application with minimal setup.
• You need a solution that handles file loading, rendering, layer/entity management, and user interactions out of the box.
• You want seamless integration with optimized SVG and THREE.js renderers, internationalization, and theming.
• You do not want to build your own UI from scratch.

Recommended for: Most web applications, dashboards, or platforms that need to display CAD files with a polished user interface.

Browser-Only Architecture

This Vue 3 component operates entirely in the browser with no backend dependencies. DWG/DXF files are parsed and processed locally using WebAssembly and JavaScript, providing:

• Zero server requirements - Deploy the component anywhere with just static file hosting
• Complete data privacy - CAD files never leave the user's device
• Instant integration - No complex backend setup or API configuration needed
• Offline capability - Works without internet connectivity once loaded
• Third-party friendly - Easy to embed in any Vue 3 application without server-side concerns

Directory Structure (partial)

• src/app/ – Application entry, store, and main logic
• src/component/ – UI components (dialogs, toolbars, status bar, etc.)
• src/composable/ – Vue composables for state and logic
• src/locale/ – Internationalization files
• src/style/ – Stylesheets
• src/svg/ – SVG assets

Installation

npm install @mlightcad/cad-viewer
Copy

Usage

Please refer to sub-package cad-viewer-example as one example.

Basic Usage

Firstly, add the following dependencies into your package.json.

• @element-plus/icons-vue
• @mlightcad/cad-simple-viewer
• @mlightcad/cad-viewer
• @mlightcad/data-model
• @mlightcad/libredwg-converter
• @mlightcad/libredwg-web
• @vueuse/core
• element-plus
• vue
• vue-i18n

Then create one vue component as follows.

Copy

MlCadViewer Component

The MlCadViewer is the main Vue 3 component that provides a complete CAD viewing and editing interface. It includes toolbars, layer management, command line, status bar, and various dialogs for a full-featured CAD experience.

Component Properties

The MlCadViewer component accepts the following props:

Usage Examples

Basic Usage with Default Settings

Copy

With Custom Locale

Copy

Auto-load File from URL

Copy

Wait for DWG Converter Ready to Use

Copy

Component Features

The MlCadViewer component includes:

• Main Menu - File operations, view controls, and settings
• Toolbars - Drawing tools, zoom controls, and selection tools
• Layer Manager - Layer visibility and property management
• Command Line - AutoCAD-style command input
• Status Bar - Current position, zoom level, and system status
• Dialog Manager - Modal dialogs for various operations
• File Reader - Drag-and-drop file loading
• Entity Info - Detailed information about selected entities
• Language Selector - UI language switching
• Theme Support - Dark/light mode toggle

Event Handling

The component automatically handles various events:

• File Loading - Supports drag-and-drop and URL-based file loading
• Error Messages - Displays user-friendly error messages for failed operations
• Font Loading - Handles missing fonts with appropriate notifications
• System Messages - Shows status updates and operation feedback

Advanced Usage

Please refer to readme of cad-simple-viewer to learn the following advanced usage.

• Register DWG converter to display drawings in DWG format
• Define your own font loader to load fonts from your own server
• Create drawing or modify drawing

Available Exports

Main Component

• MlCADViewer - The main CAD viewer component

Commands

• AcApLayerStateCmd - Layer state command
• AcApLogCmd - Log command
• AcApMissedDataCmd - Missed data command
• AcApPointStyleCmd - Point style command

Components

• MlPointStyleDlg - Point style dialog
• MlReplacementDlg - Replacement dialog
• Various layout and UI components

Composables

• useCommands - Command management
• useCurrentPos - Current position tracking
• useDark - Dark mode support
• useDialogManager - Dialog management
• useFileTypes - File type utilities
• useLayers - Layer management
• useLayouts - Layout management
• useMissedData - Missed data handling
• useSettings - Settings management
• useSystemVars - System variables

Locale

• i18n - Internationalization instance
• Language files for English and Chinese

Styles

• CSS and SCSS files for styling
• Dark mode support
• Element Plus integration

Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build the library
pnpm build

# Preview the build
pnpm preview
Copy

License

MIT