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 standalone 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.

Upload images via paste, drop, or the slash command — with a stubbed uploader and an error-path toggle.

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.