Getting started

Open a diagram locally, understand the current limits, and embed the same viewer in your application.

Initial viewer support, not Visio certification

This is a public beta. Do not use a successful file open as evidence that every shape, formula, or format feature is represented faithfully.

Try the local playground

Open the playground to see an original sample document.
Choose a local .vsdx file using the file picker or drop area.
Switch pages, adjust zoom, fit the page, and select a shape.
Review compatibility notes. Compare important files with their Microsoft Visio rendering.

No document upload is performed. The controls support search, display layers, experimental plain-text editing, bounded undo/redo, SVG export, and explicit VSDX-copy downloads. Print snapshots are API-only preparation; there is no print dialog. General drawing, PDF export, and legacy binary .vsd are outside this build.

Run the development workspace

Use Node.js 22.12 or newer. Normal builds install the released ooxml-core/visio API from npm.

npm ci --ignore-scripts
npm ci --prefix packages/bindings --ignore-scripts
npm run check
npm run dev

Use the local URL printed by Vite. This starts a development server; it does not publish the site. Follow the repository README for the final verified build and test commands.

Mount a viewer

Install visio-vanilla-viewer with npm and import mountViewer. The container must have a height. A browser File, Blob, Uint8Array, or ArrayBuffer can be passed to load.

import { mountViewer } from 'visio-vanilla-viewer';

const viewer = mountViewer(host, {
  events: {
    'shape-select': (shape) => console.log(shape),
  },
});

await viewer.load(file); // A local File or bytes
viewer.fit();

// When your view unmounts:
viewer.destroy();

Use a native framework component

Install the package for your framework. All six adapters forward the same controller, properties, events and imperative handle through the shared viewer.

Framework	Source entry	Export
Vanilla	`visio-vanilla-viewer`	`mountViewer`
React	`visio-react-viewer`	`VisioViewer`
Vue 3	`visio-vue-viewer`	`VisioViewer`
Angular	`visio-angular-viewer`	`VisioViewerComponent`
Svelte 5	`visio-svelte-viewer`	default `VisioViewer`
Solid	`visio-solid-viewer`	`VisioViewer`

Native lifecycle and real-element integration tests run in jsdom. All six entry points have no-DOM import checks; React and Vue have server-markup hydration checks. This does not establish complete SSR framework coverage or real-browser visual fidelity. Run npm run check:bindings after installing that workspace's dependencies.

Experimental plain-text editing

Load a local source package, select a supported shape, and use its text controls. replacePlainText(pageId, shapeId, text), undo(), and redo() expose the same operations through each handle. A model assigned with document has no package bytes and stays read-only.

Editing rejects master-linked text, rich text, fields, signed packages, and macro content. History is bounded and can discard old undo states. Saved formula caches are not recalculated. General drawing, shape geometry and style editing are not implemented.

exportVsdx() returns original or edited package bytes and diagnostics for an explicit copy download. It never overwrites the input file. Native Visio reopening and lossless round-trip fidelity remain unverified.

Export a static SVG

viewer.exportSvg() returns the current page's SVG string, dimensions, byte length and compatibility diagnostics. It leaves selection, zoom and the source document unchanged. The playground's Export SVG button performs an explicit local download.

Supported background content and validated raster images are embedded. Fonts are not embedded; wrapping and other approximations remain visible in the SVG description and metadata. Export is limited to 16 MiB, with conservative early resource checks. Callers can lower the limit with { maxBytes }. This is not editable VSDX output. Downstream rasterizers must independently cap dimensions and pixel area.

Prepare page snapshots

createPrintSnapshot() returns immutable SVG page artifacts and diagnostics through the API. It preserves drawing dimensions but does not apply native printer settings, open a print dialog, or implement PDF export. This prepares data for a future print workflow.

Properties and events

Surface	Current contract
Properties	`document`, `pageIndex`, `zoom`, `showToolbar`
Events	`document-load`, `document-change`, `document-error`, `page-change`, `zoom-change`, `shape-select`
Lifecycle	`update`, `load`, `fit`, `exportSvg`, `createPrintSnapshot`, `replacePlainText`, `undo`, `redo`, `cancelEdit`, `exportVsdx`, `destroy`

Mount after the host exists and call destroy() when the framework view unmounts. Repeated destruction is safe. Partial updates leave omitted properties unchanged.

Verification before adoption

Run npm run check and npm run test:browser in the viewer checkout. Core parser tests belong to the sibling engine. These checks establish only their asserted behavior; they do not establish Microsoft Visio visual parity.

Next: capability ledger →Architecture →