@kodifyeditor/email

Email blocks and an Outlook-safe HTML renderer for KodifyEditor.

Install

pnpm add @kodifyeditor/email @kodifyeditor/core @kodifyeditor/ui @kodifyeditor/web react

Usage

import { renderEmailHtml } from '@kodifyeditor/email';

const html = renderEmailHtml(state.email, {
  vars: { clientName: 'Jan Kowalski' },
  preheader: 'Nowości w tym tygodniu',
  width: 600
});

How the renderer stays Outlook-safe

• Table-based layout with role="presentation", cellpadding="0", cellspacing="0" and presentational bgcolor/width attributes.
• All styles inlined; no external classes are relied on for layout.
• A centered fixed-width container wrapped in MSO ghost tables (<!--[if mso]>).
• Multi-column rows use the hybrid inline-block + MSO ghost-column technique and collapse to a single column on mobile via a max-width:600px media query.
• Bulletproof buttons render as v:roundrect (VML) in Outlook and as a styled <a> everywhere else.
• XHTML doctype, o:OfficeDocumentSettings (96 DPI), mso-table-lspace/rspace resets and -ms-text-size-adjust for consistent rendering.
• Variables ({{ key }}) are merged from vars; text is HTML-escaped and newlines become <br />.

Images must be hosted at a public URL. Data-URL images (the in-editor default) are blocked by most email clients, so upload to a CDN or pass a custom uploader before sending.

MIT © Kodify