---
title: "Editor Emoji Picker"
slug: editor-emoji-picker
description: "The Broadcast and Template editors now include an emoji picker."
created_at: "2026-07-09"
updated_at: "2026-07-09"
image: https://cdn.resend.com/posts/editor-emoji-picker.jpg
humans: ["zeno-rocha"]
---

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

<img src="https://cdn.resend.com/posts/editor-emoji-support-1.jpg" />

Since our editor is extensible, we were able to add an emoji picker to our [Broadcast](/features/broadcasts) and [Template](/features/templates) email editors.

<YouTube videoId="4g3_Uj3dPU8" />

## How to use

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

<video
  src="https://cdn.resend.com/posts/editor-emoji-picker-1.mp4"
  autoPlay
  loop
  muted
  playsInline
  className="extraWidth"
/>

## Build your own email editor

We open sourced our [React Email editor](/blog/react-email-6) so you can build custom experiences in your own applications. Importantly, the editor includes a default core that is [extensible via custom components](https://react.email/docs/editor/advanced/extensions).

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

```tsx
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](https://react.email/editor/examples) or read the [full editor documentation](https://react.email/docs/editor/overview).