react-email

Render JSON email specifications into HTML and plain-text output.

Updated Jun 24, 2026
One-click install
npx skills add https://github.com/hasnaxyz/open-render --skill react-email-hasnaxyz
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-email
Source: https://github.com/hasnaxyz/open-render/tree/main/skills/react-email
Command: npx skills add https://github.com/hasnaxyz/open-render --skill react-email-hasnaxyz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns structured email specifications into reliable HTML or plain-text output, removing the manual work of hand-coding email layouts, component wiring, and compatibility details.

Core Features & Use Cases

  • Renders JSON-based email specs with standard email components such as Html, Body, Container, Heading, Text, Link, Button, and Markdown.
  • Supports custom registries and server-side rendering for transactional messages, marketing campaigns, previews, and plain-text fallbacks.
  • Use it when you need a guardrailed email catalog that preserves client-safe layout, inline styles, visibility rules, and state-aware rendering.

Quick Start

Use the react-email skill to render your JSON email spec into a client-safe HTML email with a plain-text fallback.

Frequently Asked Questions about react-email

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render JSON email specifications into HTML and plain text?

To render JSON email specifications into HTML and plain text, apply server-side rendering to your schema-driven element trees. This approach transforms structured JSON specs into client-safe emails with inline-style compatibility and plain-text fallbacks.

What is the best way to generate transactional emails from a JSON spec?

The best way to generate transactional emails from a JSON spec is through a registry-based component catalog. This method applies server-side rendering with visibility rules and state-aware rendering to produce reliable transactional and marketing messages.

Can I use custom React Email components with a JSON rendering schema?

Yes, you can use custom components with a JSON rendering schema by utilizing custom registries. This allows you to map standard email components like Html, Body, Container, Heading, Text, Link, and Button within your server-side rendering workflow.

Does server-side rendering for emails support plain text fallbacks and inline styles?

Yes, server-side rendering for emails supports plain text fallbacks and inline styles. It processes JSON email specifications to ensure client-safe layout compatibility, preserving visibility and state-aware rendering rules across both HTML and plain-text outputs.

How do I handle visibility and state-aware rendering for HTML emails?

To handle visibility and state-aware rendering for HTML emails, process your JSON email specifications through a guardrailed component catalog. This preserves visibility rules and inline-style compatibility during server-side rendering to generate correct output.

Do I need a schema-driven element tree to render transactional emails?

Yes, you need a schema-driven element tree to render transactional emails using this method. The rendering process requires structured JSON email specifications and registry-based custom components to apply server-side rendering and generate client-safe output.