dxf-kit

Parse and render AutoCAD DXF files in the browser. Custom parser, Three.js rendering, 21 entity types, vector text, hatch patterns.

Core engine dxf-render | Vue 3 component dxf-vuer | Live Demo Viewer

Packages

This monorepo contains two npm packages. Choose the one that fits your stack:

dxf-render — framework-agnostic engine

DXF parser + Three.js renderer. Use with React, Svelte, vanilla JS, or as a parser-only library in Node.js (zero Three.js dependency).

npm install dxf-render three

import { parseDxf, createThreeObjectsFromDXF, loadDefaultFont } from "dxf-render";

const dxf = parseDxf(dxfText);
await loadDefaultFont();
const { group } = await createThreeObjectsFromDXF(dxf);
scene.add(group);

Parser-only (no Three.js needed):

import { parseDxf } from "dxf-render/parser";
const dxf = parseDxf(dxfText);

Full documentation →

---

dxf-vuer — Vue 3 component

Thin Vue 3 wrapper around dxf-render. Drop-in <DXFViewer> component with layer panel, dark theme, drag-and-drop, export to PNG.

npm install dxf-vuer dxf-render three

<script setup>
import { ref } from "vue";
import { DXFViewer, parseDxf } from "dxf-vuer";
import "dxf-vuer/style.css";

const dxfData = ref(null);

async function loadFile(file) {
  const text = await file.text();
  dxfData.value = parseDxf(text);
}
</script>

<template>
  <input type="file" accept=".dxf" @change="loadFile($event.target.files[0])" />
  <DXFViewer :dxf-data="dxfData" show-reset-button style="width: 100%; height: 600px" />
</template>

Full documentation →

Features

• 21 DXF entity types — LINE, CIRCLE, ARC, ELLIPSE, SPLINE, POLYLINE, LWPOLYLINE, TEXT, MTEXT, DIMENSION, HATCH, INSERT, SOLID, 3DFACE, LEADER, MULTILEADER, MLINE, XLINE, RAY, ATTDEF, HELIX, plus ATTRIB within blocks
• Variable-width polylines — per-vertex startWidth/endWidth tapering, constant-width, arrows, donuts rendered as mesh geometry with miter joins
• Linetype rendering — DASHED, HIDDEN, CENTER, PHANTOM, DOT, DASHDOT with LTSCALE support
• Hatch patterns — 25 built-in AutoCAD patterns with multi-boundary clipping
• Vector text — crisp at any zoom; Liberation Sans/Serif fonts; bold, italic, underline, MTEXT formatting
• Dark theme — instant switching
• Layer panel — toggle visibility with color indicators
• TAA anti-aliasing — smooth edges after idle accumulation
• TypeScript — strict types, full .d.ts declarations

Acknowledgements

The DXF parser was inspired by dxf-parser by GDS Estimating, and has since been substantially rewritten with 25 entity handlers, linetype/OCS/hatch systems, and a comprehensive test suite.

License

MIT