Editor Examples

The simplest setup — one component with everything included.

Theme switching, ref methods (export, getJSON), and callbacks — all with a single component.

Add an inspector sidebar alongside the one-line EmailEditor — no manual EditorProvider setup needed.

Minimal setup with StarterKit and no UI overlays.

Select text to see the default bubble menu with formatting options.

Type / to open the command menu. Includes default commands plus a custom "Greeting" command.

Building bubble menus from primitives.

Click a link to see the link bubble menu. Select text and press Cmd+K to add links.

Insert multi-column layouts using the toolbar buttons.

Click the button to edit its link via the button bubble menu.

Switch between Basic and Minimal themes to see how email styles change.

Edit content and export it as email-ready HTML using composeReactEmail().

A custom Callout node created with EmailNode.create — showing how to extend the editor with email-compatible nodes.

Zero-config inspector sidebar. All three inspectors render sensible defaults when no children are passed.

Cherry-pick which sections render, control collapse state, and mix in custom sections alongside built-in ones.

Build the entire inspector UI from scratch using only render-props data and plain HTML.

All components combined: bubble menus, slash commands, theming, inspector sidebar, and export.