Frontend · JavaScript · GitHub

DWG and DXF Drawings Now Get a Browser-Native Diff Tool

By mlightcad · Aug 24, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

CAD drawing review has lagged decades behind code review in tooling. A client-side diff component that runs without AutoCAD or server uploads removes the two biggest blockers — license cost and data egress — for embedding drawing comparison into CI, issue trackers, and SaaS platforms.

Summary

CAD teams still compare revisions by toggling between two AutoCAD windows or squinting at exported PDFs. A new MIT-licensed component, `@mlightcad/cad-diff-viewer`, brings a code-review-like diff experience to DWG and DXF files, running fully client-side. It parses drawings via LibreDWG compiled to WebAssembly, renders them on two WebGL canvases, and colors entities as unchanged, deleted, added, or modified.

The diff algorithm fingerprints each entity by DXF type and quantized geometry, then matches by handle and type — a model inspired by AutoCAD's COMPARE command. Nearby changes cluster into revision cloud annotations, and a results panel lets reviewers step through hits grouped by change type. Overlay mode stacks the new drawing on top of the old one, making displacements immediately visible.

Because parsing happens in a Web Worker and files never leave the browser tab, the tool fits privacy-sensitive workflows and SaaS embeds where uploading drawings to a server is a non-starter. The component ships with i18n support for English, Chinese, Turkish, and Czech, and exposes a headless `acapCompareDrawings` API for teams that want to build their own UI on top of the diff engine.

Takeaways

— Two DWG/DXF files can be compared side-by-side or overlaid in a browser using two WebGL canvases, with no server round-trip.

— The diff algorithm fingerprints entities by DXF type plus quantized geometry (endpoints, center/radius, text content, INSERT transforms) and falls back to bounding boxes for rare types.

— Matching runs in two passes: first by identical handle and DXF type, then by type and fingerprint among remaining entities.

— Compare colors are applied in the GPU batch-highlight shader via a mask texture's B channel, not by rewriting materials on the CPU.

— Comparison is limited to model space, top-level entities — paper space, nested block definitions, and layout-only work are out of scope.

— INSERT entities are treated as single objects; edits inside block definitions are not traversed.

— The component exposes a headless `acapCompareDrawings` function for teams that want to build their own UI.

— Parsing uses LibreDWG compiled to WebAssembly inside a Web Worker, so the UI thread stays responsive.

— System-variable-style options (`COMPAREPROPS`, `COMPARETOLERANCE`, `COMPARERCMARGIN`, etc.) control property-difference sensitivity, geometric tolerance, and change-set clustering.

Conclusions

The decision to compare stored entity values rather than resolved ByLayer/ByBlock appearance is a deliberate trade-off: it avoids false positives when a layer color changes, but it also means some visually obvious differences won't be flagged.

Fingerprinting via quantized geometry plus DXF type is a pragmatic middle ground between exact-match hashing (too brittle with floating-point coordinates) and full geometric comparison (too expensive for a browser thread).

Running the diff engine headless opens a path for automated CAD change detection in CI pipelines — something that barely exists today outside of desktop AutoCAD.

Overlay mode folding modifications into red and green, with no separate 'modified' color, is a genuine UX limitation that integrators should account for when designing review workflows.

Concepts & terms

LibreDWG

An open-source C library for reading and writing DWG files, the native format of AutoCAD. Here it is compiled to WebAssembly so DWG parsing can run in a browser without a native binary.

COMPARE system variables

AutoCAD's built-in drawing comparison feature exposes settings like COMPAREPROPS (which property differences to flag) and COMPARETOLERANCE (geometric precision threshold). This library mirrors those variables so behavior feels familiar to AutoCAD users.

Entity fingerprint

A string built from an entity's DXF type plus quantized geometric properties (endpoints, center/radius, text content, etc.) used to match corresponding entities between two drawing versions without relying on exact floating-point equality.

Batch highlight shader

A GPU shader that recolors rendered geometry at draw time. Instead of changing material properties on the CPU, the shader reads a mask texture where the B channel encodes the entity's diff role (unchanged, deleted, added, modified).

Source: juejin.cn ↗ Google Translate ↗ Backup ↗