Introduction

What Echo Editor is, what it ships with and how it is built.

Echo Editor is a WYSIWYG rich-text editor for Vue 3. It wraps Tiptap 3 (and therefore ProseMirror) in a ready-to-use component with a toolbar, bubble menus, a slash menu and a drag handle — all styled with shadcn-vue and Tailwind CSS 4.

Highlights

  • Batteries included — 40+ extensions: headings, lists, task lists, tables, columns, code blocks with syntax highlighting, images, video, embeds, find & replace, HTML source editing, print, fullscreen and more.
  • Fast — Tiptap is shared with your app instead of bundled, feature UIs load on demand, and the toolbar re-evaluates at most once per animation frame. See Performance.
  • Markdown & export — v-model in HTML, JSON, text or Markdown, plus export to PDF, Markdown, HTML, RTF, text and JSON.
  • Collaboration — Y.js-powered real-time editing with remote carets, shipped as a separate entry point.
  • AI — an inline AI menu that streams completions from any model or backend.
  • Accessible & international — labelled controls, keyboard-navigable toolbar, screen-reader announcements, 11 languages and RTL support.
  • Extensible — every button comes from an extension, and definePlugin() bundles your own extensions, buttons, slash commands and translations.

How it fits together

LayerResponsibility
<EchoEditor>Component: creates the Tiptap editor, renders toolbar, menus and dialogs, syncs v-model.
ExtensionsTiptap extensions extended with a button view — each one contributes schema, commands, shortcuts and its toolbar UI.
ComposablesuseEditorState, useTheme, useTiptapStore, useLocale for building your own UI around the editor.
PluginsdefinePlugin() packages extensions, buttons, slash commands and translations for reuse.

Requirements

  • Vue 3.5+
  • A bundler that understands ES modules and CSS imports (Vite, Nuxt, Rsbuild, webpack 5 …)
  • Node.js 20.19+ for development
Installation
Install the package and import the styles.