build69
Sign inGet API key
build69  /  Components  /  Text Inputs  /  RichTextEditor

RichTextEditor

v1.0.9NewUpdated 27 Aug 2026

Tiptap-based WYSIWYG editor with a token-styled formatting toolbar: paragraph/H1–H3 select, bold, italic, strike, inline code, blockquote, bullet/ordered lists, validated link popover (http(s)/mailto) and undo/redo. Cont

View source← Back to catalog

Preview

Live · 11 stories
DefaultOpen ↗
▸Why this is recommendededitorwysiwygrich-texttiptap+4

The default, out-of-the-box RichTextEditor.

Recommended for+14
  • ✓Quotation / invoice terms and notes
  • ✓Email or LINE broadcast body composition
  • ✓Product descriptions
  • ✓Meeting minutes and internal docs
Tags+6
editorwysiwygrich-texttiptapprosemirrorhtmltoolbardefault
Features+4
  • Controlled (value) and uncontrolled (defaultValue) HTML string API
  • onValueChange(html) plus optional onUpdateJSON(json)
  • Toolbar: block select, bold / italic / strike / code, blockquote, lists, link, undo / redo
  • Link popover with http(s)/mailto validation and remove-link action
  • Soft maxLength: typing blocked at limit, character-count footer with warn/over states
  • Label + hint wiring via aria-labelledby / aria-describedby
  • Toolbar toggles expose aria-pressed; arrow-key focus movement inside role="toolbar"
  • Read-only mode (editable={false}) and error state (aria-invalid + destructive ring)
  • SSR-safe: immediatelyRender: false, no window/document during render
  • i18n: labels prop overrides all toolbar and link-popover strings
Not recommended for−2
  • ✕Plain-text or markdown-first input (use Textarea)
  • ✕Full document authoring with tables/images (needs extra tiptap extensions)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "RichTextEditor" })

Usage

import { RichTextEditor } from '@/components/inputs/rich-text-editor';

<RichTextEditor
  label="Quotation notes"
  defaultValue="<p>ราคานี้รวมภาษีมูลค่าเพิ่ม 7% แล้ว</p>"
  onValueChange={setHtml}
  maxLength={2000}
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
value

Controlled HTML value

string—
defaultValue

Initial HTML (uncontrolled)

string—
onValueChange

Fires with HTML on every change

(html: string) => void—
onUpdateJSON

Fires with ProseMirror JSON on every change

(json: Record<string, unknown>) => void—
placeholder

Shown while the document is empty

string—
editable

false renders read-only with disabled toolbar

boolean—
minHeight

Minimum height of the writing area

number | string—
maxLength

Soft character limit with count footer

number—
error

Invalid state (aria-invalid + destructive ring)

boolean—
label

Visible label wired via aria-labelledby

ReactNode—
hint

Helper text wired via aria-describedby

ReactNode—
labels

Override built-in UI strings (i18n)

Partial<RichTextEditorLabels>—

Related

Platform docsAll componentsSource files