A fully configurable, highly intuitive rich text editor component for Vue 3. Built with TipTap and TypeScript, supporting Markdown and JSON output.
npm install rte-vueA fully configurable, ready-to-use Rich Text Editor for Vue 3.
Built on TiPTap, this editor provides a seamless WYSIWYG experience with Markdown support, customization slots, and zero-config usage.
Perfect for blogs, CMS, comment sections, or any Vue 3 app needing text editing.
- 🚀 Zero-Config: Just drop it in and it works with v-model.
- 📝 Markdown & JSON: Native support for Markdown input/output (or use JSON).
- 🎨 Component-Scoped Styles: Looks good out of the box, but easily overridable.
- 🔧 Highly Customizable:
- Configure toolbar items and groups.
- Override specific buttons or the entire toolbar via Slots.
- Custom styling for every element.
- 🧱 Block Styling: Headings, lists, links, bold, italic, strike-through out of the box.
- 🦾 TypeScript: Full TypeScript support with exported types.
Check out the examples folder for detailed usage scenarios, including:
1. Basic Usage
2. Custom Toolbar Groups
3. Theming with Tailwind CSS
4. Markdown Support
5. Custom Toolbar Buttons (Slots)
6. Form Validation Integration7. Internationalization (i18n)
8. Read-Only Display
9. Chat / Comment Input
10. Programmatic Control
``bash`
npm install rte-vue
`vue
`
`vue
placeholder="Write something amazing..."
content-format="markdown"
:heading-offset="1"
:toolbar-items="['bold', 'italic', 'heading2', 'bulletList', 'link']"
@save="handleSave"
/>
`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| modelValue / text | string | "" | The content of the editor. Supports v-model. |contentFormat
| | 'json' \| 'markdown' | 'json' | Format for input and output strings. |showToolbar
| | boolean | true | Visibility of the toolbar. |disabled
| | boolean | false | Disables editing. |placeholder
| | string | - | Placeholder text when empty. |headingOffset
| | number | 0 | Offsets heading levels (e.g., +1 makes H1 render as H2). |toolbarItems
| | ToolbarItem[] | ['bold', ...] | Array of button keys to show. |toolbarGroups
| | ToolbarItem[][] | - | Advanced: Group buttons into visual clusters. |toolbarLabels
| | Record | - | Custom labels/tooltips for buttons. |classNames
| | object | - | Object of class strings for root, editor, button, etc. |minHeight
| | string | - | CSS min-height (e.g., '200px'). |maxHeight
| | string | - | CSS max-height. |width
| | string | - | CSS width. |
| Event | Payload | Description |
|-------|---------|-------------|
| update:modelValue | string | Emitted on every change (v-model). |change
| | string | Emitted on every change. |save
| | string | Emitted when user presses Cmd+S or Ctrl+S. |focus
| | - | Emitted when editor gains focus. |blur
| | - | Emitted when editor loses focus. |
#### #toolbar{ items, groups, isActive(item), isDisabled(item), runCommand(item) }
Completely replace the toolbar area.
Scope:
#### #toolbar-button{ item, label, active, disabled, runCommand }
Customize individual buttons while keeping the default layout.
Scope:
The editor comes with minimalist base styles. You can override specific parts using the classNames prop or standard CSS.
selector (zero specificity), you can pass utility classes directly to the component via the classNames prop and they will work immediately without !important.`vue
:class-names="{
editorContent: 'bg-zinc-50 border-2 border-red-500 rounded-xl',
toolbar: 'bg-transparent border-b-0',
buttonActive: 'bg-blue-100 text-blue-700'
}"
/>
`$3
If you prefer writing custom CSS, you can target the following stable class names. | Class Name | Description |
|------------|-------------|
|
.rte-root | The top-level container element. |
| .rte-header | The header row containing the icon and title. |
| .rte-title | The header title text. |
| .rte-icon | The header icon svg. |
| .rte-toolbar | The Flex container for the toolbar area. |
| .rte-toolbar-group | The container for a group of related buttons. |
| .rte-button | The toolbar button element. |
| .rte-button-active | The active state of a toolbar button. |
| .rte-editor | The wrapper around the editor content area. |
| .rte-editor-content | The actual editable area (TipTap/ProseMirror container). |
| .rte-placeholder | The absolute positioned placeholder text. |Since all defaults use
:where(.classname), your custom CSS will always win as long as it has a specificity greater than 0 (which is basically any class selector).`css
/ No !important needed! /
.rte-editor-content {
background-color: #fdf2f8;
border-radius: 12px;
}
`⌨️ Shortcuts
- Bold:
Cmd/Ctrl + B
- Italic: Cmd/Ctrl + I
- Save: Cmd/Ctrl + S`MIT