Is it possible to have dynamic props in json templates for email editor

[muezz]

In my project, we have 100 or so email templates all set up with react-email and sent via resend. It works great but now we have to allow some non-technical people to be able to edit the templates.

I have been studying the docs for the email editor and I think that might work for us. But in the docs, I cannot find any reference or mention of how to handle dynamic parts in the template edited by a user.

Lets say the first line of an email is:

Hi ${userName ?? 'there'}!

Is there any way to embed it in the template so users can still edit the template while keeping the props? Other templating engines sometimes allow such variables like Hi {{userName}}! and I think I can maybe handle that with extensions. But how would complex logic like coalescing, conditionals and arrays for tables go?

Is there any primitive extension offered by the react email editor for this?

[CaptainAni187]

There's no built-in variable or merge-tag feature in the editor docs that I could find, but the editor is built for exactly this kind of extension. You can add a small custom node for variables with EmailNode, which is TipTap's Node plus a renderToReactEmail() method (see "Custom extensions" and the EmailNode API reference).

A rough sketch of an inline variable node:

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

const Variable = EmailNode.create({
  name: 'variable',
  group: 'inline',
  inline: true,
  atom: true,
  addAttributes() {
    return { name: { default: 'userName' }, fallback: { default: '' } };
  },
  renderHTML({ node }) {
    return ['span', { 'data-variable': node.attrs.name, class: 'variable-chip' }, `{{${node.attrs.name}}}`];
  },
  renderToReactEmail({ node }) {
    return <>{`{{${node.attrs.name}}}`}</>;
  },
});

Your editors insert it from a slash command or button (insertContent with { type: 'variable', attrs: { name: 'userName', fallback: 'there' } }). It shows up as an uneditable chip, so they can rewrite everything around it without breaking the placeholder. When you send, you replace {{userName}} in the rendered HTML with the real value, or the fallback if it's missing.

If you'd rather keep real React props, renderToReactEmail gets the ProseMirror node, so you can pass the data in through the extension's options and render the actual value there instead of a placeholder. The {{name}} approach is usually simpler, though, because the stored template stays plain data that non-technical people can edit safely.

[muezz]

Hey, thanks for pointing me in the right direction. I ended up diving into nodes and how tiptap works and ended up creating some features that my usecase required me to have. I feel like these features like shells, pre-defined table styles, array type variables, etc. could be useful to other people too so once I am done, I might try to find a way to get my example into the docs for the editor.

Here is a video showing those features:

Screen.Recording.2026-10-11.at.11.50.05.mp4

[CaptainAni187]

That looks great, array variables and predefined table styles would definitely be useful in the docs. Glad it pointed you in the right direction! If it answered your question, feel free to mark it as the answer.