TipTap Editor

Rich text editor built on @tiptap/vue-3. Ships with a styled toolbar covering headings, bold/italic, lists, links, images, code blocks, and an embedded media picker. Heavy component — see existing posts/blog form for full usage.

Default

Editor with the default toolbar bound to v-model.

Dark previewReplay previewOpen in new tab

Usage

Import the parts you need from the component's folder.

ts
import { TipTapEditor } from "@/components/ui/tip-tap-editor";

Without toolbar

Compact mode for short content like bios.

Dark previewReplay previewOpen in new tab

API Reference

TipTapEditor

PropTypeDefaultDescription
modelValuestring""HTML content. Supports v-model.
placeholderstring—Placeholder text when empty.
stickybooleantrueMake the toolbar sticky to the top.
minimalbooleanfalseHide the toolbar and most extensions.
showCharacterCountbooleanfalseShow a live character counter.
SlotDescription
toolbar-extraAppend extra toolbar buttons after the default set.
TextareaAlert Dialog