Security News
The Changelog Podcast: Practical Steps to Stay Safe on npm
Learn the essential steps every developer should take to stay secure on npm and reduce exposure to supply chain attacks.
By Sarah Gooding -  Oct 31, 2025
🚀 DAY 5 OF LAUNCH WEEK: Introducing Socket Firewall Enterprise.Learn more →
vue-document-editor
Advanced tools
vue-document-editor is a rich-text editor built on top of Vue.js, using the native contenteditable browser implementation and some JavaScript trickery to spread content over paper-sized pages. It is mainly designed to allow targeted modifications to pre-formatted documents using HTML or interactive templates.
:speech_balloon: This package does not intend to replace a proper document editor with full functionality. If you're looking for a powerful word processor, check out CKEditor for Vue.js.
Features
:rocket: See live demo
- Use your Vue.js components as interactive page templates
- Word-by-word page splitting with forward and backward propagation (still experimental)
- Predefined page breaks
- Native Print compatible
- Dynamic document format and margins in millimeters
- Custom page overlays (headers, footers, page numbers)
- Smart zoom and page display modes
- Computes text style at caret position
:speech_balloon: This package doesn't include any toolbar. The demo features vue-file-toolbar-menu for the toolbar.
Installation
In your Vue.js project:
npm install vue-document-editor
:warning: Your Vue.js project must have scss support
:speech_balloon: If you prefer static files, import assets from the dist folder
Basic example
MyComponent.vue
<template>
<div style="font-family: Avenir, sans-serif">
<vue-document-editor :content.sync="content" />
</div>
</template>
<script>
import VueDocumentEditor from 'vue-document-editor'
export default {
components: { VueDocumentEditor },
data () {
return {
content: ["<h1>Hello!</h1>Fill this page with text and new pages will be created as it overflows."]
}
}
}
</script>
same example using static files loaded with a CDN
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-document-editor@1/dist/VueDocumentEditor.umd.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-document-editor@1/dist/VueDocumentEditor.css" rel="stylesheet">
</head>
<body>
<div id="app">
<div style="font-family: Avenir, sans-serif">
<vue-document-editor :content.sync="content" />
</div>
</div>
<script>
var app = new Vue({
el: '#app',
components: { VueDocumentEditor },
data () {
return {
content: ["<h1>Hello!</h1>Fill this page with text and new pages will be created as it overflows."]
}
}
})
</script>
</body>
</html>
Complete example
See the Demo.vue file and the InvoiceTemplate.vue file corresponding to the live demo.
API
For the list of props, data and styling variables: read the API.
Known issues / limitations
- Undo / Redo: Native undo/redo needs to be rewritten as the split mechanism modifies the HTML content at every input, so the navigator is lost. You have to implement it yourself by watching
contentupdates and storing them in a stack, then restoring them. Demo.vue implements this. Also your interactive templates need to have a custom undo/redo management if their editable fields are not synced with thecontent. - Performance: For now, large texts must be divided into multiple paragraphs and large page numbers can slow down the entire document.
- Safari print: Safari adds print margins unless you choose a borderless paper format in the print box. This has to be done manually. I guess there is no workaround for this issue yet.
- Tables, images: Image/table placement and sizing is not included. You can implement it specifically for your needs. However, table rows split fine over multiple pages.
Project development
npm run servecompiles and hot-reloads demo for developmentnpm run lintlints and fixes filesnpm run buildcompiles and minifies production files and demo
Licensing
Copyright (c) 2020 Romain Lamothe, MIT License
v1.2.0
- Adding
overlayfunctionality and documentation - Enable printing of CSS background colors/image
- Dependencies upgrade
FAQs
Paper-sized WYSIWYG document editor for Vue apps
The npm package vue-document-editor receives a total of 804 weekly downloads. As such, vue-document-editor popularity was classified as not popular.
We found that vue-document-editor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 01 Mar 2021
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Security Community Slams MIT-linked Report Claiming AI Powers 80% of Ransomware
Experts push back on new claims about AI-driven ransomware, warning that hype and sponsored research are distorting how the threat is understood.
By Sarah Gooding -  Oct 30, 2025
Security News
Ruby Core Team Assumes Stewardship of RubyGems and Bundler, Former Maintainers Offer to Transfer All Rights to Matz
Ruby's creator Matz assumes control of RubyGems and Bundler repositories while former maintainers agree to step back and transfer all rights to end the dispute.
By Sarah Gooding -  Oct 29, 2025