Six native bindings
React, Vue, Angular, Svelte, Solid, or vanilla JavaScript. Thin lifecycle adapters keep all format logic in ooxml-core and the shared viewer.
Framework guides →Skip to content.vsdx viewing,
Public beta · Apache-2.0 · TypeScript
.vsdx viewing,
made embeddable.
Bring Visio diagrams into your web app. One shared <visio-viewer> web component and one SVG renderer for React, Vue, Angular, Svelte, Solid, and vanilla JavaScript. Explore pages, inspect shapes, and make supported plain-text edits; the framework adapters only wire up lifecycle and events.
install
npm install visio-react-viewerPublished to npm. Each framework package is self-contained: it bundles the shared viewer, its adapter and its workers.
Live demo
Try it right here.
This is the real viewer running in your browser: the playground built from this repository for each framework adapter, embedded live. Open the sample drawing or a local .vsdx; nothing is uploaded.
Features
What exists today.
A diagram in focus
Switch pages, fit and zoom, select shapes, search visible text, adjust supported layer visibility, and use the Visio-style ribbon, File backstage, Shapes window and Pan & Zoom window.
Live demos →Your browser, your files
Open a local .vsdx file and export the current page as SVG. There are no document uploads, no telemetry and no remote document loading.
Getting started →Careful editing
Experimental source-backed plain-text replacement, narrow geometry edits, bounded undo/redo and explicit original or edited VSDX copies. Unsupported content is rejected, not dropped.
Editing limits →Legacy .vsd preview
Binary VSD v11 files load through the shared ole2 codec in ooxml-core as a read-only preview with diagnosed fallback styles.
Capability ledger →Live sharing
File > Share starts a Yjs session over BroadcastChannel between windows of one browser. Sharing across devices needs a host-provided server transport, which is not built.
Collaboration →Export and print preparation
Current-page SVG export with embedded rasters and visible compatibility notes, plus immutable page snapshots through the API. There is no print dialog, PDF or bitmap export.
Viewer API →Visible limitations
Every capability is tracked with its evidence and what is still missing. A good-looking ribbon is not claimed as Visio parity.
Capability ledger →Status
Honest about what is not done.
This is a public beta, not Microsoft Visio parity. General drawing, full ShapeSheet recalculation, rich text, groups and most masters, PDF export and native Visio reopen fidelity are not established. The generated sample demonstrates interactions; it does not prove visual fidelity.
Capability ledger →import { mountViewer } from 'visio-vanilla-viewer';
const viewer = mountViewer(host);
await viewer.load(file);
// Current page as a static SVG: string, dimensions, byteLength, diagnostics.
const { svg, diagnostics } = viewer.exportSvg();
// Original or edited VSDX bytes for an explicit download; never
// overwrites the source file.
const { bytes, dirty } = await viewer.exportVsdx();Getting started
Mount a viewer in a few lines.
Every adapter forwards the same properties, events and imperative handle of the shared viewer. Give the container a height, then pass a VisioDocument or load a File.
import { VisioViewer } from 'visio-react-viewer';
import type { VisioDocument } from 'visio-react-viewer';
export function Diagram({ diagram }: {
diagram: VisioDocument;
}) {
return <VisioViewer
document={diagram}
style={{ height: 600 }}
events={{ 'document-error': console.error }}
/>;
}
// The native component handles mount and cleanup.Run it from source
Framework guide: React →To run the playground or work on the viewer itself, clone the repository. Node.js 22.12 or newer is required.
npm ci --ignore-scripts
npm run devFAQ
Common questions.
Is this a complete replacement for Visio?+
No. This is an early implementation. Supported cached geometry, text and images are rendered through one SVG path. Complex documents still have gaps; the capability ledger separates implementation, evidence and missing work. Capability ledger →
Can I install it from npm?+
Yes. One self-contained viewer package per framework is on npm, for example npm install visio-react-viewer. Each package is versioned on its own. Getting started →
Does opening a file upload it?+
No. The viewer reads the File you select in your browser. There are no document uploads, telemetry or remote-document fetches.
Can I edit and save a .vsdx file?+
Experimental plain-text and narrow geometry editing is available for supported, source-backed shapes, with bounded undo/redo and explicit VSDX-copy downloads. Master-linked text, rich text, fields, signed packages and macro content are rejected. The source file is never overwritten, and native Visio reopening remains unverified. Viewer API →
What can I export or print?+
The UI exports current-page SVG and original or edited VSDX copies. The API can prepare immutable page snapshots for a future print workflow; it does not open a print dialog. PDF, bitmap export and native printer layout are not implemented.
Can several people edit one diagram?+
Only in a limited way: File > Share links windows of the same browser through a Yjs session. Sharing across devices needs a host-provided server transport that this build does not include. Collaboration →
Does the sample prove visual fidelity?+
No. The original, programmatically created sample demonstrates interactions. Generated fixtures do not establish Microsoft Visio visual parity; compare important drawings with their native Visio rendering.
Which frameworks are supported?+
React, Vue 3, Angular, Svelte 5, SolidJS and plain JavaScript. They share one viewer element; each adapter only handles mounting, property updates and event forwarding. Framework guides →
Get started
.vsdx in. A diagram out.
Read the guide, pick your framework, and try the playground with a drawing of your own. Apache-2.0 licensed, strict TypeScript, and honest about the gaps.
© 2026 ChristopherVR · Apache-2.0visio-viewer · an early Visio viewer for the web