dxf-viewer

library1.0.47jsnpmunverified

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.

web-framework data

npm install dxf-viewer

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · DXF-VIEWER

dxf-viewer

web-frameworkjavascriptv1.0.47

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

DxfViewer

✓ import { DxfViewer } from 'dxf-viewer'

✗ const DxfViewer = require('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

✓ import { ProgressCallback } from 'dxf-viewer'

✗ import type { ProgressCallback } from 'dxf-viewer'

Type export for progress callback function signature. Using 'import type' is also correct but not required.

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();

Debug

Known issues

breakingIn 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.

affects: <1.0.36

gotchaDXF 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.

affects: all

deprecatedIn 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.

affects: <1.0.41

gotchaText 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.

affects: all

gotchaLine 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.

affects: all

gotchaNon-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.

affects: all

Errors

Common errors & fixes

Error: three is not defined

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.

TypeError: viewer.loadArrayBuffer is not a function

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);

Cannot find module 'earcut'

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

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

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';

Upgrade

Version history

1.0.47latest on npm

Audit

Dependencies

threerequiredCore WebGL rendering engine

earcutrequiredTriangulation for solid hatch infill (since v1.0.36)

dxf-parserrequiredDXF file parsing (not stream-based, buffers entire file)

Agent activity

12 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/vagran/dxf-viewer ↗

packagehttps://www.npmjs.com/package/dxf-viewer ↗

homepagehttps://michalzaq.github.io/dxf-viewer ↗