Minimal Tiptap

Rich text editor built with Tiptap providing essential formatting tools and markdown support. Perfect for React applications requiring content editing with Next.js integration and TypeScript support.

Tiptap

Lucide React

Loading component...

'use client';import * as React from 'react';import { EditorContent, useEditor } from '@tiptap/react';import StarterKit from '@tiptap/starter-kit';import { Button } from '@/components/ui/button';import { Separator } from '@/components/ui/separator';import { Toggle } from '@/components/ui/toggle';import {  Bold,  Italic,  Strikethrough,  Code,  Heading1,  Heading2,  Heading3,  List,  ListOrdered,  Quote,  Minus,  Undo,  Redo,} from 'lucide-react';import { cn } from '@/lib/utils';interface MinimalTiptapProps {  content?: string;  onChange?: (content: string) => void;  placeholder?: string;  editable?: boolean;  className?: string;}function MinimalTiptap({  content = '',  onChange,  placeholder = 'Start typing...',  editable = true,  className,}: MinimalTiptapProps) {  const editor = useEditor({    extensions: [      StarterKit.configure({        bulletList: {          keepMarks: true,          keepAttributes: false,        },        orderedList: {          keepMarks: true,          keepAttributes: false,        },      }),    ],    content,    editable,    onUpdate: ({ editor }) => {      onChange?.(editor.getHTML());    },    editorProps: {      attributes: {        class: cn(          'prose prose-sm sm:prose-base lg:prose-lg xl:prose-2xl mx-auto focus:outline-none',          'min-h-[200px] p-4 border-0'        ),      },    },  });  if (!editor) {    return null;  }  return (    <div className={cn('border rounded-lg overflow-hidden', className)}>      <div className="border-b p-2 flex flex-wrap items-center gap-1">        <Toggle          size="sm"          pressed={editor.isActive('bold')}          onPressedChange={() => editor.chain().focus().toggleBold().run()}          disabled={!editor.can().chain().focus().toggleBold().run()}        >          <Bold className="h-4 w-4" />        </Toggle>                <Toggle          size="sm"          pressed={editor.isActive('italic')}          onPressedChange={() => editor.chain().focus().toggleItalic().run()}          disabled={!editor.can().chain().focus().toggleItalic().run()}        >          <Italic className="h-4 w-4" />        </Toggle>                <Toggle          size="sm"          pressed={editor.isActive('strike')}          onPressedChange={() => editor.chain().focus().toggleStrike().run()}          disabled={!editor.can().chain().focus().toggleStrike().run()}        >          <Strikethrough className="h-4 w-4" />        </Toggle>                <Toggle          size="sm"          pressed={editor.isActive('code')}          onPressedChange={() => editor.chain().focus().toggleCode().run()}          disabled={!editor.can().chain().focus().toggleCode().run()}        >          <Code className="h-4 w-4" />        </Toggle>        <Separator orientation="vertical" className="h-6" />        <Toggle          size="sm"          pressed={editor.isActive('heading', { level: 1 })}          onPressedChange={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}        >          <Heading1 className="h-4 w-4" />        </Toggle>                <Toggle          size="sm"          pressed={editor.isActive('heading', { level: 2 })}          onPressedChange={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}        >          <Heading2 className="h-4 w-4" />        </Toggle>                <Toggle          size="sm"          pressed={editor.isActive('heading', { level: 3 })}          onPressedChange={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}        >          <Heading3 className="h-4 w-4" />        </Toggle>        <Separator orientation="vertical" className="h-6" />        <Toggle          size="sm"          pressed={editor.isActive('bulletList')}          onPressedChange={() => editor.chain().focus().toggleBulletList().run()}        >          <List className="h-4 w-4" />        </Toggle>                <Toggle          size="sm"          pressed={editor.isActive('orderedList')}          onPressedChange={() => editor.chain().focus().toggleOrderedList().run()}        >          <ListOrdered className="h-4 w-4" />        </Toggle>                <Toggle          size="sm"          pressed={editor.isActive('blockquote')}          onPressedChange={() => editor.chain().focus().toggleBlockquote().run()}        >          <Quote className="h-4 w-4" />        </Toggle>        <Separator orientation="vertical" className="h-6" />        <Button          variant="ghost"          size="sm"          onClick={() => editor.chain().focus().setHorizontalRule().run()}        >          <Minus className="h-4 w-4" />        </Button>        <Separator orientation="vertical" className="h-6" />        <Button          variant="ghost"          size="sm"          onClick={() => editor.chain().focus().undo().run()}          disabled={!editor.can().chain().focus().undo().run()}        >          <Undo className="h-4 w-4" />        </Button>                <Button          variant="ghost"          size="sm"          onClick={() => editor.chain().focus().redo().run()}          disabled={!editor.can().chain().focus().redo().run()}        >          <Redo className="h-4 w-4" />        </Button>      </div>            <EditorContent         editor={editor}         placeholder={placeholder}      />    </div>  );}export { MinimalTiptap, type MinimalTiptapProps };

Installation

npx shadcn@latest add https://www.shadcn.io/registry/minimal-tiptap.json

npx shadcn@latest add https://www.shadcn.io/registry/minimal-tiptap.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/minimal-tiptap.json

bunx shadcn@latest add https://www.shadcn.io/registry/minimal-tiptap.json

Features

Rich text formatting with bold, italic, strikethrough, and inline code using Tiptap extensions
Heading support with H1, H2, and H3 levels for content structure and hierarchy
List creation with bullet points and numbered lists for organized content presentation
Blockquotes and horizontal rules for enhanced content styling and visual separation
Undo/redo functionality with full history tracking and keyboard shortcuts support
TypeScript support with complete interface definitions for all editor props and configurations

Use Cases

This free open source React component works well for:

Content management systems - Blog post editors and article creation in Next.js applications
Documentation platforms - Technical writing tools with markdown-like formatting using TypeScript
Comment systems - User-generated content with rich formatting capabilities and Tailwind CSS styling
Note-taking applications - Personal and collaborative writing tools with real-time updates

API Reference

MinimalTiptap

Prop	Type	Default	Description
`content`	`string`	`""`	Initial HTML content for the editor
`onChange`	`(content: string) => void`	-	Callback fired when editor content changes
`placeholder`	`string`	`"Start typing..."`	Placeholder text shown when editor is empty
`editable`	`boolean`	`true`	Whether the editor is editable or read-only
`className`	`string`	-	CSS classes for container styling

Text formatting - Bold, italic, strikethrough, and inline code formatting
Headings - H1, H2, H3 heading levels with semantic markup
Lists - Bullet lists and numbered lists with proper nesting
Content blocks - Blockquotes for emphasized content and horizontal rules
History - Undo and redo operations with keyboard shortcuts (Ctrl+Z/Ctrl+Y)

Editor Configuration

Extensions - Built on Tiptap StarterKit with essential editing capabilities
Prose styling - Tailwind Typography classes for beautiful content rendering
Keyboard shortcuts - Standard shortcuts for formatting (Ctrl+B, Ctrl+I, etc.)
Focus management - Automatic focus handling for seamless editing experience

Implementation Notes

Uses Tiptap's StarterKit for core functionality and extension management
Content is stored and retrieved as HTML for easy integration with backends
Toolbar buttons dynamically update based on current selection and cursor position
Editor automatically handles list item management and block-level element creation
Component forwards standard HTML div props for flexible integration scenarios
All formatting operations maintain proper semantic HTML structure for accessibility

Reactminimal-tiptap

On this page