DWF Viewer

The world's first open-source pure frontend DWF/DWFx preview component for the web. It parses DWF/DWFx packages locally and renders common 2D and 3D CAD content in the browser without a server-side CAD conversion service.

English is the default language for the README, npm package, and online demo. The demo UI can switch to Chinese from the language selector.

Links

| Entry | URL | |---|---| | Online demo | https://dwf-viewer-demo.pages.dev/ | | Repository | https://github.com/flyfish-dev/dwf-viewer | | npm | https://www.npmjs.com/package/dwf-viewer | | scoped npm | https://www.npmjs.com/package/@flyfish-dev/dwf-viewer |

Current version: 0.6.4

Why

DWF and DWFx are still common in manufacturing, construction, field service, engineering archives, PLM, after-sales systems, and document management products. Many web systems can preview PDF, Office files, and images, but DWF often falls back to desktop viewers, server-side conversion, or static thumbnails.

To our knowledge, DWF Viewer is the first open-source component focused on the pure frontend DWF/DWFx path: parse the package, decode the sheet/model data, and render it directly inside a web application. This keeps integration simple for private deployments and reduces conversion queues, temporary files, and infrastructure coupling.

DWF Viewer 是面向 Web 的开源纯前端 DWF/DWFx 预览组件。它在浏览器内解析 DWF/DWFx 包并渲染常见 2D/3D CAD 内容，无需服务端 CAD 转换服务。文档与在线 Demo 默认使用英文，Demo 可在界面中切换为中文。

Supported Paths

| Format / content | Status | |---|---| | DWF 6+ ZIP container | Supported | | DWFx / OPC package | Supported | | XPS FixedPage 2D sheets | Supported common subset with WebGL vector acceleration and Canvas text/image overlay | | Classic binary WHIP!/W2D 2D sheets | Supported for core geometry/text/images used by Autodesk samples | | Textual W2D pages | Supported for smoke tests and simple sheets | | W3D/HSF 3D eModel shell geometry | Supported: uncompressed, CS_TRIVIAL, and Edgebreaker shell meshes | | Three.js adapter | Supported | | Built-in WebGL 3D renderer | Supported through DwfViewer | | WASM raster fallback | Supported for 2D vector rasterization | | eModel metadata | Materials, textures, scene tree, saved views, PMI/animation data containers |

The demo intentionally does not silently replace a failed 3D parse with a thumbnail. If an eModel contains a .w3d stream, it must decode to a w3d-model page or show an explicit diagnostic.

Install

npm install dwf-viewer three
# or
npm install @flyfish-dev/dwf-viewer three

three is an optional peer dependency. It is required only when you use createThreeGroupFromW3d() directly. The built-in DwfViewer uses its own WebGL 3D renderer.

Basic Browser Usage

import 'dwf-viewer/styles.css';
import { DwfViewer } from 'dwf-viewer';

const viewer = new DwfViewer(document.getElementById('viewer')!, {
  wasmUrl: '/dwfv-render.wasm',
  preferWebgl: true,
  preferWasm: true,
  maxDevicePixelRatio: 1.5,
  maxCanvasPixels: 12_000_000,
  maxGpuCacheBytes: 192 * 1024 * 1024,
  maxCachedScenes: 4,
  lineWeightMode: 'adaptive',
  minStrokeCssPx: 0.42,
  maxOverviewStrokeCssPx: 0.9,
  minTextCssPx: 1.05,
  minFilledAreaCssPx: 0.04
});

await viewer.load(file);

Copy the WASM asset from the package into your public assets directory:

cp node_modules/dwf-viewer/public/dwfv-render.wasm public/dwfv-render.wasm

For the scoped package:

cp node_modules/@flyfish-dev/dwf-viewer/public/dwfv-render.wasm public/dwfv-render.wasm

WebGL 2D Rendering

Version 0.6.x adds WebGL-accelerated XPS/DWFx 2D vector rendering through WebGlXpsBackend, alongside the existing W2D WebGL path.

The built-in viewer uses WebGL for Classic W2D and DWFx/XPS vector geometry when preferWebgl is enabled. Geometry is uploaded to GPU buffers and cached by page and zoom bucket; pan operations update shader uniforms. Text, images, and XPS image brushes stay on the transparent Canvas overlay so browser font rendering and bitmap decoding remain reliable.

For dense architectural sheets, the demo defaults are tuned for CAD review: 1.5 maximum DPR, a 12M-pixel canvas cap, adaptive thin-line overview, and render coalescing during wheel/pointer interaction.

CAD Line-Weight Rendering

The default 2D rendering mode is lineWeightMode: 'adaptive'. At fit-to-page, linework is normalized toward screen-space hairlines so dense drawings remain readable; as zoom increases, original DWF/XPS line weights return progressively.

Available modes:

| Mode | Behavior | |---|---| | adaptive | Default. Overview thin-line rendering with zoom-aware recovery of source line weights. | | hairline | Force strokes to a visible CSS-pixel hairline. Useful for dense plans and review thumbnails. | | physical | Preserve source stroke widths. Useful for print-fidelity comparisons; dense sheets can look heavy when zoomed out. |

Related options:

new DwfViewer(el, {
  lineWeightMode: 'adaptive',
  minStrokeCssPx: 0.42,
  maxOverviewStrokeCssPx: 0.9,
  minTextCssPx: 1.05,
  minFilledAreaCssPx: 0.04
});

XPS/DWFx Glyphs use embedded TrueType fonts when the browser allows FontFace loading. Very small text is skipped in adaptive overview mode and appears normally when zoomed in; this avoids unreadable annotation blocks in dense architectural sheets.

Browser XML Tolerance

Version 0.6.3 adds a repair-and-fallback path for legacy Autodesk eModel XML metadata that strict browser DOMParser implementations reject, especially invalid xmlns:schemaLocation declarations emitted by older DWF Toolkit pipelines. The loader now tries strict XML parsing first, applies a targeted Autodesk metadata repair when needed, and then falls back to the dependency-free XML tree parser used by non-DOM runtimes.

This keeps valid 3D DWFx models from surfacing noisy EMODEL_CONTENTDEF_PARSE_FAILED diagnostics when only optional metadata XML is malformed.

Three.js Integration

import * as THREE from 'three';
import { openDwfDocument, createThreeGroupFromW3d } from 'dwf-viewer';

const doc = await openDwfDocument(await file.arrayBuffer(), { fileName: file.name });
const page = doc.pageData.find(p => p.kind === 'w3d-model');

if (page?.kind === 'w3d-model') {
  const group = createThreeGroupFromW3d(page, THREE, {
    showFeatureEdges: true,
    textureResolver(texture) {
      return undefined;
    }
  });
  scene.add(group);
}

Local Development

npm install
npm run build
npm run validate:production
npm run demo:serve

Then open:

http://127.0.0.1:8080/

Example Set

The demo examples are listed in examples/manifest.json and are intentionally de-duplicated:

| Example | Purpose | |---|---| | blocks-and-tables.dwf | Default demo. Binary WHIP!/W2D ePlot sample with fast loading and a clear first impression | | autodesk-floor-plans.dwfx | Multi-page architectural DWFx/XPS sample, using A03 First Floor Plan for WebGL XPS, embedded font, and thin-line overview validation | | robot-arm.dwfx | 3D W3D/HSF eModel with shell meshes, scene tree, materials, textures, and saved views | | minimal-xps.dwfx | Small DWFx/XPS FixedPage sample | | text-w2d.dwf | Textual W2D smoke-test sample |

Run:

npm run check:examples

NPM Publishing Checklist

npm run clean
npm run build
npm run validate:production
npm run check:package
npm run publish:all

The package is published as both dwf-viewer and @flyfish-dev/dwf-viewer.

Cloudflare Pages Demo

The repository includes wrangler.toml with:

name = "dwf-viewer-demo"
pages_build_output_dir = "./demo-dist"

Recommended Cloudflare Pages Git settings:

Build command: npm run build:demo
Build output directory: demo-dist
Root directory: /

Direct upload:

npm run deploy:pages

build:demo produces a static directory containing demo HTML/JS, a versioned dist-v* directory, public/dwfv-render.wasm, styles, and curated examples. Versioned dist assets prevent stale browser module caches after releases. The demo defaults to English and includes a Chinese language switch for bilingual product teams.

Public API

Main exports:

openDwfDocument(input, options?)
DwfViewer
PageRenderer
WebGlW2dBackend
WebGlXpsBackend
ThreeW3dRenderer
createThreeGroupFromW3d(page, THREE, options?)

Types:

LoadedDwfDocument
PageData
XpsPageData
W3dPageData
W3dModelData
W3dMeshData
W2dTextPageData
Diagnostic
RenderStats

Production Behavior

The production validation target is strict for the bundled samples:

Robot Arm:
page kind: w3d-model
meshes >= 30
triangles >= 40,000
non-info diagnostics: 0

Autodesk Floor Plans:
page kind: xps-fixed-page
pages >= 18
non-info diagnostics: 0

Run:

npm run validate:production

License

DWF Viewer is licensed under AGPL-3.0-only. See LICENSE and NOTICE.

Commercial use, private forks, and second-development integrations must comply with the license and preserve attribution. Contributions are welcome through Issues and Pull Requests.

Known Boundaries

This is a pure frontend implementation and is not affiliated with Autodesk Design Review or HOOPS Exchange. The parser is intentionally fail-closed for unsupported historical HSF/W2D opcode semantics: it should show explicit diagnostics instead of silently drawing guessed geometry. Current production coverage includes the core 2D/3D rendering paths needed by the bundled samples and extension points for materials, textures, PMI, animation, and selection tree metadata.