XL React Email Renderer

[jmarbutt]

Overview

This pull request introduces a new example for converting BlockNote documents into React Email documents, along with setup and dependencies for the @blocknote/xl-react-email-exporter package. The changes include adding a complete example implementation, updating configurations, and creating the necessary package files for React Email integration.

Example

I have setup the example in the examples folder to test with.

Implemented Rendering for react-email

This implementation is a first pass allowing exporting to react-email components to send via email. Most of the implementation was done originally in the branch https://github.com/TypeCellOS/BlockNote/tree/feature/react-email-exporter

• Paragraph - This is unchanged from the first pass in the original branch.
• Bullet List - I implemented this using standard '
  ...
  ', from what I can tell this is completely compatible with the react-email rendering
• Numbered List - Followed the pattern in the pdfExporterBlocks to create the numbered list correctly
• Check List - Setup the Check list with SVGs, I am not 100% this will work in every email client but this is a first pass. My original pass just used a simple block but did not render well. I need to test this in more email clients to find the compatibility.
• Heading - Unchanged since original implementation
• Code Block - This utilizes the built in react-email codeblock component which renders pretty nicely in the email.
• Audio, Video, Files - I have these return blank for now because they are really not compatible with email.
• Image - Unchanged
• Table - Table utilizes the section component from react-email as their recommendation. But one thing you will find is it renders 1 table per row, which this created an issue with the alignment of columns. So I am currently setting a defaultColWidth but a future enhancement may be to make that better
• Quote - Simple Implementation, not sure if it needs something else
• Page Break - Unchanged

[vercel]

@jmarbutt is attempting to deploy a commit to the TypeCell Team on Vercel.

A member of the Team first needs to authorize it.

[YousefED]

awesome stuff, I dropped some notes that I hope are helpful!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
blocknote	✅ Ready (Inspect)	Visit Preview	Jun 24, 2025 0:08am
blocknote-website	❌ Failed (Inspect)		Jun 24, 2025 0:08am

[nperez0111]

same here

[nperez0111]

Minor code-style comments, but otherwise looks great. Good work on this!

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/ariakit@1768

@blocknote/code-block

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/code-block@1768

@blocknote/core

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/core@1768

@blocknote/mantine

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/mantine@1768

@blocknote/react

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/react@1768

@blocknote/server-util

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/server-util@1768

@blocknote/shadcn

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/shadcn@1768

@blocknote/xl-ai

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-ai@1768

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-docx-exporter@1768

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-email-exporter@1768

@blocknote/xl-multi-column

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-multi-column@1768

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-odt-exporter@1768

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-pdf-exporter@1768

commit: 00d1778