Rendering HTML

Use renderEmailDocument() to convert a document into clean, production-ready HTML.

Basic Usage

import { renderEmailDocument } from 'block-based';
import type { EmailDocument } from 'block-based';

function exportDoc(doc: EmailDocument) {
  const html = renderEmailDocument(doc);
  // Save to file, render in an iframe, or use anywhere
  return html;
}

Output Characteristics

The generated HTML is designed for broad compatibility:

Table-based layout — uses <table>, <tr>, <td> for structure
Inline styles — all styling is inlined for maximum portability
Multi-column support — columns rendered as table cells with percentage widths
Preheader text — hidden preview text included when settings.preheaderText is set
Responsive width — content container respects settings.contentWidth (default: 640px)

What Gets Rendered

The renderer processes every part of the document:

Document Part	HTML Output
`settings.backgroundColor`	Outer `<body>` background
`settings.contentBackgroundColor`	Inner container background
`settings.fontFamily` / `fontSize` / `fontWeight`	Applied to the body wrapper
`settings.preheaderText`	Hidden `<div>` at the top of the output
Each `section`	A `<table>` row with section-level padding, background, and borders
Each `column`	A `<td>` within the section's table row
Each `block`	Block-specific HTML (see Block Types)

Using the HTML

The HTML string can be used anywhere — emails, web pages, previews:

// Example: sending as an email
const html = renderEmailDocument(doc);

await sendEmail({
  to: 'user@example.com',
  subject: 'Your newsletter',
  html,
});

Previewing in an Iframe

function Preview({ doc }: { doc: EmailDocument }) {
  const html = renderEmailDocument(doc);

  return (
    <iframe
      srcDoc={html}
      style={{ width: '100%', height: 600, border: 'none' }}
      title="Preview"
    />
  );
}