WYSIWYG Editor

A rich text editor built with Tiptap, featuring a customizable toolbar, bubble menu, and code blocks with syntax highlighting

Preview

Install the tiptap editor

npx shadcn@latest add https://jt-components.vercel.app/r/tiptap.json

pnpm dlx shadcn@latest add https://jt-components.vercel.app/r/tiptap.json

yarn dlx shadcn@latest add https://jt-components.vercel.app/r/tiptap.json

bunx --bun shadcn@latest add https://jt-components.vercel.app/r/tiptap.json

import Tiptap from "@/components/tiptap"

<Tiptap 
  content="<p>Initial content...</p>"
  onChange={(content) => console.log(content)}
/>

Loading component...