dwg-viewer-example

Examples showing how to view 2D DWG/DXF drawings in the browser using the @x-viewer/core 2D viewer engine (WebGL/Three.js based).

• Online demos: Online examples

Run examples

npm install
npm start

The dev server will start and you can open the examples in your browser.

---

About @x-viewer/core

The examples in this repo are built on top of @x-viewer/core, focusing on the Viewer2d for DWG/DXF drawings. It includes DWG/DXF parsing and 2D rendering, layer control, layouts, measurements, markups and other utilities for building 2D drawing applications.

Features

• High-performance 2D rendering: WebGL-based rendering engine built on Three.js
• DWG/DXF support: Parse and render DWG/DXF files entirely in the browser without backend server
• Rich 2D tools: layers, layouts, osnaps, distance/area/angle measurements, markups, comparison, screenshots, etc.
• Modular architecture: Designed for extensibility and seamless integration
• TypeScript: Full TypeScript support with comprehensive type definitions

Install @x-viewer/core (use in your own project)

npm install @x-viewer/core
# or
pnpm add @x-viewer/core
# or
yarn add @x-viewer/core

Quick Start – Viewer2d (DWG/DXF Viewer)

import { Viewer2d } from "@x-viewer/core";

// Create a 2D viewer
const viewerCfg = {
    containerId: "myCanvas",
    enableSpinner: true,
    enableLayoutBar: true,
};

const modelCfg = {
    modelId: "id_0",
    name: "sample",
    src: "http://www.abc.com/sample.dwg",
}
const fontFiles = ["http://www.abc.com/hztxt.shx", "http://www.abc.com/simplex.shx"];

const viewer = new Viewer2d(viewerCfg);
await viewer.setFont(fontFiles);
await viewer.loadModel(modelCfg, (event) => {
    const progress = (event.loaded * 100) / event.total;
    console.log(`${event.type}: ${progress}%`);
});
console.log("Loaded");
viewer.goToHomeView();

Features

• Viewer2d features includes: load and view one or more dxf files, basic mouse/key operations, layouts, layers, distance/area/angle measurements with osnaps, markups, hotpoints, comparison, undo/redo for measurements/markups, zoom to selected area, screenshots, set background color, etc.

• Supported entity types includes: POINT, 3DFACE, ARC, ATTDEF, ATTRIB, CIRCLE, DIMENSION, MLEADER, MULTILEADER, ELLIPSE, HATCH, INSERT, LEADER, LINE, LWPOLYLINE, MTEXT, RAY, POLYLINE, SOLID, SPLINE, TEXT, VERTEX, VIEWPORT, XLINE, etc. IMAGE, OLE2FRAME, REGION are partially supported.

• Load and view dxf file

- Switch between layouts

- Distance measurement

- Fill patterns

- Area measurement - Angle measurement - Markups

- Comparison

- Undo/redo

Limitations

• It doesn't support complex linetypes, e.g., linetype with text in it.
• It uses line geometries to represent texts rather than mesh, for a better performance.
• It doesn't support polyline with different start and end width.
• It doesn't support Tangent CAD, need to export to T3 format first.
• It supports dxf version "AutoCAD 2018", other versions are not well tested.

Contact Us

• For any inquiries or support, please contact us at [email protected].

---

Related Packages

• @x-viewer/core – Core viewer engine (2D/3D)
• @x-viewer/plugins – Extensible functionality modules
• @x-viewer/ui – Reusable UI components