echo-editor

A modern AI-powered WYSIWYG rich-text editor for Vue, based on Tiptap and shadcn-vue

⭐ 0

▶ Demo </> Source

README

Open on GitHub ↗

Echo Editor

A modern AI-powered WYSIWYG rich-text editor for Vue, based on tiptap and shadcn-vue.

English | 中文

App Screenshot

Demo

Live Demo

Features

🎨 Beautiful UI with shadcn-vue components
✨ AI-powered writing assistance
📝 Markdown support with real-time preview
🔤 Rich text formatting (headings, lists, quotes, etc.)
📊 Tables and code blocks
🎯 Custom font sizes and styles
📄 Import from Word documents
🌍 I18n support (en, zhHans)
🧩 Extensible architecture - create your own extensions
🎭 TypeScript support
🎨 Tailwind CSS support

Installation

npm install echo-editor
# or
pnpm install echo-editor
# or
yarn add echo-editor

Usage

Method 1: Global Registration

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

const app = createApp(App)
app.use(EchoEditor)
app.mount('#app')

<script setup>
import { ref } from 'vue'
import { BaseKit } from 'echo-editor'

const content = ref('')
const extensions = [
  BaseKit.configure({
    placeholder: {
      placeholder: 'Start writing...',
    },
  }),
]
</script>

<template>
  <echo-editor :extensions="extensions" v-model="content" />
</template>

Method 2: Direct Usage

<script setup>
import { EchoEditor, BaseKit } from 'echo-editor'
import 'echo-editor/style.css'

const content = ref('')
const extensions = [
  BaseKit.configure({
    placeholder: {
      placeholder: 'Start writing...',
    },
  }),
]
</script>

<template>
  <echo-editor :extensions="extensions" v-model="content" />
</template>

Development

Install pnpm
Clone the repository
Run pnpm install
Start development server with pnpm dev

To test the build version:

pnpm examples