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

CAD Diff Viewer

Reusable component Side-by-side Host supplies a container

Experimental @mlightcad/cad-diff-viewer widget. The host page provides one parent element; the component creates both canvases and keeps each drawing on its own renderer. Drop a file onto a pane or click to open. Click a loaded pane to pan and zoom that side.

Open CAD Diff Viewer

Zero-build CDN Bootstrap

Single HTML CDN Viewer

No Node / Vite Import maps jsDelivr

A minimal single-HTML host that loads @mlightcad/cad-viewer and its peer dependencies from jsDelivr — no Node, Vite, or local node_modules. The landing page is plain HTML file upload; Vue is only used to mount the viewer.

  • Import map + in-browser rewrite so published cad-viewer.js resolves on a CDN
  • Simple DWG/DXF file picker (no open-options UI)
  • LibreDWG worker via blob + jsDelivr; MTEXT on the main thread
  • Pin versions in one file when you upgrade
Open CDN Bootstrap

Serve over HTTP(S) (for example pnpm serve from packages/examples). Opening the file via file:// will fail because browsers block ES module CDN imports. Source: packages/examples/public/cdn-bootstrap/cad-viewer.html.

Self-Contained Offline HTML

Convert your drawing in the browser

No backend Upload DWG / DXF Adjustable options

Open a local drawing, tune export options in the UI, and download a portable .html file. Parsing, rendering, and packaging all run in this tab — the drawing is never uploaded to a conversion server.

  • Drag-and-drop or file picker for .dwg / .dxf
  • Progress animation while the drawing opens and HTML is packaged
  • Export invisible layers, paper-space layouts, and viewer mode
  • Optional sample canteen.dwg if you do not have a file handy
Open HTML converter

Conversion never leaves the browser. Fonts and templates may be loaded from the public cad-data CDN. When serving this page locally, run pnpm build and pnpm pre-serve so workers and viewer-runtime.iife.js are copied.

Canteen sample drawing (offline HTML export)

Single file No install Low memory

A ready-made export of the sample canteen.dwg drawing. 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 converter — generated with cad-simple-viewer-cli
Open offline HTML demo CLI docs

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.

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.

Canteen sample drawing (progressive multi-file package)

Multi-file ACEX Progressive load Faster first paint

The same canteen.dwg sample as a multi-file ACEX package. The shell HTML loads a small manifest first, then fetches geometry chunks one by one — so you see part of the drawing sooner instead of waiting for a single monolithic payload.

  • Progressive loading — paint each compressed chunk as it arrives
  • Hosted unzipped — open viewer.html on any static file server
  • Same tools — pan, zoom, layers, and measurement as the single-file demo
  • Zip for distribution — download the archive, unzip before hosting elsewhere
Open progressive demo Download package zip

CI builds canteen.zip and extracts it to self-contained-html/canteen-progressive/ before deploying to GitHub Pages. Locally, pnpm export:demo-html does the same export and unzip step.

Documentation

User Guide

Multi-language How-to

Step-by-step guides for the viewer interface, desktop and touch operations, the simulated mouse and magnifier, markup, and measurement tools.

Open User Guide