Rich Text Editor

A WYSIWYG editor for HTML content, built on Tiptap — paragraph format, bold, italic, underline, links and lists, with a toolbar that reflects the caret's current formatting and offers only the controls a screen asks for.

sizedefault · xl

value / onChangecontrolled HTML content

defaultValueuncontrolled initial HTML

placeholderempty-state hint text

disabledboolean

toolbarwhich controls to offer

Playground

Size— size

Disabled— disabled

Basic — uncontrolled

Controlled — value / onChange

HTML output

<p>Edit this <strong>text</strong> and watch the HTML output update.</p>

Empty state — placeholder

Formatting — headings, marks and lists

Toolbar — choosing the controls

toolbar unset — every control

toolbar={["bold","italic","underline","link","orderedList","bulletList"]}

toolbar={["bold","italic","underline","link","clearFormatting"]}

toolbar={["bold","link"]}

toolbar={[]} — no toolbar at all

Disabled

Sizes

size="xl"

size="default"

Tokens used

11 semantic tokens consumed by this component.

--inputInput

bg-inputborder-input

--ringRing

ring-ringring

--destructiveDestructive

bg-destructivetext-destructiveborder-destructivering-destructive

--mutedMuted

bg-mutedtext-mutedborder-muted

--muted-foregroundMuted Foreground

text-muted-foreground

--foregroundForeground

text-foreground

--popoverPopover

bg-popover

--popover-foregroundPopover Foreground

text-popover-foreground

--accentAccent

bg-accenttext-accentborder-accent

--accent-foregroundAccent Foreground

text-accent-foreground

--primaryPrimary

bg-primarytext-primaryborder-primaryring-primary