CAD-Viewer: A High-Performance, Browser-Only DWG/DXF Viewer for the Future of Web CAD

In the modern web ecosystem, design workflows are rapidly moving from native applications to the cloud. But CAD (Computer-Aided Design) — especially AutoCAD DWG and DXF file viewing — remains one of the most stubborn frontiers in this transition. Most CAD viewers either rely on heavyweight native applications, require server-side rendering, or sacrifice performance and privacy.

What if you could view and interact with AutoCAD DWG/DXF files directly in the browser — no backend, no installation, and full offline support?

Meet CAD-Viewer (Github or Gitlab): a high-performance, extensible, and privacy-friendly Web-based CAD viewer designed to run entirely in the browser using WebAssembly and WebGL. Whether you’re building a professional engineering platform, integrating design visualization into a CMS, or simply need a secure offline viewer, CAD-Viewer gives you the tools to do it — without compromise.

CAD-Viewer Screenshot

🌐 Why Browser-Based CAD Matters

Traditional CAD software is powerful, but it’s also bulky, expensive, and tethered to the desktop. For years, engineering and architecture teams have had no choice but to install proprietary applications or set up server-rendering backends to view files — just to check a drawing.

CAD-Viewer flips this paradigm. It loads, parses, and renders DWG and DXF files completely in the browser:

• ✅ No server needed
• ✅ No file upload (files never leave the user’s device)
• ✅ No plugin or desktop installation
• ✅ Runs even on static hosting like GitHub Pages or Vercel

This approach opens up new possibilities in:

• Privacy-sensitive industries (defense, government, enterprise)
• Offline workflows (construction sites, field inspection)
• Low-maintenance platforms (CMS, SaaS, web portals)
• Custom CAD-driven experiences (education, simulation, design reviews)

Architecture at a Glance

At the heart of CAD‑Viewer is a modular, scalable architecture designed for performance, flexibility, and extensibility. The system is composed of several layers — each responsible for a distinct part of the workflow — from file parsing to rendering to UI presentation.

1. Core Data Model: @mlightcad/data-model

The foundational layer of CAD‑Viewer is powered by the **realdwg-web** project. It provides a lightweight, AutoCAD-inspired in-memory CAD database system:

• AutoCAD‑like APIs: Mimics the structure of ObjectARX, with classes like AcDbDatabase, AcDbLine, AcDbCircle, and symbol tables such as AcDbLayerTable and AcDbBlockTable.
• Scene Graph & Entity Management: Organizes model space and layout space drawings, enabling appending, traversing, and querying drawing elements.
• Converter-Ready: Acts as a target for DWG/DXF converters, abstracting the complexities of raw binary parsing into clean object-oriented APIs.

This data model provides a full logical representation of a CAD drawing in the browser.

2. DWG/DXF Conversion: libdxfrw-converter

The **libdxfrw-converter** is a WebAssembly (WASM)-based adapter that reads DWG and DXF files directly in the browser. Key roles include:

• File Parsing: Parses DWG/DXF content entirely client-side using the C++ libdxfrw engine compiled to WASM.
• Database Construction: Translates parsed entities into the data-model structure by registering itself with AcDbDatabaseConverterManager.
• Plug-in Design: Supports additional formats (e.g., SVG) in the future through a pluggable converter registry.

This ensures full offline capability and no server dependency for file parsing.

3. WebGL Rendering Layer: three-renderer

Once the in-memory CAD database is ready, the **three-renderer** transforms it into interactive, high-performance WebGL visuals using Three.js:

• Geometry Translation: Converts AcDbEntity objects (e.g., lines, arcs, text, hatches) into Three.js meshes and objects.
• Optimized Rendering: Supports instanced rendering, material caching, and GPU batching for large-scale drawings.
• Camera and Layer Control: Offers tools to manage zoom, pan, orbit, layers, and object visibility.

This layer decouples logical data from rendering, making it reusable in both simple and complex UIs.

4. Application Layer: cad-viewer and cad-simple-viewer

Depending on your project needs, you can choose between two consumption models:

cad-viewer (Vue 3 UI Component)

• Full-featured, plug-and-play Vue component
• Comes with toolbars, navigation, state management, and styling
• Perfect for Vue-based dashboards and frontends

cad-simple-viewer (Logic-Only Framework)

• Headless viewer with no UI dependencies
• Exposes low-level commands and rendering hooks
• Suitable for custom interfaces, framework-agnostic use, or embedding in non-Vue apps

Performance That Keeps Up

Viewing large DWG/DXF files in the browser? Sounds impossible — until you try it.

CAD-Viewer is designed to render complex technical drawings at 60+ FPS through a series of rendering optimizations:

• WebGL batching and instancing: Group similar elements to reduce draw calls.
• GPU-accelerated shaders: Optimized for vector precision and crisp geometry rendering.
• Efficient scene management: Using spatial indexing and layer control.
• Material caching: Reduce GPU state switches for repeated symbols and hatches.

This makes it practical to handle real-world engineering files — not just toy examples.

Extensibility and Developer Experience

CAD-Viewer is built by developers, for developers. From the ground up, the codebase is organized for modular composition and extensibility.

You get:

• A clean API for command and event handling
• Tree-shakeable ES modules
• Hooks for customizing UI, toolbars, interactions
• Configurable file loaders (DWG, DXF, SVG support in roadmap)
• Plugin-ready architecture for extending tools and commands

Whether you’re creating a collaborative design review platform or embedding a mini-CAD tool in your ERP system, CAD-Viewer scales with your use case.

Privacy-First by Design

In many industries, uploading sensitive DWG drawings to cloud servers is a deal-breaker. CAD-Viewer solves this by running 100% on the client side.

• No file is ever sent to a remote server.
• Works offline by design — even in airplane mode.
• Can be deployed as a static site (no Node.js, no backend, no database).
• Supports local file drop and drag with no upload step.

This makes it ideal for:

• Offline fieldwork tools (e.g., construction inspection)
• High-security intranet deployments
• GDPR-compliant workflows
• Embedding in privacy-first SaaS products

Roadmap: Toward a Full CAD-in-the-Browser Ecosystem

CAD-Viewer is under active development with ambitious goals:

✅ Already supported:

• DWG/DXF parsing
• WebGL-based rendering
• Layer control, zoom, pan
• Basic toolbars, commands
• Vue 3-based UI
• Headless API via cad-simple-viewer

🔜 Coming soon:

• SVG export
• Block editing and snapping
• WeChat Mini-Program support
• Advanced annotation tools

🌟 Future vision:

• A full-fledged browser-based CAD editor
• Collaborative editing with WebRTC or CRDTs
• Integration into CMS (e.g., Notion, WordPress)
• Map-layer overlay with OpenLayers/Leaflet
• BIM-lite capabilities

📦 Installation & Usage

For Vue 3 users:

• Gitlb: https://gitlab.com/mlightcad/cad-viewer/-/blob/main/packages/cad-viewer/README.md
• Github: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-viewer/README.md

For framework-agnostic use:

• Gitlab: https://gitlab.com/mlightcad/cad-viewer/-/blob/main/packages/cad-simple-viewer/README.md
• Github: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-simple-viewer/README.md

📁 Open Source and MIT Licensed

CAD-Viewer is proudly open-sourced on Gitlab and Github under the MIT license. You’re welcome to:

• Use it in commercial or private products
• Fork and extend for your own needs
• Contribute improvements, new features, and plugins

If you believe in building a more open and accessible CAD future — get involved!

🎯 Final Thoughts

The world of CAD is evolving, and CAD-Viewer is part of the vanguard that brings engineering-grade CAD functionality to the browser. With its no-backend architecture, GPU-accelerated performance, and flexible modularity, it’s a game-changer for how we build, share, and interact with design documents.

If you’re building modern CAD tools, privacy-first design portals, or just want a DWG viewer that works everywhere — CAD-Viewer deserves a spot in your toolbox.

👉 Explore the project here:

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