Installation

Install the package and import the styles.

Install the package

npm
pnpm
bun
yarn
npm i vue-echo-editor

Tiptap, ProseMirror and the UI primitives are regular dependencies and are installed automatically. They are not bundled into Echo Editor, so if your app already uses Tiptap 3 you get a single shared copy.

Import the styles

Import the stylesheet once, for example in main.ts:

main.ts
import 'vue-echo-editor/style.css'

(Optional) register the component globally

main.ts
import { createApp } from 'vue'
import { EchoEditorPlugin } from 'vue-echo-editor'
import 'vue-echo-editor/style.css'
import App from './App.vue'

createApp(App).use(EchoEditorPlugin).mount('#app')

This registers <EchoEditor> (and the legacy <echo-editor> tag). You can also import EchoEditor directly where you use it — that is what the rest of these docs do.

Optional peer dependencies

Only install these when you use the matching feature:

FeaturePackages
Collaborationyjs, @tiptap/y-tiptap, @tiptap/extension-collaboration, @tiptap/extension-collaboration-caret and a provider such as y-websocket
npm
pnpm
bun
yarn
npm i yjs y-websocket @tiptap/y-tiptap @tiptap/extension-collaboration @tiptap/extension-collaboration-caret

Package entry points

ImportContents
vue-echo-editorComponent, extensions, composables, locales, plugin API
vue-echo-editor/collaborationCollaborationKit, CollaborationUsers, useCollaborationUsers
vue-echo-editor/style.cssEditor styles (scoped to .echo-editor)

Both ESM and CommonJS builds are published, with full TypeScript declarations.

Introduction
What Echo Editor is, what it ships with and how it is built.
Quick start
Render your first editor with v-model in under a minute.