visio-vue-viewer

visio-vue-viewer

A browser Visio .vsdx viewer for Vue 3.5 or later within Vue 3. This package ships the functional viewer and its framework adapter.

Live demo | npm | Full docs | Source

Part of ooxml: Office · Word · Excel · PowerPoint · Visio · OpenTeams · Core

Install

npm install visio-vue-viewer

Quick start

<script setup lang="ts">
import { ref } from 'vue';
import { VisioViewer, type ViewerHandle } from 'visio-vue-viewer';

const viewer = ref<ViewerHandle>();
async function open(event: Event) {
	const file = (event.target as HTMLInputElement).files?.[0];
	if (file) await viewer.value?.load(file);
}
</script>

<template>
	<input type="file" accept=".vsdx" @change="open" />
	<VisioViewer ref="viewer" :show-toolbar="true" style="height: 600px" />
</template>

Features

API

The shared properties are document (a parsed VisioDocument, or null to clear), pageIndex (zero-based), zoom (1 means 100%), showToolbar, ribbonAddIns (tabs the host adds after Help), canEdit (editing permission; the viewer is editable unless you pass false), collaboration (shares the open drawing in a room while set; null leaves it) and events. The callback map uses document-load, document-change ({ document, dirty, kind } with kind edit, undo, redo, remote or save), document-error, page-change, zoom-change, shape-select, selection-change, office-ribbon-add-in and collaboration-change. File loading uses the imperative load(File | Blob | Uint8Array | ArrayBuffer) handle; document is not a file URL. Provide a height for the viewer host. Mount and load files in the browser.

The handle supports fit(), replacePlainText(pageId, shapeId, text), applyEdits(edits), undo(), redo() and exportVsdx(). exportVsdx() returns { bytes, dirty, diagnostics }; saving or downloading those bytes is the application's responsibility, and handle.controller.markClean() declares them saved. Sharing state is on the handle's element: collaborationState, reconnectCollaboration() and stopCollaboration(). Load original bytes through load() to enable source-backed editing and export. Handles are usable after mount.

Every viewer package includes the same browser UI and re-exports the visio-core document API. Parsing and editing belong to ooxml-core/visio; framework bindings only manage lifecycle, properties and events.

Compose your own UI

To build a custom diagram UI instead of mounting the whole viewer, use the building blocks: useViewerBuildingBlocks, DiagramCanvas, Toolbar, PageNavigation, Inspector and ShapesPane. The composable returns refs for the flat toolbarProps (page, zoom, selection, search, enabled flags and callbacks), mode, loading/error and markClean(). Hosts pass canEdit (read-only until true) and optional onOpenSettings/onOpenShareDialog/onOpenPageSetup/onOpenFile callbacks for dialogs they own. See composable building blocks.

Limitations

Rendering and editing are beta features. Supported text and geometry edits are bounded by core validation; unsupported operations reject and diagnostics report limitations. Native Visio layout parity and lossless export are not established. Files stay in the browser unless your application sends them elsewhere.

Documentation

Viewer guide | Demo | Source

Vue also emits the shared kebab-case events, such as @document-change.

License

Apache-2.0.