Meet the Vue 3 Component That Opens AutoCAD DWG/DXF Files — Right in Your Browser

If you ask most frontend developers, they’ll tell you AutoCAD DWG/DXF files either need desktop software or a backend server to crack them open. Well… not anymore.

With **MlCadViewer*, you can view and* edit CAD files directly in your browser using Vue 3—no backend, no servers, no fuss. Just you, your code, and the magic of the web.

💡 Try It Live: Live Demo 📚 Read the Docs: API Docs

What Is It?

MlCadViewer is a high-performance CAD component built on Vue 3, capable of handling AutoCAD DWG and DXF files completely in the browser. It ships with a modern UI, state management, rendering engines, i18n, theme switching—you name it.

Best part? You can drop it into your app with one line of code.

Key Features:

• Zero backend dependency — All DWG/DXF parsing and rendering happens locally
• Smooth high-FPS rendering — Even massive drawings stay above 60 FPS
• Customizable UI — Toggle toolbars, command line, coordinate display, and performance stats
• Privacy-safe — Files never leave your machine

Quick Start

please see one full example in this repo.

Install:

npm install @mlightcad/cad-viewer

Minimal usage:

<template>
  <MlCadViewer canvas-id="canvas" locale="zh" url="example.dwg" />
</template>
<script setup lang="ts">
import { MlCadViewer } from '@mlightcad/cad-viewer'
</script>

Customizing the UI

UI behavior comes from the global AcApSettingManager. Change settings before loading the component:

import { AcApSettingManager } from '@mlightcad/cad-simple-viewer'

// Hide the command line
AcApSettingManager.instance.isShowCommandLine = false
// Hide the toolbar
// AcApSettingManager.instance.isShowToolbar = false

Feature Highlights

• Main menu — File ops, view control, settings
• Toolbar — Drawing, zoom, selection tools
• Layer management — Visibility and properties
• Command line — AutoCAD-style command input
• Status bar — Coordinates, zoom level, system status
• Multi-language — Switch between Chinese & English
• Theme switching — Dark and light modes

How to Use It

On Desktop

• Select: Left-click an entity
• Zoom: Mouse wheel scroll
• Pan: Hold middle mouse button + drag

On Tablet/Mobile

• Select: Tap an entity
• Zoom: Pinch with two fingers
• Pan: Drag with two fingers

Under the Hood

MlCadViewer (aka CAD-Viewer) is a high-performance, browser-only DWG/DXF viewer and editor. Its modular, extensible architecture is designed to load, parse, render, and interact with multiple CAD data formats—entirely on the client. The system is organized into three core layers:

This layered approach keeps performance high, latency low, and extensibility strong across different drawing sizes, rendering demands, and deployment environments.

Model Layer

• Unified CAD data model via [@mlightcad/data-model](https://gitlab.com/mlightcad/realdwg-web) in **realdwg-web** to represent parsed CAD: geometry, layers, view params, etc.
• A common conversion interface defined by [AcDbDatabaseConverter](https://gitlab.com/mlightcad/realdwg-web/-/blob/main/packages/data-model/src/database/AcDbDatabaseConverter.ts), allowing multiple converters to transform source CAD into the unified model.
• DWG parsing through [@mlightcad/libredwg-converter](https://gitlab.com/mlightcad/realdwg-web) (in **realdwg-web**) → outputs the unified model.
• DXF parsing via [@mlightcad/dxf-json](https://github.com/mlight-lee/dxf-json%60) → also maps to the unified model.
• Geometry/math utilities provided by [@mlightcad/geometry-engine](https://gitlab.com/mlightcad/realdwg-web) (in **realdwg-web**) for points, lines, polylines, splines, circles/arcs, ellipses, plus vectors/matrices and other numeric kernels.

Why define AcDbDatabaseConverter? Because off-the-shelf DWG/DXF parsers are often incomplete. We built @mlightcad/libredwg-converter and @mlightcad/dxf-json on open code to fill gaps today, while keeping the door open for best-in-class engines tomorrow. For example, ODA Drawings is widely regarded as the most complete DWG/DXF toolkit. With an ODA license and source access, you could compile a WebAssembly module and implement another converter to produce the same @mlightcad/data-model. (If someone’s willing to share ODA source access, a dedicated ODA-based converter can absolutely be built.)

Rendering Layer

• A unified rendering interface via [@mlightcad/graphic-interface](https://gitlab.com/mlightcad/realdwg-web) to describe how each graphic primitive gets drawn.
• A Three.js backend, [@mlightcad/three-renderer](https://gitlab.com/mlightcad/cad-viewer), implementing that interface to render all entity types in WebGL.
• An SVG backend, [@mlightcad/svg-renderer](https://gitlab.com/mlightcad/cad-viewer), to output drawings as SVG when vector exports or static rendering are desired.

View Layer

• Core viewer logic in [@mlightcad/cad-simple-viewer](https://gitlab.com/mlightcad/cad-viewer): document management, command processing, and coordination between the UI and the rendering engine. It’s framework-agnostic and UI-free (aside from a canvas).
• The full Vue 3 UI in [@mlightcad/cad-viewer](https://gitlab.com/mlightcad/cad-viewer): menus, toolbar, command line, status bar, dark/light themes, all wrapped as a drop-in Vue component for easy integration.

Rendering Engine Challenges

Rendering DWG/DXF well in the browser involves a few non-trivial puzzles:

• High-performance drawing for scenes with many primitives
• Faithful AutoCAD-style text rendering (MText + SHX)
• Accurate linetypes and hatches

1) High-Performance Rendering

Large drawings live or die by draw call counts. The trick is to batch points, lines, and meshes wherever possible.

• Three.js offers [BatchedMesh](https://threejs.org/docs/index.html?q=Mesh#api/en/objects/BatchedMesh) for triangle batching, which helped—but didn’t cover points/lines and didn’t fully match our needs for faces either.
• We implemented a set of custom batching classes (points, lines, faces) modeled after BatchedMesh but tuned for CAD workloads. You can explore the implementation here:
• Source: [packages/three-renderer/src/batch](https://gitlab.com/mlightcad/cad-viewer/-/tree/main/packages/three-renderer/src/batch)

2) Text Rendering (MText + SHX)

AutoCAD’s rich text entity is [MText](https://ezdxf.mozman.at/docs/dxfinternals/entities/mtext.html), and it often relies on SHX fonts—vector fonts drawn as line strokes for speed (Autodesk docs on SHX). To reproduce this faithfully:

• Parse MText: We created a dedicated MText parser: [@mlightcad/mtext-parser](https://gitlab.com/mlightcad/mtext-parser).
• Parse SHX fonts: We implemented an SHX font parser: [@mlightcad/shx-parser](https://gitlab.com/mlightcad/shx-parser).
• Render MText efficiently: With both parsers in place, we render text via [@mlightcad/mtext-renderer](https://gitlab.com/mlightcad/mtext-renderer). Because Chinese font files can be quite large, we cache parsed fonts in IndexedDB to speed up subsequent loads—once fetched and parsed, later drawings using the same font render noticeably faster.

For debugging and iteration, we built a THREE.js-based rich text editor:

• Repo: [mtext-editor](https://gitlab.com/mlightcad/mtext-editor)

There’s still no widely used open-source THREE.js rich-text editor — so if you need one, this editor can slot in as the text subsystem of your rendering engine.

3) Linetypes & Hatches

AutoCAD supports custom linetypes and hatching. We’ve implemented many of these effects using Three.js ShaderMaterial — patterns, dashes, fills, and more — while continuing to expand coverage.

• Current limitation: linetypes that embed text are not supported yet.
• Code tour: [packages/three-renderer/src/style](https://gitlab.com/mlightcad/cad-viewer/-/tree/main/packages/three-renderer/src/style)

Wrapping Up

Want to dive deeper? 👉 Explore the project here:

• Github：https://github.com/mlightcad/cad-viewer
• Gitlab：https://gitlab.com/mlightcad/cad-viewer

Found a bug or have a feature request? Open an issue on

• Gitlab Issue Page
• Github Issue Page

Bonus points if you attach a sample drawing so we can reproduce it.