docx-vue-viewer

docx-vue-viewer

A browser Word document editor for Vue 3, using one shared editor and the canonical OOXML document engine.

Live demo | npm | Full docs | Source

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

Install

npm install docx-vue-viewer

Use the framework peers declared by this package: vue (^3.5.0). Existing framework apps normally already provide them.

The package bundles its editor UI and adapter. The core model and shared controls are installed as regular registry dependencies and the model API is re-exported. One viewer package is enough; no separate core install is required.

Quick start

<script setup lang="ts">
import { shallowRef } from 'vue';
import { createDocument, WordEditor } from 'docx-vue-viewer';

const model = shallowRef(createDocument());
</script>
<template>
	<WordEditor :document-model="model" @document-change="model = $event" />
</template>

Mount in the browser and give the host a height. Use one editor package per application: each registers the same editor custom element.

Features

API

The shared props, event handlers, loadDocument and detectDocumentFormat helpers are available from the package. Framework handles expose load, save and download. The vanilla package supplies mountEditor(container, options) for framework-free lifecycle management. ProseMirror, docx-core, ooxml-core and ooxml-ui are regular dependencies; document and layout algorithms live in OOXML core.

Custom editor UI

To render only the controls you use, with your own design system, use the building blocks. useViewerBuildingBlocks returns canvasProps for DocumentCanvas plus flat toolbarProps, navigationProps and statusProps; the optional Toolbar, PageNavigation and StatusBar components consume them. The surface is read-only until you pass canEdit: true; a read-only surface still allows selection, keyboard navigation and copy. Hosts that relied on the former editable default must now pass canEdit: true. See Building blocks.

Limitations

This is an early editor. It does not establish Microsoft Word layout parity or lossless saving for unsupported features. Legacy DOC support is limited to main-body text with constrained paragraph edits. SmartArt is display-only and charts render as placeholders.

Documentation

Framework guide | Bindings

License

Apache-2.0.