Umo Editor: a Vue 3 and Tiptap document editor that paginates like Word

Pagination is the feature that separates it

Umo Editor is an open-source document editor based on Vue3 and Tiptap3, providing an online editing experience similar to Microsoft Word.

The distinguishing capability is pagination mode. Most browser editors give you a scrolling block of rich text, which is fine for a comment box and wrong for a document that has to be printed, signed or laid out. Umo Editor renders the document as pages, with page settings, print and print preview, and a document export and sharing feature, so the thing the user sees on screen is the thing that comes out of the printer.

The design philosophy section states the intent plainly: Umo Editor aims to simplify document editing in web applications by providing Microsoft Word-like powerful editing capabilities and pagination mode while maintaining the convenience of web applications. The named use cases are government and enterprise information management systems, academic research writing, team document collaboration, knowledge base management and personal note organization.

That list of use cases is what explains the Chinese-language origin, which the project states directly, describing itself as designed for users in China. A government information system, an academic writing tool and an enterprise knowledge base are the same set of requirements everywhere, and the differences are in what they expect the interface to feel like and where the deployment has to run.

The rest of the feature set follows from the document model. Markdown syntax support, so a user can type Markdown and get a document. Rich text editing, and insertion of various node types in multiple formats. Integrated practical tools and a presentation mode. Custom extensions, which is the extension point for anything the editor does not ship. Multilingual settings, a dark theme, and a standalone document preview component called Umo Viewer that you can integrate to preview documents.

The package is published on npm as `@umoteam/editor`, the licence is MIT, and the current version in the manifest is 11.1.1.

How it integrates, and the iframe fallback

The integration story is short and the second half of it is the interesting part.

As an independent Vue3 plugin, Umo Editor can be easily integrated into various Vue3 projects with zero configuration. That is the pitch, and for a Vue 3 application it is close to literal, since the package is a normal ES module with a style entry point and the exports map in the manifest points at the built JavaScript and the stylesheet:

"exports": {
  ".": {
    "import": "./dist/umo-editor.js"
  },
  "./style": {
    "import": "./dist/umo-editor.css"
  }
}

For non-Vue3 projects, you can embed Umo Editor into your project via an iframe, and the documentation links a page on it in the getting started section.

The iframe route is the honest compromise and it has a real cost. A document editor inside an iframe cannot share the host page's state, and any workflow that involves a dialog, a file picker or a drag of a component from the host application has to go through the frame boundary. It works for a self contained editor panel, which is the common case, and it is a poor fit for an editor that has to feel like part of a larger application.

The project supports the decision with a set of resources rather than an argument. There is a demo repository at github.com/umodoc/demo with sample code, and it can be previewed and run online through StackBlitz, CodeSandbox or GitHub Pages, with links to each. There is a Playground at the umodoc.com demo URL, including a variant with the pane hidden, and a standalone documentation site at dev.umodoc.com with English and Chinese versions of the editor documentation.

The standalone preview component is the other half of the story. Umo Viewer is a separate project, umodoc/viewer, that users can integrate into their projects to preview documents, which means the read path and the edit path are separate pieces and a team can ship a read only viewer without pulling in the whole editor.

A separate mobile edition, deliberately not a trimmed one

The mobile edition is described in a way that is worth reading closely, because the usual pattern of a mobile port is a reduction and this one is explicitly not that.

Umo Editor Mobile is a mobile document editor built with Vue3 and Tiptap3. It supports the complete preview, edit and save workflow and can be integrated directly into business systems as a standalone editor. Rather than being a simple trimmed-down version of Umo Editor, it is an independent product redesigned for touch-first scenarios, with its own save state machine, auto-save, back-navigation guards, history, internationalization, theming and extension capabilities. At the same time, it keeps its configuration, events and method naming as aligned with Umo Editor as possible, helping teams achieve a more unified multi-platform integration at lower cost.

So the design is a deliberate duplication. The mobile editor has its own save state machine, which makes sense once you think about it, because the hard problem on a phone is not the editing but the saving, and a mobile browser can be killed at any moment, so the state machine has to model dirty state, in-flight saves and what happens when the user navigates back. The back-navigation guards are the visible symptom of that, since a browser back gesture on a phone during an unsaved edit is the classic way to lose work.

The alignment of configuration, events and method naming with the desktop editor is the other half of the decision, and it is the part that costs the author money in development time. The alternative would be one codebase with conditionals, and a mobile application with a different set of gestures and a different set of failure modes tends to accumulate conditionals until it is two applications in one.

The advice the project gives for teams supporting both is a good one and worth repeating. If you plan to support both desktop and mobile, we recommend abstracting a unified editor adapter layer in your business application first, so you can reuse the document model, configuration semantics and save flow while reducing long-term maintenance costs.

That recommendation is essentially the same as the duplication decision seen from the application side. The two editors keep the same vocabulary so that an adapter layer can be thin, and the application provides that layer rather than each editor providing its own abstraction.

The mobile edition has its own site at mobile.umodoc.com, its own mobile playground at em.umodoc.com, and its own documentation section.

The build, the package shape and the tooling

The repository is a Vue 3 library project and the manifest is small and readable.

The package is `@umoteam/editor`, marked as `type: module`, and the published `files` array is just `dist`, so only the build output ships. The build is `vite build`, the dev server is `vite --port 9000 --open --force`, and the prepare script runs husky so the git hooks are installed.

The lint and format tooling is worth noting because it is not what most Vue projects use. The format script is `oxfmt --write.` and the lint script is `oxlint --fix src`, and the repository has an `.oxfmtrc.json` and an `.oxlintrc.json` at the top level.

There is also a `.stylelintrc.json` for the CSS, a `vite.config.js`, a `jsconfig.json`, an `index.html` for the dev playground, a `public/` directory, a `src/` directory and a `TODO` file at the top level, which is a small sign of a project that keeps its roadmap in the repository.

The `analyzer` script runs `vite-bundle-visualizer`, which is a small but useful addition for a library that ships a full editor, since it shows you what ended up in the bundle and whether the editor's dependencies dominate the size of your application.

The version number is the other thing to note. The manifest is at 11.1.1 while the project was described as being based on Tiptap3, which is a current generation of the editor framework, and the major version of the package has moved well past the point where the initial release was. There are no GitHub releases, so the npm version is the version history, and the last push was on 2026-09-16.

The README also carries a Chinese version at README.zh-CN.md and a `CHANGELOG.md`, and the npm badge points at the `@umoteam/editor` package rather than at a differently named one, so the package name and the repository name differ.

Editorial conclusion

Umo Editor fits a web application that needs documents with pages rather than a single scrolling field, because pagination mode, page settings, print and print preview and document export are all built in, and because it runs entirely in the browser so an intranet deployment keeps the document data inside the organisation. Skip it if you need a plain rich text input for a form field, since this is a full editor, and skip it if your stack is not Vue 3, where the fallback is an iframe, which is a workable but lossy integration. Before you commit, check the browser support table and the Tiptap 3 requirement, and note the release state, with the manifest at 11.1.1 and the last push on 2026-09-16.

Frequently asked questions

Official sources

1. Issues
2. License: MIT
3. Project website
4. README
5. umodoc/editor on GitHub