Editor Emoji Picker

One of our engineers recently asked if we could add emojis to our emails built in our editors.

Since our editor is extensible, we were able to add an emoji picker to our Broadcast and Template email editors.

How to use

Type : followed by an emoji name to add any emoji from a searchable list.

Build your own email editor

We open sourced our React Email editor so you can build custom experiences in your own applications. Importantly, the editor includes a default core that is extensible via custom components.

We've used this same architecture to add our emoji extension.

The composable API exposes EmailNode so you can build any custom block your users need: uploading images to a CDN, embedding social posts, rendering charts inline in an email. Each custom node defines both its HTML representation and its React Email output via renderToReactEmail.

import { EmailNode } from '@react-email/editor/core';
import { mergeAttributes } from '@tiptap/core';

const Callout = EmailNode.create({
  name: 'callout',
  group: 'block',
  content: 'inline*',

  parseHTML() {
    return [{ tag: 'div[data-callout]' }];
  },

  renderHTML({ HTMLAttributes }) {
    return [
      'div',
      mergeAttributes(HTMLAttributes, { 'data-callout': '' }),
      0,
    ];
  },

  renderToReactEmail({ children, style }) {
    return (
      <div style={{ ...style, padding: '12px 16px', backgroundColor: '#f4f4f5' }}>
        {children}
      </div>
    );
  },
});

For more help, view editor examples or read the full editor documentation.