Rich text editing is one of the most common requirements in modern web applications. Whether you're building a CMS, CRM, blog platform, email template builder, documentation system, or internal admin panel, users expect a smooth editing experience.
The problem?
Most editors are either:
- Heavy and slow
- Require multiple runtime dependencies
- Difficult to customize
- Expensive for advanced features
- Complex to integrate into Vue 3 projects
That's exactly why @erag/text-editor-vue was created.
What is @erag/text-editor-vue?
@erag/text-editor-vue is a modern Vue 3 rich text editor built with TypeScript and native browser APIs.
Unlike many traditional editors, it focuses on performance, flexibility, and developer experience without introducing unnecessary runtime dependencies.
It works perfectly for:
- CMS
- Blog editors
- CRM notes
- Email template builders
- Documentation systems
- Internal admin panels
- Marketing pages
- Knowledge bases
Documentation:
https://erag.in/text-editor-vue/
GitHub:
https://github.com/eramitgupta/text-editor-vue
Why Another Vue Editor?
Many existing editors solve the problem—but often introduce new ones.
Common challenges include:
- Large bundle sizes
- Plugin dependency chains
- Complicated configuration
- Limited customization
- Paid premium features
- Difficult TypeScript support
The goal of @erag/text-editor-vue is simple:
Build a powerful Vue 3 editor that feels lightweight, modern, and easy to customize.
Features
✅ Dependency-Free Runtime
No massive runtime ecosystem.
The editor is designed to work using native browser APIs while integrating naturally into Vue 3 applications.
✅ Full TypeScript Support
Everything is written with TypeScript.
Developers benefit from:
- autocomplete
- strong typing
- IDE support
- safer development
✅ Rich Text Formatting
Supports common formatting features including:
- Bold
- Italic
- Underline
- Strike
- Headings
- Paragraphs
- Lists
- Alignment
- Colors
- Font sizes
- Blockquotes
- Code blocks
- Superscript
- Subscript
✅ Mentions
Mention users directly inside the editor.
Example:
@John
@Developer
@Support
Perfect for:
- Team collaboration
- Comments
- CRM notes
- Internal tools
✅ Merge Tags
Generate dynamic content using merge tags.
Example:
{{customer.name}}
{{company.name}}
{{current_date}}
Ideal for:
- Email templates
- CRM systems
- Invoice templates
- Marketing automation
✅ Reusable Templates
Insert predefined content with a single click.
Useful for:
- Customer replies
- Legal text
- Email signatures
- Frequently used responses
✅ Tables
Create and edit tables directly inside the editor.
Includes:
- Insert rows
- Delete rows
- Merge cells
- Split cells
- Table styling
✅ Image Upload
Supports modern image workflows including:
- Upload
- Drag & Drop
- Paste
- Resize
- Custom upload handlers
✅ Media Embeds
Embed rich media into your content.
Examples include:
- Videos
- Audio
- External media
✅ Source Code Editing
Need to edit HTML directly?
Switch between visual editing and source code whenever needed.
✅ Responsive Toolbar
The toolbar automatically adapts across different screen sizes, making it suitable for both desktop and mobile applications.
Installation
Install using npm:
npm install @erag/text-editor-vue
Basic Example
<Editor
v-model="content"
:init="editorConfig"
/>
That's it.
No complicated setup.
Perfect For
This editor is designed for projects like:
- Content Management Systems
- Blog Platforms
- CRM Software
- ERP Applications
- Email Builders
- Landing Page Builders
- Documentation Platforms
- Knowledge Bases
- Customer Support Systems
Why Developers Like It
Instead of spending hours configuring multiple plugins, developers can start with a clean editor and customize only what they need.
Some advantages include:
- Vue 3 native experience
- TypeScript-first architecture
- Modern codebase
- Easy customization
- Flexible configuration
- Clean API
- High performance
Documentation
Complete documentation, configuration guides, and examples are available here:
https://erag.in/text-editor-vue/
GitHub Repository
Source code:
https://github.com/eramitgupta/text-editor-vue
If you find the project useful, consider giving it a ⭐ on GitHub. It helps others discover the project and supports future development.
Final Thoughts
Choosing a rich text editor isn't just about formatting text—it's about finding a solution that fits naturally into your application and remains maintainable as your project grows.
@erag/text-editor-vue aims to provide a modern editing experience for Vue 3 developers with a strong focus on performance, flexibility, and developer experience.
If you're looking for a Vue 3 Rich Text Editor with TypeScript, mentions, merge tags, templates, image upload, tables, media embeds, customizable toolbar, and zero runtime dependencies, this package is worth exploring.
Happy coding! 🚀
Top comments (0)