Skip to content
v1.0.2 · MIT

A rich text editor that works everywhere.

Accessible, RTL-first and safe under a strict CSP. One small core and a ready-made package for every framework, from plain HTML forms to Next.js.

npm install open-wysiwyg-editor
  • 10 packages

    The core plus a ready-made package for every major framework

  • WCAG 2.2 AA

    Checked with axe-core in every release

  • Strict CSP

    No unsafe-inline, Trusted Types enforced

  • MIT

    No license key, no telemetry, no cloud service

Try it right here

This is the real editor from @open-wysiwyg-editor/next. Type, format, switch language, pick a brand color, then watch the output below.

Playground options

Brand color

One color themes the buttons, links, focus ring and selection.

#0066ff

0 words0 characters

HTML
<h2>Write for everyone</h2>


<p>Format with <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike</s>, <code>code</code>, H<sub>2</sub>O, E = mc<sup>2</sup>, <mark>highlight</mark> and <a href="https://github.com/alhassan73/open-wysiwyg-editor">links</a>.</p>


<h3>Markdown-style shortcuts</h3>


<ol>
  <li>
    <p>Type <code>## </code> for a heading, <code>- </code> or <code>1. </code> for a list.</p>
  </li>
  <li>
    <p>Type <code>**bold**</code> or <code>*italic*</code> inline.</p>
  </li>
</ol>


<ul data-type="taskList">
  <li data-type="taskItem" data-checked="true">
    <p>Images ask for alternative text</p>
  </li>
  <li data-type="taskItem" data-checked="false">
    <p>Press Alt+0 for every keyboard shortcut</p>
  </li>
</ul>


<blockquote>
  <p>Accessibility is a feature, not a follow-up.</p>
</blockquote>


<table>
  <caption>Tables have a caption and header row by default</caption>
  <tr>
    <th>
      Keys
    </th>
    <th>
      Action
    </th>
  </tr>
  <tr>
    <td>
      <p>Alt+F10 / Escape</p>
    </td>
    <td>
      <p>Go to the toolbar / back to the text</p>
    </td>
  </tr>
  <tr>
    <td>
      <p>Escape, then Tab</p>
    </td>
    <td>
      <p>Leave the editor, no keyboard trap</p>
    </td>
  </tr>
</table>


<p dir="rtl">ويدعم الكتابة من اليمين إلى اليسار في نفس المستند.</p>

Everything you need to write, built in

And the things your users, your security team and your auditors ask for.

  • Accessible, WCAG 2.2

    Fully keyboard operable with no trap, screen reader announcements, Windows High Contrast, reduced motion and a dark theme. Checked with axe-core on every release.

    • WCAG 2.2 AA
    • ATAG 2.0
    • WAI-ARIA
  • Your brand, in one color

    Set ui.brand and the buttons, links, focus ring and selection follow, in light and dark. Every button has its own tokens, so the editor fits any brand and any dashboard theme.

    • ui.brand
    • --owe-brand
    • <owe-editor brand>
  • Secure by default

    DOMPurify on every input, a URL allow-list, Trusted Types and no unsafe-inline. It runs under a strict CSP.

  • RTL and Arabic, first-class

    English and Arabic built in, and you can add your own. The whole UI mirrors in RTL and every block has dir="auto".

  • Form-ready web component

    <owe-editor name> takes part in plain HTML forms, so a form post, htmx or Turbo works with no glue code.

  • Small and tree-shakable

    The whole editor, sanitizer and UI come to about 133 kB gzipped. Framework wrappers add around 1 kB.

  • Headless when you need it

    Use the full UI, or ui: false and open-wysiwyg-editor/headless for your own. Add toolbar buttons and write extensions.

  • Built on ProseMirror

    A strict document schema, transactions and undo history from ProseMirror, the proven toolkit for rich text editing.

Pick your framework

Each package re-exports the whole core API and ships the stylesheets. Install one and you are done.

Ship an editor in five minutes

Install, load the stylesheet, mount. Free and open source under the MIT license: no license key, no telemetry, no cloud service.