@editkit/vue

EditKit Vue Rich Text Editor — @editkit/vue

A TypeScript WYSIWYG editor component and composable for Vue 3 and Nuxt

@editkit/vue is the official Vue 3 and Nuxt integration for EditKit Text Editor, with v-model, native tables, a color picker, and floating menus.

⚡ Why @editkit/vue?

• 🚀 No Third-Party Editor Engine: Built in TypeScript without ProseMirror, Lexical, Slate, or Quill.
• 🟢 Native Vue 3: Fully supports v-model, ref, reactive, <script setup>, and Nuxt 3.
• 📊 First-Class Interactive Tables: 6×6 hover grid selector, single-click row/column management, and cell coloring.
• 🎨 2D HSV Custom Color Picker: 21 palette swatches + 2D spectrum canvas and hue slider.
• 🫧 Contextual Floating Menus: Smart text selection bubble toolbar, floating table actions, and image resize bar.
• 🎛️ Granular Feature Props: Turn any toolbar button on or off with boolean props.
• 🌗 CSS Variable Theming: Sleek dark & light modes. Easily customized via plain CSS.

📦 Installation

# Using npm
npm install @editkit/vue @editkit/ui

# Using pnpm
pnpm add @editkit/vue @editkit/ui

# Using yarn
yarn add @editkit/vue @editkit/ui

All-in-one alternative: npm install editkit-text-editor vue, then import from editkit-text-editor/vue and editkit-text-editor/styles.

🚀 Quick Start

1. Ready-to-Use Component (<EditKitEditor /> with v-model)

<script setup lang="ts">
import { ref } from 'vue';
import { EditKitEditor } from '@editkit/vue';
import '@editkit/ui/styles';

const content = ref('<p>Hello from Vue 3 and EditKit!</p>');
</script>

<template>
  <div class="editor-wrapper max-w-4xl mx-auto p-4">
    <EditKitEditor
      v-model="content"
      theme="dark"
      placeholder="Start typing in Vue..."
      :features="{
        math: false,           // Hide LaTeX Math formula modal
        chart: false,          // Hide Chart widget
        table: true,           // Interactive 6x6 table grid
        emoji: true,           // Emoji picker
      }"
      :bubble-menu="true"
      :table-menu="true"
      :image-menu="true"
    />
  </div>
</template>

2. Composable (useEditKitEditor)

<script setup lang="ts">
import { ref } from 'vue';
import { useEditKitEditor } from '@editkit/vue';
import '@editkit/ui/styles';

const editorEl = ref<HTMLElement | null>(null);
const { editor } = useEditKitEditor(editorEl, {
  content: '<p>Composable based editor</p>',
  theme: 'dark',
});
</script>

<template>
  <div>
    <div class="toolbar flex gap-2 mb-2">
      <button @click="editor?.commands.bold()">Bold</button>
      <button @click="editor?.commands.italic()">Italic</button>
      <button @click="editor?.commands.insertTable({ rows: 3, cols: 3 })">Table</button>
    </div>
    <div ref="editorEl" />
  </div>
</template>

🎛️ Complete Component Props Reference

Core Editor Props (<EditKitEditor />)

Toolbar Feature Flags (features prop)

🎨 CSS Variable Theming

[data-editkit],
[data-editkit-theme="dark"] {
  --editkit-bg: #0c0d10;
  --editkit-card-bg: #141519;
  --editkit-toolbar-bg: #18191e;
  --editkit-border: #23252f;
  --editkit-border-focus: #7c3aed;
  --editkit-primary: #7c3aed;
  --editkit-font: 'DM Sans', sans-serif;
}

v-model, defaultValue, and composable content are trusted-HTML inputs. Sanitize content from users or external systems before passing it to EditKit and before rendering saved HTML.

📄 License

MIT © Ashikur Rahman