Back to Components

Rich Text Editor

A powerful WYSIWYG editor built with Tiptap for creating rich content.

Basic Editor

Start with an empty editor and create content

Editor with Default Content

Editor pre-populated with formatted content

Features

Supported formatting and features

Text Formatting

  • • Bold, Italic, Underline
  • • Strike-through
  • • Code inline
  • • Headings (H1-H6)
  • • Paragraphs

Content Blocks

  • • Bullet lists
  • • Ordered lists
  • • Blockquotes
  • • Code blocks
  • • Horizontal rules

Advanced Features

  • • Links
  • • Text alignment
  • • Undo/Redo
  • • Keyboard shortcuts
  • • Markdown support

Keyboard Shortcuts

  • • Cmd/Ctrl + B - Bold
  • • Cmd/Ctrl + I - Italic
  • • Cmd/Ctrl + U - Underline
  • • Cmd/Ctrl + Z - Undo
  • • Cmd/Ctrl + Shift + Z - Redo

Content Output

HTML output from the editor

Editor 1 Content

(empty)

Editor 2 Content

<h2>Welcome to the Rich Text Editor</h2><p>This is a <strong>powerful</strong> and <em>flexible</em> editor with many features:</p><ul><li>Bold, italic, and underline formatting</li><li>Headings and lists</li><li>Links and code blocks</li><li>And much more!</li></ul>