Configuration

Props, events, slots and the exposed editor instance of <EchoEditor>.

Props

PropTypeDefaultDescription
modelValuestring | JSONContent''Content, bound with v-model. Format depends on output.
output'html' | 'json' | 'text' | 'markdown''html'Format emitted through v-model. markdown requires the Markdown extension.
extensionsAnyExtension[][]Extensions to register. Create this array once.
disabledbooleanfalseRead-only mode. Hides bubble menus and disables toolbar buttons.
hideToolbarbooleanfalseHide the toolbar.
hideMenubarbooleantrueHide the File / Edit / View / Insert / Format menubar.
hideBubblebooleanfalseDisable bubble menus and the drag handle.
removeDefaultWrapperbooleanfalseEmit '' (or {}) instead of <p></p> when the document is empty.
minHeightstring | number—Minimum content height (number → px).
maxHeightstring | number—Maximum content height; content scrolls beyond it.
maxWidthstring | number—Maximum content width, centred.
darkbooleanfollows systemForce dark or light mode.
themeTheme'zinc'Accent colour, see Theming.
radius0 | 0.25 | 0.5 | 0.75 | 10.5Border radius in rem.
labelstringlocalized "Please input content"Accessible name (aria-label) of the editable area.
autofocusboolean | 'start' | 'end' | 'all' | numberfalseFocus the editor on mount.
editorPropsEditorProps—Extra ProseMirror props. attributes are merged; handleKeyDown runs after the built-in Enter handling.
editorClassstring | string[] | object—Class for the root element.
contentClassstring | string[] | object—Class for the content element.

Events

EventPayloadWhen
update:modelValuestring | JSONContentContent changed (throttled to 200 ms, flushed on blur and unmount).
change{ editor, output }Same timing as update:modelValue, with the editor instance.
create{ editor }The Tiptap editor was created.
focus{ editor, event }The editor received focus.
blur{ editor, event }The editor lost focus.
enter—Enter was pressed (without Shift). Only intercepted when a listener is attached — useful for chat inputs.
<EchoEditor
  v-model="message"
  :extensions="extensions"
  hide-toolbar
  @enter="send"
/>

Slots

SlotPropsDescription
footer{ editor }Rendered in the footer next to the character counter (requires characterCount, enabled by default in BaseKit).
<EchoEditor v-model="content" :extensions="extensions">
  <template #footer="{ editor }">
    <span class="text-xs text-muted-foreground">{{ editor.storage.characterCount.words() }} words</span>
  </template>
</EchoEditor>

Exposed instance

<script setup lang="ts">
import { useTemplateRef } from 'vue'

const echo = useTemplateRef('echo')

function insertSignature() {
  echo.value?.editor.chain().focus('end').insertContent('<p>— Sent with Echo Editor</p>').run()
}
</script>

<template>
  <EchoEditor ref="echo" :extensions="extensions" />
</template>

editor is a regular Tiptap Editor: use its commands, getHTML(), getJSON(), getText(), getMarkdown() (with the Markdown extension), events and storage.

Configuring BaseKit

BaseKit bundles the essentials. Each part can be configured or disabled:

BaseKit.configure({
  placeholder: { placeholder: 'Start writing…', showOnlyCurrent: true },
  characterCount: { limit: 10_000 },
  dropcursor: { color: '#6366f1' },
  focus: false,          // no `.focus` class on the active node
  trailingNode: false,   // don't force an empty paragraph at the end
})
OptionDefaultDescription
placeholderonPlaceholder options or false.
characterCountonCharacterCount options (limit, mode) or false.
focusonAdds a focus class to the node with the cursor.
dropcursor / gapcursoronDrag-and-drop and gap cursors.
hardBreak, paragraph, listItem, textStyleonCore nodes and marks.
trailingNodeonKeeps an empty paragraph at the end of the document.
textBubble, selection, highlightParagraphonBubble-menu text type switcher and selection helpers.
bubble—Customise the bubble menu.
Migrating to v1
Upgrade from Echo Editor 0.x (Tiptap 2) to 1.x (Tiptap 3).
Toolbar & menus
Customise the toolbar, bubble menu, slash menu, drag handle and menubar.