aspicio-embed

Embedding the Aspicio drawing viewer (DXF and PDF)

Install

npm install @aspicio/react react three   # React apps; three (>=0.184) is a peer dep
npm install @aspicio/vue vue three       # Vue 3 apps; vue 3.4+ and three are peer deps
npm install @aspicio/svelte svelte three # Svelte 5 apps; ships raw .svelte your bundler compiles
npm install @aspicio/elements three      # plain HTML (web components, no bindings)
npm install @aspicio/core three          # vanilla JS, hand-rolled UI

react 18/19 and three are peer dependencies — forgetting three is the most common install failure.

Formats are opted into by import

No package implies a file format. Alongside the package import, import the format entry once, anywhere in the app — otherwise a load fails with an error telling you exactly this:

import "@aspicio/react/formats/dxf"; // or /vue, /svelte, /elements
import "@aspicio/react/formats/pdf"; // both, if the app opens both
import { dxfParser } from "@aspicio/core/dxf"; // vanilla: pass it to the viewer
import { pdfParser } from "@aspicio/core/pdf";

That indirection is what keeps a DXF app from shipping the PDF parser, and vice versa (INV-11) — import only the formats you open.

A PDF is read as vector line work, text, and raster images: paths, strokes, fills, glyphs, and the flattened artwork a PDF/X-4 file carries — a print PDF whose art is one big image still shows its artwork under the dieline. Shadings, transparency, and images in codecs outside the decoded set (JPEG 2000, JBIG2, CCITT fax) are counted as skipped rather than drawn. Optional-content groups become layers ("Content" holds anything ungrouped), pages become spaces, and measurements are in points, because a PDF carries no drawing scale.

React: one component

import { AspicioEmbed } from "@aspicio/react";
import "@aspicio/react/formats/dxf";

<AspicioEmbed srcUrl="/drawing.dxf" style={{ height: 480 }} />;

Key props (all optional):

• src (DXF text | File | Blob | ArrayBuffer) or srcUrl (fetched) — changing either loads the new document
• panel="left" | "right" | "none" — the built-in layer panel
• shortcuts — opt-in keyboard control (F fit, +/- zoom, R rotation reset, A show-all); scoped to the focused embed, click to focus
• showDownload={false} — hide the built-in SVG/PNG export control
• onLoaded({ layers, stats }), onError, onViewer(viewer) — onViewer/ref expose the full DrawingViewer API (fitView, zoomBy, setLayerVisible, pickLayer, view, setView, toSVG, toPNG)
• theme="none" — drop the built-in dark theme for a minimal structure