Modern Rich Text
Editor for Vue 3
Build powerful editors with zero runtime dependencies. Supports Mentions, Merge Tags, Templates, Tables, Image Upload & Resizing, HTML Editing, TypeScript, and Native Browser APIs.
Built from scratch for the modern web. No TinyMCE, CKEditor, or Quill.
Everything You Need.
Rich Text Formatting
Standard bold, italic, underline, strikethrough, lists, and headings with zero bloat.
Interactive Mentions (@)
Async debounced search for user mentions with session caching and AbortSignal support.
Dynamic Merge Tags
Autocomplete drop-downs and categorized slide-out drawers for data placeholders.
Consumer-defined Templates
Insert application-provided HTML snippets through a searchable modal with live preview.
Image Upload & Resize
Drag-and-drop uploads, custom server handlers, and interactive corner-handle resizing.
Table Editing
Insert and manage interactive tables natively without external heavyweight plugins.
HTML Source Editor
Toggle between WYSIWYG mode and raw HTML source code editing instantly.
Keyboard Shortcuts
Familiar productivity shortcuts out-of-the-box (Cmd+B, Cmd+I, Undo/Redo).
Zero Dependencies
Built directly on the browser's Selection, Range, and DOMParser APIs. Only Vue 3 is needed.
Fullscreen Mode
Built-in distraction-free writing mode that expands the editor to fill the entire viewport.
Type-Safe API
First-class TypeScript support with comprehensive interfaces for props, events, and configuration.
Find, Preview & Print
Search and replace document text, inspect a sanitized preview, and print only the editor content.
Responsive Editing UI
Toolbar overflow, viewport-aware menus, active command states, word counts, and constrained editor resizing.
Media & Content Tools
Safe links, video, audio, embeds, emoji, special characters, anchors, horizontal rules, and date-time.
Sanitized HTML Pipeline
Allowlisted tags, attributes, styles, URLs, embeds, mentions, and merge tags with SSR-safe initialization.
Accessible by Design
ARIA-labelled controls, keyboard-friendly menus, and clear focus states support inclusive editing workflows.
Try the full editor
Edit the content below and explore the complete menubar, toolbar, mentions, merge tags, templates, tables, media, preview, and source tools.
Why switch?
| Feature | @erag/text-editor-vue | TinyMCE | CKEditor | Quill | Tiptap |
|---|---|---|---|---|---|
| License | 100% Free (MIT) | GPL 2+ / Commercial | GPL 2+ / Commercial | BSD-3-Clause | MIT |
| Zero External Dependencies | Requires ProseMirror | ||||
| CSS & Theme Customization | 36+ CSS Variables | Skin Builder / Complex | Custom Build required | Basic Snow theme | Unstyled Tailwind/CSS |
| First-party Vue 3 Component | Vue integration | Vue integration | Community wrapper | Vue integration | |
| Mentions (@) | Premium Plugin | Premium Plugin | Third-party | Extension | |
| Merge Tags ({{ }}) | Premium Plugin | Premium Plugin | Custom Node | ||
| Configurable Template Picker | Premium Plugin | Premium Plugin | |||
| Interactive Image Resizing | Third-party | Extension | |||
| Image Drag & Drop Upload | Third-party | Custom Extension | |||
| Interactive Table Editor | Third-party | Extension | |||
| Built-in HTML Source Dialog | |||||
| Image Upload + Server Delete Callback | Built in | Plugin / adapter | Upload adapter | Custom module | Extension / custom |
| Find, Preview, Print & Fullscreen UI | Built in | Plugin mix | Build dependent | Custom UI | Extension / custom |
| Emoji, Symbols, Anchors & Date-Time | Built in | Plugin mix | Plugin mix | Custom modules | Extensions |
| Responsive Menubar, Overflow & Status Bar | Included UI | Basic theme UI | Headless / add UI | ||
| Typed Vue Props, Events, Slots & Methods | First-party Vue 3 | Vue integration | Vue integration | Community wrapper | Vue integration |
| Laravel & Inertia.js First-Class Guide | Full guide & controllers | No official guide | No official guide | Manual setup | Community tutorials |
| XSS Security & Safe HTML Sanitization | DOMPurify & Backend guide | Built-in filter | HTML Processor | Delta format | Manual setup |
| Interactive Live Demo & Code Tabs | Live Preview + Code | Standard docs | Standard docs | Static code | Interactive examples |
| Bi-directional LTR & RTL Support | Native LTR & RTL | Extension | Extension | ||
| Advanced Table & Cell Properties Modals | Full Dialog Modals | Extension | |||
| Word, Character & Sentence Statistics | Statusbar & Dialog | Module | Extension | ||
| Searchable Emoji & Special Symbols Picker | Built-in Dialogs | Plugin | Extension | ||
| Configurable Date & Time Stamp Insertion | Built in | Extension |
Frequently Asked Questions
Is it really free for commercial projects?
Does it depend on TinyMCE, CKEditor, or Quill?
How do Mentions and Merge Tags work?
@ triggers an async user search dropdown, complete with debouncing and caching. Typing {{ triggers a dynamic merge tags dropdown. Both are fully native Vue components rendered over the editor canvas. Can I upload and resize images?
Can I use it with Laravel or Inertia.js?
imagesUploadHandler function to handle CSRF tokens and POST images directly to your Laravel controllers.