---
title: Render React email
description: Render trusted React elements into validated HTML and text before provider submission.
---

Import `renderReactEmail`, `reactEmailTheme` and `themedReactEmailComponents` from `@corven/email-sdk/react`. Install the [matching optional peers](/getting-started/installation#add-react-rendering); core sending and the CLI do not require React.

```ts
import { Effect } from "effect";
import { createElement } from "react";
import { Email } from "@corven/email-sdk";
import {
  reactEmailTheme,
  renderReactEmail,
  themedReactEmailComponents,
} from "@corven/email-sdk/react";

const { EmailAction, EmailCard, EmailDivider, EmailDocument, EmailHeading, EmailParagraph } =
  themedReactEmailComponents(
    reactEmailTheme("light", { accent: "#234c39", fontFamily: "Georgia, serif" }),
  );

export const submitRenderedReactExample = Effect.gen(function* submitRenderedReactExample() {
  const body = yield* renderReactEmail(
    createElement(
      EmailDocument,
      { lang: "en", preview: "A synthetic component-catalog example." },
      createElement(
        EmailCard,
        null,
        createElement(EmailHeading, null, "Fictional notification"),
        createElement(EmailParagraph, null, "Fictional content rendered before submission."),
        createElement(EmailAction, { href: "https://example.invalid/review" }, "Review example"),
        createElement(EmailDivider),
        createElement(
          EmailParagraph,
          { tone: "muted" },
          "Synthetic content, not a customer message.",
        ),
      ),
    ),
  );

  const email = yield* Email;

  return yield* email.send({
    body,
    from: "sender@example.invalid",
    subject: "Synthetic React email example",
    to: "recipient@example.invalid",
  });
});
```

The program renders a body, then uses ordinary `Email.send`. Provide an `Email` Layer before execution. Rendering itself does not submit email.

## Output and failures

`renderReactEmail(element)` returns an Effect containing a frozen `{ html, text }` body. It renders HTML, derives plain text and validates the common body contract. `EmailRenderError.reason` is `invalid-template`, `render-failed` or `invalid-output`; failures do not expose original renderer diagnostics.

## Trusted application code

Components are host code and can run their own side effects. Rendering does not sanitize untrusted HTML, approve recipients or validate URL schemes. Build templates from trusted elements and authorized data; apply link and privacy rules in the host.

Interruption stops awaiting the native renderer, but cannot physically cancel component work. Keep that limit in request and approval deadlines.

Use the [component reference](/ui/components), [theme guide](/ui/themes) and [template recipes](/ui) for application layouts. Always preflight the resulting body for the selected provider; rendering success does not establish provider acceptance or email-client compatibility.