Skip to main content
EmailMark extends TipTap’s Mark class with an additional renderToReactEmail() method that controls how the mark is serialized when exporting to email HTML via composeReactEmail. Marks are used for inline formatting like bold, italic, links, and custom text annotations.

​
Import

import { EmailMark } from '@react-email/editor/core';

​
EmailMark.create

Create a new email-compatible mark from scratch. 
const Highlight = EmailMark.create({
  name: 'highlight',

  parseHTML() {
    return [{ tag: 'mark' }];
  },

  renderHTML({ HTMLAttributes }) {
    return ['mark', HTMLAttributes, 0];
  },

  renderToReactEmail({ children, style }) {
    return (
      <mark style={{ ...style, backgroundColor: '#fef08a' }}>{children}</mark>
    );
  },
});
The config object accepts all standard TipTap Mark options plus the renderToReactEmail method.

​
renderToReactEmail props

PropTypeDescription
childrenReact.ReactNodeThe content wrapped by this mark
styleReact.CSSPropertiesResolved theme styles for this mark (empty object if no theme)
markMarkThe ProseMirror mark instance
nodeNodeThe ProseMirror node that contains this mark
extensionEmailMarkThe extension instance, useful for accessing options

​
EmailMark.from

Wrap an existing TipTap mark with email serialization support. This is useful when you want to reuse a community TipTap extension and add email export support without rewriting it. 
import { EmailMark } from '@react-email/editor/core';
import Strike from '@tiptap/extension-strike';

const EmailStrike = EmailMark.from(Strike, ({ children, style }) => {
  return <s style={style}>{children}</s>;
});
The second argument is the renderToReactEmail renderer component. It receives the same props as described above.

​
.configure

Configure options on an EmailMark (same as TipTap’s .configure()): 
import { Bold } from '@react-email/editor/extensions';

const CustomBold = Bold.configure({ HTMLAttributes: { class: 'custom-bold' } });

​
.extend

Extend an EmailMark with additional behavior: 
import { Link } from '@react-email/editor/extensions';

const CustomLink = Link.extend({
  addKeyboardShortcuts() {
    return {
      'Mod-k': () => this.editor.commands.toggleLink({ href: '' }),
    };
  },
});
You can also override renderToReactEmail when extending: 
const CustomLink = Link.extend({
  renderToReactEmail({ children, style, mark }) {
    return (
      <a
        href={mark.attrs.href}
        style={{ ...style, color: '#0066cc', textDecoration: 'underline' }}
      >
        {children}
      </a>
    );
  },
});

​
See also