Forms

Rich Text Editor

Tiptap WYSIWYG editor with a formatting toolbar and HTML output.

Import

tsx

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

bash

npx cronus-ui add rich-text-editor

Examples

Default

A Tiptap WYSIWYG editor with a Cronus-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"
    />
  );
}

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component RichTextEditorDefault layout:inline style:rich-text-editor {
  aria-label:"Post body"
  label "Write something…"
  text "Write something…"
}

page "/audit/rich-text-editor/default" type:custom {
  use RichTextEditorDefault
}

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.