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.
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:
Recommended for: Most web applications, dashboards, or platforms that need to display CAD files with a polished user interface.
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:
The MlCadViewer component supports multiple ways to load CAD files:
Users can load files directly from their computer:
localFile prop for automatic loading
Automatically load files from URLs:
url prop to automatically load a file when the component mountsurl prop to load different files without remounting the componentsrc/app/ – Application entry, store, and main logicsrc/component/ – UI components (dialogs, toolbars, status bar, etc.)src/composable/ – Vue composables for state and logicsrc/locale/ – Internationalization filessrc/style/ – Stylesheetssrc/svg/ – SVG assetsnpm install @mlightcad/cad-viewer
Please refer to sub-package cad-viewer-example as one example.
Firstly, add the following dependencies into your package.json.
Then create one vue component as follows.
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.
The MlCadViewer component accepts the following props:
| Property | Type | Default | Description |
|---|---|---|---|
locale |
'en' | 'zh' | 'default' |
'default' |
Sets the language for the component interface. Use 'en' for English, 'zh' for Chinese, or 'default' to use the browser's default language. |
url |
string |
undefined |
Optional URL to automatically load a CAD file when the component mounts. The file will be fetched and opened automatically. Note: If not provided, users can still load local files using the main menu "Open" option. |
localFile |
File |
undefined |
Optional local File object to automatically load a CAD file when the component mounts. The file will be read and opened automatically. Note: This takes precedence over the url prop if both are provided. |
background |
number |
undefined |
Background color as 24-bit hexadecimal RGB (e.g., 0x000000 for black, 0x808080 for gray). |
baseUrl |
string |
undefined |
Base URL for loading fonts, templates, and example files. This URL is used by the CAD viewer to load resources like fonts and drawing templates. Note: If not provided, uses the default URL. |
The MlCadViewer reads its UI visibility from the global AcApSettingManager (provided by @mlightcad/cad-simple-viewer). Configure these flags anywhere before rendering the viewer to customize the UI.
| Setting | Type | Default | Description |
|---|---|---|---|
isShowToolbar |
boolean |
true |
Controls toolbar visibility |
isShowCommandLine |
boolean |
true |
Controls command line visibility |
isShowCoordinate |
boolean |
true |
Controls coordinate display visibility |
isShowStats |
boolean |
false |
Controls performance statistics display |
MlCadViewer.AcApSettingManager.instance reference.The baseUrl property allows you to customize where the CAD viewer loads fonts, templates, and example files from. This is particularly useful for:
If no baseUrl is provided, the viewer uses the default URL: https://mlightcad.gitlab.io/cad-data/
When using a custom baseUrl, ensure your server has the following structure:
your-base-url/
├── fonts/ # Font files for text rendering
├── templates/ # Drawing templates (e.g., acadiso.dxf)
└── examples/ # Example CAD files
This configuration will:
https://my-company.com/cad-resources/fonts/https://my-company.com/cad-resources/templates/The MlCadViewer component includes:
The component automatically handles various events:
Please refer to readme of cad-simple-viewer to learn the following advanced usage.
MlCADViewer - The main CAD viewer componentAcApLayerStateCmd - Layer state commandAcApLogCmd - Log commandAcApMissedDataCmd - Missed data commandAcApPointStyleCmd - Point style commandMlPointStyleDlg - Point style dialogMlReplacementDlg - Replacement dialoguseCommands - Command managementuseCurrentPos - Current position trackinguseDark - Dark mode supportuseDialogManager - Dialog managementuseFileTypes - File type utilitiesuseLayers - Layer managementuseLayouts - Layout managementuseMissedData - Missed data handlinguseSettings - Settings managementuseSystemVars - System variablesi18n - Internationalization instance# Install dependencies
pnpm install
# Start development server
pnpm dev
# Build the library
pnpm build
# Preview the build
pnpm preview
MIT