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. |
useMainThreadDraw |
boolean |
false |
Optional flag whether to use main thread or webwork to render drawing. The true value means using main thread to render drawing. This approach take less memory and take longer time to show rendering results. The false value means using web worker to render drawing. This approach take more memory and take shorter time to show rendering results. |
theme |
'light' | 'dark' |
'dark' |
Initial theme of the CAD viewer. 'light' applies the light theme (ml-theme-light class) and 'dark' applies the dark theme (ml-theme-dark class). The theme can also be toggled at runtime using the status bar theme button. |
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 |
isShowEntityInfo |
boolean |
false |
Controls entity info card visibility |
isShowLanguageSelector |
boolean |
true |
Controls language selector visibility |
isShowMainMenu |
boolean |
true |
Controls main menu 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