@cadview
A framework-agnostic CAD/DXF
file viewer for the web.
Parses 13 DXF entity types including LINE, CIRCLE, ARC, SPLINE, POLYLINE, TEXT, MTEXT, and INSERT. Handles encoding detection and won't crash on malformed input.
Renders to Canvas 2D with DPR scaling. Dark and light themes, full ACI 256-color table. Supports nested block INSERTs and MINSERT grids.
Pan and zoom via mouse wheel, trackpad pinch, or touch. Pointer capture keeps input working even outside the canvas. Zoom speed and min/max are configurable.
Uses an R-tree (rbush) for spatial indexing, so hit-testing stays fast even with thousands of entities. Picking is based on geometric distance, not bounding boxes.
Snaps to endpoints, midpoints, and centers. Shows distance, delta X/Y, and angle as you measure, drawn directly on the canvas.
Drop-in components for React, Svelte 5, and Vue 3. Props are reactive, events are callbacks, and each wrapper ships a hook or composable.
import { CadViewer } from '@cadview/core';
import { dwgConverter } from '@cadview/dwg'; // optional
const canvas = document.getElementById('canvas');
const viewer = new CadViewer(canvas, {
theme: 'dark',
formatConverters: [dwgConverter] // DWG support
});
// Load from File input (.dxf or .dwg)
const file = input.files[0];
await viewer.loadFile(file);
viewer.fitToView();
// Selection & measurement
viewer.setTool('select');
viewer.on('select', (e) => {
console.log(e.entity.type, e.entity.layer);
});
viewer.destroy();| Entity | Description |
|---|---|
| LINE | Line segments |
| CIRCLE | Full circles |
| ARC | Circular arcs |
| LWPOLYLINE | Lightweight polylines with bulge arcs |
| POLYLINE | Legacy polylines |
| ELLIPSE | Ellipses and elliptical arcs |
| SPLINE | B-splines (NURBS curves) |
| TEXT | Single-line text |
| MTEXT | Multi-line formatted text |
| INSERT | Block references with MINSERT grid |
| DIMENSION | Dimension annotations via geometry blocks |
| HATCH | Hatch fills with line, arc, and circle edges |
| POINT | Point markers |
DXF parser, Canvas 2D renderer, interactive viewer engine
React 18/19 component & hook
Svelte 5 component (runes)
Vue 3 component & composable
DWG file support via LibreDWG WASM