{"id":27709,"library":"dxf-viewer","title":"dxf-viewer","description":"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.","status":"active","version":"1.0.47","language":"javascript","source_language":"en","source_url":"https://github.com/vagran/dxf-viewer","tags":["javascript","dxf","viewer","webgl","html5","cad","typescript"],"install":[{"cmd":"npm install dxf-viewer","lang":"bash","label":"npm"},{"cmd":"yarn add dxf-viewer","lang":"bash","label":"yarn"},{"cmd":"pnpm add dxf-viewer","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core WebGL rendering engine","package":"three","optional":false},{"reason":"Triangulation for solid hatch infill (since v1.0.36)","package":"earcut","optional":false},{"reason":"DXF file parsing (not stream-based, buffers entire file)","package":"dxf-parser","optional":false}],"imports":[{"note":"ESM-only; this is the main viewer class. Requires a container element and three.js scene setup.","wrong":"const DxfViewer = require('dxf-viewer')","symbol":"DxfViewer","correct":"import { DxfViewer } from 'dxf-viewer'"},{"note":"TypeScript type for configuration options. Commonly used for type annotations.","wrong":"","symbol":"DxfViewerConfig","correct":"import { DxfViewerConfig } from 'dxf-viewer'"},{"note":"Type export for progress callback function signature. Using 'import type' is also correct but not required.","wrong":"import type { ProgressCallback } from 'dxf-viewer'","symbol":"ProgressCallback","correct":"import { ProgressCallback } from 'dxf-viewer'"}],"quickstart":{"code":"import { DxfViewer } from 'dxf-viewer';\nimport * as THREE from 'three';\n\nconst container = document.getElementById('viewer-container')!;\nconst scene = new THREE.Scene();\nconst camera = new THREE.PerspectiveCamera(60, container.clientWidth / container.clientHeight, 0.1, 1000);\nconst renderer = new THREE.WebGLRenderer({ antialias: true });\nrenderer.setSize(container.clientWidth, container.clientHeight);\ncontainer.appendChild(renderer.domElement);\n\nconst viewer = new DxfViewer(scene, camera, renderer);\n\n// Fetch and load DXF file\nfetch('drawing.dxf')\n  .then(res => res.arrayBuffer())\n  .then(buffer => viewer.loadArrayBuffer(buffer))\n  .then(() => {\n    viewer.setView('default');\n    viewer.render();\n  });\n\n// Animation loop\nfunction animate() {\n  requestAnimationFrame(animate);\n  viewer.render();\n}\nanimate();","lang":"typescript","description":"Creates a DxfViewer instance, loads a DXF file from a Buffer, and renders it in a loop."},"warnings":[{"fix":"Update to >=1.0.36 and ensure earcut is installed (npm install earcut) or let dxf-viewer install it.","message":"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.","severity":"breaking","affected_versions":"<1.0.36"},{"fix":"Consider splitting large DXF files or using alternative tools for files exceeding memory limits.","message":"DXF parser is not stream-based; large files (>1GB) may hit JavaScript string length limits. The entire file is buffered before parsing.","severity":"gotcha","affected_versions":"all"},{"fix":"Update to >=1.0.41 and adjust any option types as needed.","message":"In v1.0.41, the TS type definition for options was fixed. Old code using incorrect type annotations may fail to compile.","severity":"deprecated","affected_versions":"<1.0.41"},{"fix":"No fix available; feature is incomplete. Use standard fonts and avoid complex MTEXT.","message":"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.","severity":"gotcha","affected_versions":"all"},{"fix":"No workaround; consider converting to polyline with segments for patterns.","message":"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.","severity":"gotcha","affected_versions":"all"},{"fix":"Convert DXF files to UTF-8 before loading.","message":"Non-UTF-8 file encoding is not supported; $DWGCODEPAGE is ignored. Files in encodings like Shift-JIS will display incorrectly.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-05-09T00:00:00.000Z","next_check":"2026-08-07T00:00:00.000Z","problems":[{"fix":"Import three.js before dxf-viewer: import * as THREE from 'three'; or load via script tag.","cause":"three.js not imported or not available in scope (e.g., using UMD build incorrectly).","error":"Error: three is not defined"},{"fix":"Ensure dxf-viewer is >=1.0.0 and instantiate: const viewer = new DxfViewer(scene, camera, renderer);","cause":"Using an older version (<1.0.0?) or incorrect viewer initialization (e.g., missing new keyword).","error":"TypeError: viewer.loadArrayBuffer is not a function"},{"fix":"Install earcut explicitly: npm install 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.","error":"Cannot find module 'earcut'"},{"fix":"Update to dxf-viewer >=1.0.41 and use import { DxfViewerConfig } from 'dxf-viewer';","cause":"Using dxf-viewer <1.0.41 where TypeScript definitions were incomplete.","error":"DxfViewerConfig is not exported from 'dxf-viewer' (or is not a type)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}