Forms

Rich Text Editor

Tiptap WYSIWYG editor with a formatting toolbar and HTML output.

Import

tsx

import { RichTextEditor } from "@cooud-ui/ui";

bash

npx cooud-ui add rich-text-editor

Examples

Default

A Tiptap WYSIWYG editor with a Cooud-styled toolbar. Controlled via `value` / `onChange` (serialized HTML); `immediatelyRender: false` keeps it SSR-safe. Formats text, headings, lists, quotes, and code.

tsx

function RichTextEditorDemo() {
  const [html, setHtml] = useState(
    "<h2>Release notes</h2><p>We shipped a <strong>themeable</strong> editor with a full toolbar — try <em>bold</em>, lists, and headings.</p><ul><li>Keyboard shortcuts</li><li>Undo &amp; redo</li></ul>",
  );

  return (
    <RichTextEditor
      value={html}
      onChange={setHtml}
      placeholder="Write something…"
      aria-label="Post body"
      className="max-w-xl"
    />
  );
}

API Reference

Generated from the component's exported types.

RichTextEditorProps

Prop	Type	Default	Description
`value`	`string`	—	Controlled HTML value. When provided, external changes are synced into the editor.
`defaultValue`	`string`	—	Uncontrolled initial HTML content. Ignored once the editor has mounted.
`onChange`	`(html: string) => void`	—	Called with the serialized HTML whenever the document changes.
`placeholder`	`string`	—	Placeholder shown while the document is empty.
`editable`	`boolean`	`true`	Whether the content is editable. Defaults to `true`.
`className`	`string`	—	Extra classes for the editor shell (toolbar + content wrapper).
`aria-label`	`string`	—	Accessible label for the editable region.