CAD Viewer Examples

Live demos and reference implementations for browser-based DXF/DWG viewing and editing. All examples run entirely in the browser — no backend server required.

Interactive Demos

CAD Viewer Demo

Vue 3 Full UI DXF / DWG

A production-style CAD host built with Vue 3 and Element Plus. Start from an upload screen, then open local drawings in a complete viewer with menus, ribbons, layer manager, command line, and status bar.

  • Read, Review, and Write access modes when opening a file
  • Layer management, point styles, settings, and AutoCAD-style commands
  • Export to self-contained HTML or PDF from the running viewer
  • English and Chinese UI via built-in i18n
Open CAD Viewer Demo

CAD Simple Viewer Demo

TypeScript Minimal embed High performance

A lightweight reference app that shows how to embed @mlightcad/cad-simple-viewer without a full UI framework. Ideal when you want a smaller integration surface and direct control over layout and commands.

  • Sidebar with sample drawings loaded from the cad-data CDN
  • Toolbar for open, zoom fit, zoom window, background toggle, and export
  • Lazy-loaded HTML, PDF, and SVG export plugins
  • Responsive sidebar + canvas layout for desktop and mobile
Open Simple Viewer Demo

Self-Contained Offline HTML

Canteen sample drawing (offline HTML export)

Single file No install Low memory

Export a DWG/DXF drawing into one portable .html file that embeds both the drawing snapshot and a lightweight viewer runtime. Recipients can open it in any modern browser — no CAD software, no server, and no cad-viewer deployment needed.

  • Ultra-low memory footprint — far below desktop CAD viewers when opening the same drawing
  • Works offline — email, archive, or host on any static file server
  • Built-in tools — pan, zoom, zoom extents, layer toggle, and distance measurement
  • Same pipeline as the live demos — generated with cad-html-exporter-cli from the sample canteen.dwg drawing

Memory consumption measured with the sample drawing canteen.dwg:

Viewer Memory consumption
AutoCAD 2020 320 MB
GstarCAD Viewer (浩辰看图王) 246 MB
Self-contained HTML (measure mode) 56 MB
Self-contained HTML (view mode) 33 MB

View mode uses about 83% less memory than AutoCAD 2020 and 77% less than GstarCAD Viewer, while measure mode adds distance tools at 56 MB.

Open offline HTML demo CLI docs

This file is produced automatically in CI on the main branch and published to GitHub Pages. When serving locally with pnpm serve, run pnpm export:demo-html from packages/examples to generate it.

API Docs

  1. CAD Simple Viewer
  2. CAD Viewer