Tiptapify

Tiptap 3 rich text editor for Vue 3 with Vuetify 3 toolbar implementation

Beta Status

This project is currently in Beta. It is feature-complete but may still have some bugs to fix.

Features

Vuetify 3 Components

Beautiful Material Design toolbar built entirely with Vuetify 3 components

30+ Extensions

Rich text formatting, media embedding, tables, code blocks with syntax highlighting

Slash Commands

Type / to trigger quick-insert menu for headings, lists, media, and more

Internationalization

20+ languages supported via vue-i18n

Dark Theme

Automatic dark/light mode support that integrates with your Vuetify theme

TypeScript

Full TypeScript support with exported types for all toolbar items and props

Quick Start

bash

npm i tiptapify
# or
pnpm i tiptapify

vue

<script setup lang="ts">
const handleEditorReady = (options) => {
  console.log('HTML:', options.getHTML())
  console.log('JSON:', options.getJSON())
}
</script>

<template>
  <Tiptapify
    placeholder="Start writing..."
    @editor-ready="handleEditorReady"
  />
</template>

Peer Dependencies

Tiptapify requires Vue 3.x, Vuetify 3.x or 4.x, vue-i18n 11+, and @mdi/js as peer dependencies. See the Installation guide for the full setup.

License

MIT — GitHub Repository