DEV Community

benngaihk
benngaihk

Posted on

I Built a Notion-like Editor for Vue 3 with AI, 5 Themes, and Real-time Collaboration — It's 100% Free

#vue #webdev #javascript #opensource

If you've ever tried to build a rich text editor in Vue, you know the pain.

Tiptap is amazing — but it's headless. You get a powerful ProseMirror engine with zero UI. That means you spend weeks building toolbars, menus, themes, and handling edge cases before you can even show it to your users.

I spent months solving this problem, and today I'm releasing Tiptap UI Kit — a fully-featured, production-ready editor component for Vue 3. Think of it as what Tiptap would look like if it shipped with a complete UI out of the box.

Live Demo | GitHub | npm

The Problem

Here's what building a Tiptap editor from scratch looks like:

  1. Set up Tiptap with Vue 3 ✅ (easy, 30 min)
  2. Build a toolbar with 20+ formatting buttons 😅 (2 days)
  3. Handle active state tracking for every button 😰 (1 day)
  4. Make it look good 😤 (3 days)
  5. Add dark mode 🫠 (1 day)
  6. Make it responsive 💀 (1 day)
  7. Add i18n support ☠️ (1 day)
  8. Add AI features... 💸 (good luck)

By the time you're done, you've written 5,000+ lines of UI code and your editor still doesn't look as polished as Notion or Google Docs.

The Solution 

pnpm add tiptap-ui-kit
Enter fullscreen mode Exit fullscreen mode 
<template>
  <TiptapProEditor
    v-model="content"
    theme="notion"
    locale="en-US"
  />
</template>

<script setup>
import { ref } from 'vue'
import { TiptapProEditor } from 'tiptap-ui-kit'
import 'tiptap-ui-kit/style.css'

const content = ref('<p>Hello World!</p>')
</script>
Enter fullscreen mode Exit fullscreen mode

That's it. You get a full-featured editor with a Notion-like theme in 10 lines of code.

What's Included

1. Five Professional Themes

Every theme comes with full dark mode support:

Theme Inspired By Best For
Notion Notion.so Note-taking, knowledge bases
Word Microsoft Word Formal documents with A4 pagination
GitHub GitHub markdown Technical documentation
Typora Typora editor Long-form writing, blogs
Default Clean minimal General purpose

The Word theme is particularly interesting — it renders your content on actual A4-sized pages with proper margins, headers, and page breaks. Perfect for document management systems.

Switching themes is a single prop change:

<TiptapProEditor theme="word" />
<!-- or -->
<TiptapProEditor theme="notion" />
Enter fullscreen mode Exit fullscreen mode

All themes are implemented with CSS variables, so you can easily customize colors, fonts, and spacing without touching the component internals.

2. AI-Powered Writing Assistance

This is the feature I'm most proud of. The editor has built-in AI capabilities:

  • Continue Writing — Select text and AI continues your thought
  • Polish — Improve grammar, clarity, and style
  • Translate — 14+ languages with one click
  • Summarize — Extract key points from long text
  • Custom Commands — Define your own AI prompts

The AI works with any OpenAI-compatible API:

<TiptapProEditor
  v-model="content"
  :ai-config="{
    provider: 'openai',
    apiKey: 'your-key',
    model: 'gpt-4o-mini'
  }"
/>
Enter fullscreen mode Exit fullscreen mode

Supported providers out of the box:

  • OpenAI (GPT-4, GPT-4o)
  • DeepSeek
  • Aliyun Qianwen (阿里云通义千问)
  • Ollama (run models locally!)

The AI suggestions appear inline with a clean accept/reject UI — no modal popups, no context switching. It feels native.

Under the hood, it uses streaming responses so you see the AI "type" in real-time:

// How AI streaming works internally
aiApiService.continueWriting(selectedText, context, {
  onStart: () => showHighlight(),
  onMessage: ({ content }) => appendToSuggestion(content),
  onStop: () => showAcceptRejectUI(),
  onError: (error) => handleGracefully(error),
})
Enter fullscreen mode Exit fullscreen mode

Users can also configure their own API keys through a built-in settings modal — no environment variables needed.

3. Real-time Collaboration

Multi-user editing powered by Yjs, the battle-tested CRDT library:

  • Multiple users editing simultaneously
  • Live cursor positions with user names and colors
  • Online user presence indicator
  • Conflict-free resolution (CRDT, not OT)
  • Smart document initialization that handles race conditions

The collaboration system intelligently decides how to initialize content based on the current state:

Is document empty? → Use initial content
Only one user online? → Use initial content
Multiple users online? → Preserve Yjs state (don't overwrite!)
Enter fullscreen mode Exit fullscreen mode

This prevents the classic "user A's content overwrites user B's edits" problem that plagues naive collaboration implementations.

4. Everything Else

The editor also includes:

  • Rich text formatting — Bold, italic, underline, strikethrough, highlight, subscript, superscript
  • Structure — Headings (H1-H6), ordered/unordered lists, task lists, blockquotes
  • Tables — Full table support with merge, split, and cell styling
  • Code blocks — Syntax highlighting powered by Lowlight
  • Math formulas — KaTeX-powered inline and block equations
  • Images — Upload, resize, and drag-to-adjust
  • Links — Smart editing with preview bubbles
  • Search & Replace — Find and replace across the document
  • Format Painter — Copy formatting like in Word
  • Drag & Drop — Reorder content blocks visually
  • Keyboard Shortcuts — Full set of productivity shortcuts
  • Zoom — 50% to 200% scaling
  • Word Import/Export — Import .docx files and export back

Architecture Decisions

A few design choices worth sharing:

Modular by Default

You don't have to use everything. Features are controlled via props:

<TiptapProEditor
  :features="{
    table: true,
    collaboration: false,
    ai: true,
    dragHandle: true
  }"
/>
Enter fullscreen mode Exit fullscreen mode

This keeps your bundle size reasonable — unused features don't ship to the client.

CSS Variables for Theming

Instead of CSS-in-JS or scoped styles, all theming is done through CSS custom properties:

/* Notion theme uses warm grays */
--tiptap-text: #37352f;
--tiptap-primary: #2eaadc;
--tiptap-border: rgba(55, 53, 47, 0.09);

/* Word theme uses Microsoft blue */
--tiptap-text: #333333;
--tiptap-primary: #0078d4;
--tiptap-font-family: 'Calibri', 'Segoe UI', Arial;
Enter fullscreen mode Exit fullscreen mode

This means you can create your own theme in minutes by overriding a handful of variables.

Type-Safe i18n

All translations are fully typed with TypeScript. Add a new translation key and the compiler will yell at you if you miss a language:

// Supports: en-US, zh-CN, zh-TW
<TiptapProEditor locale="zh-CN" />
Enter fullscreen mode Exit fullscreen mode

Who Is This For?

I built this for developers who need a production-ready editor without spending weeks on UI work:

  • Building a CMS or admin panel
  • Building a knowledge base (like Notion)
  • Building a document management system (like Google Docs)
  • Building a note-taking app
  • Building a blog platform
  • Any Vue 3 app that needs rich text editing

If you're starting a project and thinking "I need a Tiptap Vue 3 template" — this is it.

Getting Started

Install 

pnpm add tiptap-ui-kit

# Peer dependencies
pnpm add @tiptap/core @tiptap/pm @tiptap/starter-kit @tiptap/vue-3 vue
Enter fullscreen mode Exit fullscreen mode

Basic Usage 

<template>
  <TiptapProEditor
    v-model="content"
    :theme="theme"
    :locale="locale"
    :dark-mode="isDark"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { TiptapProEditor } from 'tiptap-ui-kit'
import 'tiptap-ui-kit/style.css'

const content = ref('<p>Start writing...</p>')
const theme = ref('notion')
const locale = ref('en-US')
const isDark = ref(false)
</script>
Enter fullscreen mode Exit fullscreen mode

With AI 

<TiptapProEditor
  v-model="content"
  theme="notion"
  :ai-config="{
    provider: 'openai',
    apiKey: import.meta.env.VITE_AI_API_KEY,
    model: 'gpt-4o-mini'
  }"
/>
Enter fullscreen mode Exit fullscreen mode

Comparison with Alternatives

Feature Tiptap UI Kit Raw Tiptap Quill TinyMCE
Vue 3 native Yes Yes Plugin Plugin
Theme presets 5 0 1 3+
AI writing Yes No No Paid
Collaboration Yes (free) Paid No Paid
Dark mode Yes DIY No Yes
i18n 3 langs No No Yes
MIT License Yes Yes BSD LGPL/Paid
Price Free Free Free Free/Paid

What's Next

This is v0.1.0. Here's what's coming:

  • More themes (Google Docs, Confluence)
  • More languages (Japanese, Korean, Spanish, French)
  • Plugin system for third-party extensions
  • Vue component slots for toolbar customization
  • Mobile-optimized UI
  • Export to PDF

Try It Out

Live Demo — Try all 5 themes and AI features

GitHub — Star the repo if you find it useful!

pnpm add tiptap-ui-kit
Enter fullscreen mode Exit fullscreen mode

The entire project is MIT licensed — free for personal and commercial use. No catch, no freemium, no "contact sales."

If this saves you time, consider giving it a star on GitHub. It really helps with discoverability and motivates me to keep improving it.

Built with Vue 3, Tiptap 3, TypeScript, and a lot of coffee.

Have questions or feedback? Open an issue or find me on GitHub.

Top comments (0)