Components / HTML Editor

HTML Editor

Explore every variant and expand each example’s formatted usage code.

API reference

HTML Editor

Edit rich text visually or as HTML, with formatting commands and explicit save or cancel actions.

↗

HTML Rich Text Editor

Launch notes

Keep cell notes simple and readable.

Focus on the next useful step.

const ready = true;
launch();

Review changes
Share with the team

Shift+Enter for a line break. Alt+F10 for formatting; Esc returns to text.

Saved HTML

<h2>Launch notes</h2>
<p>Keep cell notes <strong>simple</strong> and readable.</p>
<blockquote>
  <p>Focus on the next useful step.</p>
</blockquote>
<pre>const ready = true;
launch();</pre>
<ul>
  <li>Review changes</li>
  <li>Share with the team</li>
</ul>

<HtmlEditor
  key={revision}
  value={saved}
  autoApply={false}
  actions={{ apply: 'Save' }}
  onApply={(value) => {
    setSaved(value);
    setRevision((current) => current + 1);
  }}
  onCancel={() => setRevision((current) => current + 1)}
/>
<div class="catalog-rich-text-result">
  <span>Saved HTML</span>
  <pre tabIndex={0}>
    <output aria-label="Saved HTML">
      <HtmlSyntax code={formattedHtml} />
    </output>
  </pre>
</div>

API reference

Props, events and methods for every component.

v4.0.0

Based on the Preact TypeScript contracts. Includes inherited HTML attributes and public controller methods. Expand an underlined type to inspect its values, fields and callback arguments.

HtmlEditor8 props2 callbacks0 methods