React Email to HTML

Paste a React Email component and this page returns the HTML and the plain text. Rendering stays in your browser.

The box runs render() on the function you export as the default. render() walks that function once and writes the tags. The frame shows that HTML. The plain text is a second render() of the same function with the text result, so a client that does not show HTML still has the words.

Hooks do not run in the message

Email is the HTML render() returns. It is not a page that stays mounted. render() does not commit an effect, and it does not render a second time, so useEffect does not run. useState keeps the value you passed in, and calling the setter changes nothing in the message. A useMemo or useCallback from that first walk is not saved for a later one. Write the sentence in the element you return.

A component that reads the clock, a signed-in user, or a request inside the function will not do that here. The words have to be in the elements you return.

What you can paste

A function that returns elements such as Html, Body, Container, Text, and Button. An import line is ignored, because those elements are already available. A type annotation is ignored. Name the function and export it as the default, or export one function and nothing else.

The preview is that HTML in a frame on this page. It is not a mail client, and a client can still wrap the same HTML differently.

Send the HTML

POST /emails accepts html and text together with from, to, and subject. The block below is the call the API reference prints. After you render, the box on this page fills html and text from your component. This page does not send the message.

curl -sS -X POST https://api.agentisend.com/emails \
  -H "Authorization: Bearer $AGENTISEND_API_KEY" \
  -H "Idempotency-Key: $(uuidgen)" \
  -H "Content-Type: application/json" \
  -d '{"from":"billing@yourdomain.com","to":"delivered@simulator.agentisend.com","subject":"Your receipt","text":"Thanks — the details are attached."}'

201
{
  "id": "9c8f8f0e-3d1a-4d3f-9a1e-2b7c1a0f5e42",
  "simulated": true,
  "warnings": []
}

The DNS check reads a domain, the SPF lookup checker counts lookups, the DMARC generator writes the record, the bounce decoder reads a diagnostic, the budget calculator turns a volume into a key ceiling, and the email API cost calculator prices a monthly volume.