tiptap-ui-kit

v0.1.0

Published

4 months ago

Beautiful Tiptap 3 + Vue 3 rich-text editor theme with AI support

Tiptap UI Kit

The best open-source Tiptap rich text editor template for Vue 3 — production-ready, AI-powered, with 5 themes

Built on Tiptap 3 + Vue 3 + TypeScript + ProseMirror

🌐 Live Demo · 📚 Documentation · ✨ Features · 🤝 Contributing

⭐ Star us on GitHub — it motivates us a lot!

Looking for a Tiptap Vue 3 template? Tiptap UI Kit is an open-source, drop-in Vue 3 rich text editor component with Notion-like / Word-like themes, built-in AI writing assistance, real-time collaboration, and full TypeScript support. If you need a WYSIWYG editor for your Vue project — CMS, knowledge base, note-taking app, or document editor — this is the template to start with.

🌟 Why Tiptap UI Kit?

Tiptap UI Kit is a fully open-source, production-ready rich text editor UI kit that brings together the best of modern web technologies. It is the most feature-complete Tiptap + Vue 3 editor template available.

Compared to alternatives

| Feature | Tiptap UI Kit | Raw Tiptap | Other Vue Editors | |---------|:------------:|:----------:|:-----------------:| | Ready-to-use Vue 3 component | Yes | No (headless) | Varies | | Multiple theme presets (Notion/Word/GitHub) | 5 themes | None | 0-1 | | Built-in AI writing assistance | Yes | No | No | | Real-time collaboration (Yjs) | Yes | Paid add-on | Rare | | Dark mode | Yes | DIY | Varies | | i18n (EN/ZH-CN/ZH-TW) | Yes | No | Rare | | TypeScript support | Full | Full | Partial | | MIT License | Yes | Yes | Varies |

Key highlights

🎨 5 Beautiful Theme Presets — Notion-like, Word-like (A4 pagination), GitHub, Typora, and Default
🤖 AI-Powered Features — Continue writing, polish text, translate, summarize, custom AI commands (OpenAI-compatible)
🌓 Perfect Dark Mode — Seamless light/dark theme switching across all themes
🛠️ Modular Architecture — Use only what you need, tree-shakeable
🌍 i18n Ready — Chinese (Simplified/Traditional) and English support
💯 100% Free & Open Source — MIT licensed, free for commercial use

Perfect for building modern document editors, content management systems, note-taking apps, knowledge bases, or any Vue 3 application requiring rich text editing capabilities.

✨ Features

🎨 Core Features

Premium Themes - 5 professionally designed theme presets:
- Default - Clean and minimal
- Word - Microsoft Word-like professional layout with A4 pages
- Notion - Modern, distraction-free editing experience
- GitHub - Developer-friendly markdown style
- Typora - Elegant reading and writing
Dark Mode - Full light/dark mode support with smooth transitions
Word Mode - Professional A4 paper layout with automatic pagination
Modular Architecture - Enable only the features you need, keep bundle size small
Internationalization - Built-in support for:
- 简体中文 (Simplified Chinese)
- 繁體中文 (Traditional Chinese)
- English
Accessible - WCAG compliant with full keyboard navigation

✏️ Rich Text Editing

Text Formatting - Bold, italic, underline, strikethrough, code, highlight
Headings - H1-H6 with custom styles per theme
Lists - Ordered, unordered, and task lists with nested support
Text Alignment - Left, center, right, justify
Colors - Text color, background color, and highlight with color picker
Images - Upload, resize, drag-to-adjust with intuitive controls
Links - Smart link editing with preview bubble
Tables - Full-featured table support with merge, split, and styling
Code Blocks - Syntax highlighting powered by Lowlight
Typography - Font family, size, line height control
Special Formats - Subscript, superscript, format painter
Math Formulas - KaTeX-powered inline and block math equations

🤖 AI-Powered Features

Note: AI features work with any OpenAI-compatible API. Configure your own API key in the AI Settings.

✨ Continue Writing - AI completes your sentences and paragraphs intelligently
📝 Polish Text - Improve grammar, clarity, and style automatically
🌐 Translation - Translate to 14+ languages with one click
📄 Summarize - Extract key points from long text
🤖 Custom AI Commands - Define your own AI transformations

Supported AI Providers:

OpenAI (GPT-4, GPT-3.5)
阿里云通义千问 (Aliyun Qianwen)
DeepSeek
Ollama (local deployment)
Any OpenAI-compatible API

🚀 Advanced Features

Real-time Collaboration - Multi-user editing powered by Yjs
Drag & Drop - Intuitive content reordering with visual feedback
Search & Replace - Find and replace text across the document
Keyboard Shortcuts - Productivity-focused shortcuts for power users
Responsive Design - Optimized for mobile, tablet, and desktop
Preview Mode - Read-only rendering for content review
Zoom Control - Scale from 50% to 200%
Version History - Track and restore previous versions
Format Painter - Copy formatting across content
Paste Support - Smart paste from Word, Excel, and web pages

📦 Installation

From GitHub

# Using npm
npm install benngaihk/Tiptap-UI-Kit

# Using pnpm (recommended)
pnpm add benngaihk/Tiptap-UI-Kit

# Using yarn
yarn add benngaihk/Tiptap-UI-Kit

Peer Dependencies

Tiptap UI Kit requires the following peer dependencies:

pnpm add @tiptap/core @tiptap/pm @tiptap/starter-kit @tiptap/vue-3 vue

🚀 Quick Start

Basic Usage

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

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

const content = ref('<p>Hello Tiptap UI Kit!</p>')
const theme = ref('notion')  // default | word | notion | github | typora
const locale = ref('en-US')   // en-US | zh-CN | zh-TW
</script>

With AI Features

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

🔒 Security Note: Never hardcode API keys in production. Use environment variables or let users configure their own keys via the AI Settings modal.

Advanced Configuration

<template>
  <TiptapProEditor
    v-model="content"
    :theme="theme"
    :locale="locale"
    :readonly="false"
    :word-mode="true"
    :dark-mode="isDark"
    :show-toolbar="true"
    :show-footer="true"
    :placeholder="'Start writing...'"
    @update:modelValue="handleUpdate"
  />
</template>

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

const content = ref('')
const theme = ref('word')
const locale = ref('zh-CN')
const isDark = ref(false)

const handleUpdate = (newContent) => {
  console.log('Content updated:', newContent)
}
</script>

📚 Documentation

Themes

Tiptap UI Kit comes with 5 professionally designed themes:

| Theme | Description | Best For | |-------|-------------|----------| | default | Clean and minimal design | General purpose editing | | word | Microsoft Word-like with A4 pages | Formal documents, reports | | notion | Modern, distraction-free | Note-taking, knowledge base | | github | Developer-friendly markdown | Technical documentation | | typora | Elegant reading/writing | Long-form content, blogs |

<TiptapProEditor theme="notion" />

Localization

Supported languages: en-US, zh-CN, zh-TW

<TiptapProEditor locale="zh-CN" />

AI Configuration

Configure AI features via props or the built-in settings modal:

interface AiConfig {
  provider: 'openai' | 'aliyun' | 'deepseek' | 'ollama'
  apiKey: string
  baseUrl?: string  // Optional custom endpoint
  model?: string    // Optional model name
}

API Reference

Full API documentation is available in the API.md file.

💡 Use Cases

Tiptap UI Kit is ideal for:

CMS / Content Management Systems — Drop-in editor component for admin panels (similar to WordPress Gutenberg, but Vue-native)
Knowledge Base / Wiki — Notion-like editing experience with collaboration support
Note-Taking Applications — Rich text editing with AI-powered writing assistance
Document Editors — Word-like A4 pagination mode for formal documents and reports
Blog Platforms — Typora/GitHub-style markdown editing with live preview
SaaS Applications — Any Vue 3 app that needs embedded rich text editing
Educational Platforms — Math formula support (KaTeX) and collaborative editing
Email Composers — Rich formatting with clean HTML output

Searching for...?

If you're looking for any of the following, Tiptap UI Kit is a great fit:

Tiptap Vue 3 template / boilerplate / starter kit
Vue 3 rich text editor component
Vue WYSIWYG editor with AI
Notion-like editor for Vue
Word-like document editor for Vue
ProseMirror Vue 3 wrapper
Open-source alternative to Tiptap Editor (paid)
Vue 3 collaborative text editor
Tiptap dark mode theme
Tiptap Chinese / i18n support

🛠️ Development

Setup

# Clone the repository
git clone https://github.com/benngaihk/Tiptap-UI-Kit.git
cd Tiptap-UI-Kit

# Install dependencies
pnpm install

# Start development server
pnpm dev

Build

# Build library
pnpm build

# Build demo site
pnpm build:demo

# Run type checking
pnpm typecheck

# Run tests
pnpm test

Project Structure

src/
├── ai/                  # AI features (continue writing, polish, etc.)
├── core/                # Core editor components
├── extensions/          # Tiptap extensions
├── features/            # Toolbar features (basic & advanced)
├── locales/             # Internationalization
├── themes/              # Theme presets
├── tools/               # Optional tools (collaboration, etc.)
└── ui/                  # Reusable UI components

🤝 Contributing

We love contributions! Whether it's bug reports, feature requests, or pull requests - all contributions are welcome.

How to Contribute

🍴 Fork the repository
🌿 Create your feature branch (git checkout -b feature/amazing-feature)
💾 Commit your changes (git commit -m 'Add amazing feature')
📤 Push to the branch (git push origin feature/amazing-feature)
🎉 Open a Pull Request

Please read our Contributing Guide for more details.

Development Guidelines

Write clear commit messages
Add tests for new features
Update documentation as needed
Follow the existing code style
Ensure all tests pass before submitting

🐛 Bug Reports & Feature Requests

Found a bug or have a feature request?

🐛 Report a Bug
💡 Request a Feature

💖 Support the Project

If you find Tiptap UI Kit useful, please consider:

⭐ Star the repository - It helps others discover the project!
🐦 Share on social media - Spread the word!
☕ Buy me a coffee - Your support keeps me motivated!

☕ 请作者喝杯咖啡 | Buy Me a Coffee

您的支持是我创作的动力！Your support motivates my creation!

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

TL;DR: You can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the software. Free for commercial and personal use! 🎉

🙏 Acknowledgments

Built with these amazing technologies:

Tiptap - The headless editor framework
Vue 3 - The progressive JavaScript framework
ProseMirror - The powerful editing toolkit
Ant Design Vue - High-quality UI components
Yjs - Real-time collaboration
KaTeX - Math rendering
Lowlight - Syntax highlighting

Special thanks to all our contributors!

📮 Contact

Author: benngaihk
GitHub: @benngaihk
Issues: GitHub Issues

Made with ❤️ by the open source community

If you like this project, please give it a ⭐!

⬆ Back to Top