API Reference
react-markup

renderToHTML - This feature is available in the latest Canary

renderToHTML renders a React tree to non-interactive HTML.

const stream = renderToHTML(reactNode, options?)

Reference

renderToHTML(reactNode, options?)

You can call renderToHTML to render a non-interactive tree of React components to HTML. By default, it supports shared components and built-in components. Server Components are only allowed if used in a React Server environment (e.g. in Server Actions). You can also use it during Client-Side Rendering but only without Server Components.

When a <html> tag is rendered, renderToHTML will automatically add <!DOCTYPE html> doctype.

import { experimental_renderToHTML as renderToHTML } from 'react-dom/server';

const markup = await renderToHTML(<App />);

Parameters

  • reactNode: A React node you want to render to HTML. For example, a JSX element like <App />.

  • optional options: An object for server render.

    • optional identifierPrefix: A string prefix React uses for IDs generated by useId. Useful to avoid conflicts when the markup is embedded in or combined with other markup that is rendered by React.
    • optional onError: A callback that fires whenever there is a server error. By default, this only calls console.error. If you override it to log crash reports, make sure that you still call console.error. This is different to the rejection reason of the created Promise since it’ll include the parent component stack.
    • optional signal: An abort signal that lets you abort rendering. The original Promise will reject.

Returns

renderToHTML returns a Promise that will resolve with the HTML string of the rendered React tree.

Caveats

  • Will throw when Client APIs (e.g. useState or useEffect) are used.

Usage

Rendering a React tree as an Email

Await the call of renderToHTML :

import { experimental_renderToHTML as renderToHTML } from 'react-markup';
import EmailTemplate from './my-email-template-component.js'

async function action(email, name) {
  "use server";
  // ... in your server, e.g. a Server Action...
  const htmlString = await renderToHTML(<EmailTemplate name={name} />);
  // ... send e-mail using some e-mail provider
  await sendEmail({ to: email, contentType: 'text/html', body: htmlString });
}
Previousreact-markup