Edit Rich Text Editor · UI Element Compendium

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

{
  "html": "<div class=\"rte\" style=\"--accent:{{accent}};\">\n  <div class=\"rte__toolbar rte__toolbar--{{toolbarDensity}}\" data-density=\"{{toolbarDensity}}\" role=\"toolbar\" aria-label=\"Formatting\">\n    <button type=\"button\" class=\"rte__btn\" aria-pressed=\"{{boldActive}}\" aria-label=\"Bold\"><strong>B</strong></button>\n    <button type=\"button\" class=\"rte__btn\" aria-pressed=\"{{italicActive}}\" aria-label=\"Italic\"><em>I</em></button>\n    <button type=\"button\" class=\"rte__btn rte__btn--extra\" aria-label=\"Underline\"><span class=\"rte__u\">U</span></button>\n    <button type=\"button\" class=\"rte__btn rte__btn--extra\" aria-label=\"Bulleted list\">&#8801;</button>\n  </div>\n  <div class=\"rte__body\" contenteditable=\"true\" role=\"textbox\" aria-multiline=\"true\" aria-label=\"Document content\" style=\"font-weight:{{#if boldActive}}700{{/if}}{{#unless boldActive}}400{{/unless}};font-style:{{#if italicActive}}italic{{/if}}{{#unless italicActive}}normal{{/unless}};\">{{content}}</div>\n</div>\n<style>\n.rte { font-family: system-ui, sans-serif; color: #241430; background: #FAF7F2; border: 1.5px solid #24143020; border-radius: 10px; overflow: hidden; max-width: 380px; }\n.rte__toolbar { display: flex; gap: 2px; padding: 6px; border-bottom: 1.5px solid #24143020; }\n.rte__btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 6px; cursor: pointer; }\n.rte__btn[aria-pressed=\"true\"] { background: var(--accent); }\n.rte__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }\n.rte__u { text-decoration: underline; }\n.rte__toolbar--compact .rte__btn--extra { display: none; }\n.rte__body { padding: 14px 16px; font-size: 15px; line-height: 1.6; min-height: 3em; }\n.rte__body:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }\n</style>",
  "tailwind": "<div class=\"rte-tw max-w-[380px] bg-[#FAF7F2] text-[#241430] font-sans border-[1.5px] border-[#24143020] rounded-[10px] overflow-hidden\" style=\"--accent:{{accent}};\">\n  <div class=\"rte-tw__toolbar flex gap-0.5 p-1.5 border-b-[1.5px] border-[#24143020]\" data-density=\"{{toolbarDensity}}\" role=\"toolbar\" aria-label=\"Formatting\">\n    <button type=\"button\" class=\"w-7 h-7 inline-flex items-center justify-center rounded-md border-0 bg-transparent cursor-pointer\" aria-pressed=\"{{boldActive}}\" aria-label=\"Bold\" style=\"background:{{#if boldActive}}{{accent}}{{/if}}\"><strong>B</strong></button>\n    <button type=\"button\" class=\"w-7 h-7 inline-flex items-center justify-center rounded-md border-0 bg-transparent cursor-pointer\" aria-pressed=\"{{italicActive}}\" aria-label=\"Italic\" style=\"background:{{#if italicActive}}{{accent}}{{/if}}\"><em>I</em></button>\n    <button type=\"button\" class=\"rte-tw__extra w-7 h-7 inline-flex items-center justify-center rounded-md border-0 bg-transparent cursor-pointer\" aria-label=\"Underline\"><span class=\"underline\">U</span></button>\n    <button type=\"button\" class=\"rte-tw__extra w-7 h-7 inline-flex items-center justify-center rounded-md border-0 bg-transparent cursor-pointer\" aria-label=\"Bulleted list\">&#8801;</button>\n  </div>\n  <div class=\"px-4 py-3.5 text-[15px] leading-relaxed min-h-[3em]\" contenteditable=\"true\" role=\"textbox\" aria-multiline=\"true\" aria-label=\"Document content\" style=\"font-weight:{{#if boldActive}}700{{/if}}{{#unless boldActive}}400{{/unless}};font-style:{{#if italicActive}}italic{{/if}}{{#unless italicActive}}normal{{/unless}};\">{{content}}</div>\n</div>\n<style>\n[data-density=\"compact\"] .rte-tw__extra { display: none; }\n</style>",
  "react": "export function RichTextEditor({\n  content = \"{{content}}\",\n  toolbarDensity = \"{{toolbarDensity}}\",\n  accent = \"{{accent}}\",\n  boldActive = {{boldActive}},\n  italicActive = {{italicActive}},\n}) {\n  const compact = toolbarDensity === \"compact\";\n  const btn = (pressed) => ({ width: 28, height: 28, display: \"inline-flex\", alignItems: \"center\", justifyContent: \"center\", border: \"none\", borderRadius: 6, cursor: \"pointer\", background: pressed ? accent : \"transparent\" });\n  return (\n    <div style={{ fontFamily: \"system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", border: \"1.5px solid #24143020\", borderRadius: 10, overflow: \"hidden\", maxWidth: 380 }}>\n      <div role=\"toolbar\" aria-label=\"Formatting\" style={{ display: \"flex\", gap: 2, padding: 6, borderBottom: \"1.5px solid #24143020\" }}>\n        <button type=\"button\" aria-pressed={boldActive} aria-label=\"Bold\" style={btn(boldActive)}><strong>B</strong></button>\n        <button type=\"button\" aria-pressed={italicActive} aria-label=\"Italic\" style={btn(italicActive)}><em>I</em></button>\n        {!compact && <button type=\"button\" aria-label=\"Underline\" style={btn(false)}><span style={{ textDecoration: \"underline\" }}>U</span></button>}\n        {!compact && <button type=\"button\" aria-label=\"Bulleted list\" style={btn(false)}>{\"\\u2261\"}</button>}\n      </div>\n      <div contentEditable suppressContentEditableWarning role=\"textbox\" aria-multiline=\"true\" aria-label=\"Document content\"\n        style={{ padding: \"14px 16px\", fontSize: 15, lineHeight: 1.6, minHeight: \"3em\", fontWeight: boldActive ? 700 : 400, fontStyle: italicActive ? \"italic\" : \"normal\" }}>\n        {content}\n      </div>\n    </div>\n  );\n}"
}