dxf-viewer

1.0.47 verified Sat May 09 auth: no javascript

dxf-viewer is a high-performance 2D DXF viewer for JavaScript/TypeScript, leveraging WebGL via three.js for rendering large CAD files. Current stable version is 1.0.47. It uses geometry batching and instanced rendering to minimize draw calls, and supports lazy-loading of multiple TTF fonts for text. Key differentiators include web-worker support for offloading heavy processing and efficient handling of block instances. It has limited support for features like MTEXT formatting, line patterns, and hatches, and is primarily maintained by a single developer with periodic updates. No stream parser yet, so large files (>1GB) may hit JS engine string limits.

Common errors

error Error: three is not defined ↓

cause three.js not imported or not available in scope (e.g., using UMD build incorrectly).

fix

Import three.js before dxf-viewer: import * as THREE from 'three'; or load via script tag.

error TypeError: viewer.loadArrayBuffer is not a function ↓

cause Using an older version (<1.0.0?) or incorrect viewer initialization (e.g., missing new keyword).

fix

Ensure dxf-viewer is >=1.0.0 and instantiate: const viewer = new DxfViewer(scene, camera, renderer);

error Cannot find module 'earcut' ↓

cause dxf-viewer v1.0.36+ requires earcut, but it's not installed as a peer dependency. This often happens with npm <7 or when using --legacy-peer-deps.

fix

Install earcut explicitly: npm install earcut

error DxfViewerConfig is not exported from 'dxf-viewer' (or is not a type) ↓

cause Using dxf-viewer <1.0.41 where TypeScript definitions were incomplete.

fix

Update to dxf-viewer >=1.0.41 and use import { DxfViewerConfig } from 'dxf-viewer';

Warnings

breaking In v1.0.36, earcut dependency added for solid hatch infill. Existing code that manually handles hatches may need updates if relying on previous behavior. ↓

fix Update to >=1.0.36 and ensure earcut is installed (npm install earcut) or let dxf-viewer install it.

gotcha DXF parser is not stream-based; large files (>1GB) may hit JavaScript string length limits. The entire file is buffered before parsing. ↓

fix Consider splitting large DXF files or using alternative tools for files exceeding memory limits.

deprecated In v1.0.41, the TS type definition for options was fixed. Old code using incorrect type annotations may fail to compile. ↓

fix Update to >=1.0.41 and adjust any option types as needed.

gotcha Text rendering ignores DXF style and font attributes; glyphs are always filled. MTEXT special characters (e.g., %%C) are supported, but advanced formatting (colors, stacking) is not. ↓

fix No fix available; feature is incomplete. Use standard fonts and avoid complex MTEXT.

gotcha Line patterns are not implemented; all lines render as continuous. Hatches are supported but only basic patterns; solid/gradient infill added in v1.0.36, but outer style etc. not supported. ↓

fix No workaround; consider converting to polyline with segments for patterns.

gotcha Non-UTF-8 file encoding is not supported; $DWGCODEPAGE is ignored. Files in encodings like Shift-JIS will display incorrectly. ↓

fix Convert DXF files to UTF-8 before loading.

Install

npm install dxf-viewer

yarn add dxf-viewer

pnpm add dxf-viewer

Imports

DxfViewer
wrong
```
const DxfViewer = require('dxf-viewer')
```
correct
```
import { DxfViewer } from 'dxf-viewer'
```
ESM-only; this is the main viewer class. Requires a container element and three.js scene setup.
DxfViewerConfig
```
import { DxfViewerConfig } from 'dxf-viewer'
```
TypeScript type for configuration options. Commonly used for type annotations.
ProgressCallback
wrong
```
import type { ProgressCallback } from 'dxf-viewer'
```
correct
```
import { ProgressCallback } from 'dxf-viewer'
```
Type export for progress callback function signature. Using 'import type' is also correct but not required.

Quickstart

Creates a DxfViewer instance, loads a DXF file from a Buffer, and renders it in a loop.

import { DxfViewer } from 'dxf-viewer';
import * as THREE from 'three';

const container = document.getElementById('viewer-container')!;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, container.clientWidth / container.clientHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer.domElement);

const viewer = new DxfViewer(scene, camera, renderer);

// Fetch and load DXF file
fetch('drawing.dxf')
  .then(res => res.arrayBuffer())
  .then(buffer => viewer.loadArrayBuffer(buffer))
  .then(() => {
    viewer.setView('default');
    viewer.render();
  });

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  viewer.render();
}
animate();