gbielbarbosa / react-email-php
A PHP library to parse Tiptap JSON from @resend/react-email editor into HTML
Requires
- php: >=8.1
- ueberdosis/tiptap-php: ^1.2
Requires (Dev)
- phpunit/phpunit: ^10.0
README
A PHP 8.1+ library designed to parse and render Tiptap JSON outputs generated by Resend React Email Editor into valid, email-safe HTML. It translates modern editor structures into cross-client compatible HTML tables.
Version Compatibility
This package processes JSON from the Resend React Email Editor. Please ensure you use compatible versions:
react-email-php |
@react-email/editor |
PHP Version |
|---|---|---|
1.x.x |
^1.0.0 |
>= 8.1 |
Installation
You can install the package via composer:
composer require gbielbarbosa/react-email-php
Usage
Converting JSON to Email-Safe HTML
To parse the JSON output from your front-end editor and render it as email-safe HTML, use the toHtml method. This method automatically handles layout components (Sections, Containers, Columns), mapping them to <table role="presentation"> tags to ensure Outlook, Apple Mail, and Gmail compatibility.
use ReactEmail\EmailParser; $json = '{"type":"doc","content":[{"type":"body","content":[{"type":"container"}]}]}'; $parser = new EmailParser(); $html = $parser->toHtml($json); echo $html;
The resulting $html will automatically include the proper HTML boilerplate (<!DOCTYPE>, <html>, <head>) if it's not present, and will dynamically inject any global styles defined in your editor's globalContent node.
Sanitizing JSON for Storage
Before saving the raw editor output to your database, you should sanitize it to prevent CSS/XSS injection payloads. The toJson method recursively traverses the JSON tree and strips invalid or malicious CSS values.
use ReactEmail\EmailParser; // Raw JSON directly from the user's request $rawJson = $_POST['editor_json']; $parser = new EmailParser(); $safeJson = $parser->toJson($rawJson); // $safeJson is now clean and ready to be stored in your database
Features
- Pure PHP implementation.
- Native rendering of complex layout components into responsive HTML tables.
- Deep integration with the Tiptap structure.
- Parses and injects global styles (from the
globalContentnode) directly into the corresponding body and container elements.
Supported Extensions
This library includes native support for the following Resend React Email Editor extensions:
- Layout blocks:
Body,Container,Section,Columns,ColumnsColumn,Div - Text elements:
Heading,Paragraph,Blockquote,CodeBlock - Media & UI:
Button,Img,Divider - Tables:
Table,TableRow,TableCell,TableHeader - Lists:
BulletList,OrderedList,ListItem - Inline Marks:
Bold,Italic,Strike,Underline,Code,Sup,Uppercase,Link
License
The MIT License (MIT). Please see License File for more information.