Skip to content

Up and running in three steps

Install the core package, load the stylesheet and mount an editor. Using a framework? Its package does these steps for you.

On this page

Install

Use your package manager, or load one script from a CDN with no build step.

npm install open-wysiwyg-editor

Load the styles

Load the stylesheet once. It styles the editor, its UI and its content. Your page's CSS, Tailwind included, doesn't change how the editor looks: theme it with its tokens.

import "open-wysiwyg-editor/style.css"; // or style.min.css

Render the editor

createEditor(options) mounts the editor in the element you pass and returns an editor. Call it in the browser, after the element exists.

import { createEditor } from "open-wysiwyg-editor";

const editor = createEditor({
  element: "#editor", // a selector, or an HTMLElement
  placeholder: "Write something…",
  onUpdate: (editor) => console.log(editor.getHTML()),
});

Save the content

Read the clean, sanitized HTML (or ProseMirror JSON) and load it back later.

TypeScript
editor.getHTML();              // clean, sanitized HTML: save this
editor.getJSON();              // or ProseMirror JSON
editor.setContent("<p>…</p>"); // load saved content back

Show saved HTML

On a page with no editor, load content.css and wrap the sanitized HTML in owe-content-root.

HTML
<!-- import "open-wysiwyg-editor/content.css" -->
<div class="owe-content-root">
  <!-- your sanitized, saved HTML -->
</div>

Sanitize on the server

The browser is not a security boundary. Sanitize the HTML again on the server before you store it.

Using a framework?

Install its package instead of the core. It brings the core with it and re-exports the whole API. Pick your framework

Edit this page on GitHub