Skip to main content

Quick Reference

Every public export, every render function, every commonly-used prop. One page, links out to deeper explanations where you need them.

All Public Exports​

import {
  // Wrappers
  Email,
  Page,
  Document,
  Body,

  // Layout
  Row,
  Column,
  ColumnLayouts,
  validateColumnLayout,

  // Content
  Heading,
  Paragraph,
  Button,
  Image,
  Divider,
  Video,
  Html,
  Table,
  Social,
  Menu,

  // Render functions
  renderToHtml,
  renderToHtmlParts,
  renderToPlainText,
  renderToJson,
  renderRowToJson,

  // Config
  UnlayerProvider,
  useUnlayerConfig,
  DEFAULT_CONFIG,

  // Utilities
  htmlToTextJson,
} from '@unlayer/react-elements';

import type {
  EmailProps,
  PageProps,
  DocumentProps,
  RowProps,
  ButtonProps,
  HeadingProps,
  ParagraphProps,
  ImageProps,
  DividerProps,
  VideoProps,
  HtmlProps,
  TableProps,
  SocialProps,
  MenuProps,
  ColumnLayout,
  ValidColumnLayout,
  HtmlParts,
  UnlayerConfig,
  UnlayerProviderProps,
  DesignJSON,
  DesignBody,
  DesignRow,
  DesignColumn,
  DesignContent,
  Href,
  Icons,
  VideoSource,
  TextAlign,
  LinkStyle,
  SocialIcon,
  MenuItem,
  // Per-component value types (escape hatch via the `values` prop):
  ButtonValues,
  HeadingValues,
  ParagraphValues,
  ImageValues,
  DividerValues,
  VideoValues,
  HtmlValues,
  TableValues,
  SocialValues,
  MenuValues,
  BodyValues,
  RowValues,
  ColumnValues,
  ContentValues,
} from '@unlayer/react-elements';

Render Functions​

FunctionSignatureReturns
renderToHtml(element, config?)string
renderToHtmlParts(element, config?){ head, body } — recommended for email
renderToPlainText(element, config?)string (text/plain MIME part)
renderToJson(element)DesignJSON (root: Body/Email/Page/Document)
renderRowToJson(element)DesignRow (root: Row)

config overrides UnlayerConfig keys for one render. See Rendering API.

Tree Shape​

<Email | Page | Document | Body>      ← exactly one wrapper at the root
  <Row layout={ColumnLayouts.X}>      ← layout requires matching <Column> count
    <Column>                          ← items must live inside a column
      <Heading | Paragraph | Button | ... />
    </Column>
  </Row>
</...>

Wrappers​

WrapperModeUse ForProps
<Email>"email"Email-client safe HTML (tables)EmailProps = Omit<BodyProps, "mode">
<Page>"web"Responsive web (div + flexbox)PageProps = Omit<BodyProps, "mode">
<Document>"document"Print / PDFDocumentProps = Omit<BodyProps, "mode">
<Body>configurableAdvanced — dynamic mode or SSR config propBodyProps

Common wrapper props (defaults from the editor schema):

PropDefault
backgroundColor"#F7F8F9"
contentWidth"500px"
contentAlign"center"
contentVerticalAlign"middle"
fontFamily{ label: "Arial", value: "arial,helvetica,sans-serif" }
textColor"#000000"
linkStyle{ body: true, linkColor: "#0000ee", linkHoverColor: "#0000ee", linkUnderline: true, linkHoverUnderline: true }
backgroundImage{ url: "", fullWidth: true, repeat: "no-repeat", size: "custom", position: "center" }
previewText— (rendered as hidden 150-char preheader in email mode)
config— (Server Components escape hatch)

UnlayerConfig shape — the type accepted by <UnlayerProvider config>, <Body config>, and the second arg of renderToHtml/renderToHtmlParts/renderToPlainText:

KeyTypeDefault
cdnBaseUrlstring"https://cdn.tools.unlayer.com"
mode"web" | "email" | "document""web"
textDirectionstring—
mergeTagStateRecord<string, any>—
toSafeHtml(text, options?) => string—
headConfig{ hasFeature?, getInitialValues? }—

Layout​

<Row>​

PropTypeDefault
layoutColumnLayout—
cellsnumber[][1] (when neither layout nor cells is given)
paddingstring"0px"
backgroundColorstring""
noStackMobilebooleanfalse

<Column>​

PropTypeDefault
paddingstring"0px"
backgroundColorstring""
borderRadiusstring"0px"

ColumnLayouts​

PresetCells
OneColumn[1]
TwoEqual[1, 1]
TwoWideNarrow[2, 1]
TwoNarrowWide[1, 2]
ThreeEqual[1, 1, 1]
ThreeNarrowWideNarrow[1, 2, 1]
FourEqual[1, 1, 1, 1]
FiveEqual[1, 1, 1, 1, 1]

For arbitrary ratios, pass cells={[3, 1]} directly. The number of <Column> children must equal the number of cells.

Content Components​

<Heading>​

PropDefault
headingType"h1"
fontSize"22px"
fontWeight400
color"#000000"
textAlign"left"
lineHeight"140%"

level is a runtime alias for headingType but isn't on HeadingProps. Use headingType in typed code.

<Paragraph>​

Pass content as children (rich React) or via html (rich HTML string with inline tags <b>, <i>, <u>, <s>, <a>, <code>).

PropDefault
fontSize"14px"
color"#000000"
textAlign"left"
lineHeight"140%"

<Button>​

PropDefault
backgroundColor"#0879A1"
color"#FFFFFF"
fontSize"14px"
lineHeight"120%"
padding"10px 20px"
borderRadius"4px"
textAlign"center"
size (via values){ autoWidth: true, width: "100%" }

href accepts a plain string (auto-wrapped) or { name: "web", values: { href, target } }. For fixed-width buttons pass values={{ size: { autoWidth: false, width: '240px' } }}.

<Image>​

PropDefault
srcplaceholder URL with autoWidth: true, maxWidth: "100%"
altText (or alt)""
textAlign"center"
action{ name: "web", values: { href: "", target: "_blank" } }

src accepts a plain string (auto-wrapped) or { url, width?, height?, autoWidth?, maxWidth? }.

<Divider>​

PropDefault
width"100%"
borderTopWidth"1px"
borderTopStyle"solid"
borderTopColor"#BBBBBB"
textAlign"center"

<Video>​

Use videoUrl="https://..." (YouTube/Vimeo, auto-parsed) or pass values={{ video: { type, videoId, thumbnail } }}.

<Html>​

PropDefault
html"<strong>Hello, world!</strong>"

<Table>​

PropDefault
headersshorthand — string[]
datashorthand — string[][]
columns2 (auto-set from headers.length)
rows2 (auto-set from data.length)
enableHeadertrue

<Social>​

PropDefault
iconsshorthand — { name, url }[]
iconType"circle"
iconSize32
spacing5
align"center"
PropDefault
itemsshorthand — { text, href, target? }[] (target defaults to "_blank")
layout"horizontal"
separator""
align"center"
fontSize"14px"

Critical Rules​

RuleRightWrong
fontFamily shape{ label: "Arial", value: "arial,helvetica,sans-serif" }"Arial"
fontWeight type700"700"
Column countmatches layout exactly—
Item placementinside <Column>directly in <Row>
Column placementinside <Row>directly in wrapper
Padding values"0px""0"
Paragraph contenthtml prop or childrentext prop (doesn't exist)
<UnlayerProvider>wraps a <Body>/<Email>/<Page>/<Document>wraps just <Row>
Server Components<Body config={...}> or renderToHtml(el, config)<UnlayerProvider> (it's "use client")
Config via render fnrender the wrapper directly: renderToHtml(<Email>...</Email>, cfg)renderToHtml(<MyEmail />, cfg) — config is dropped on MyEmail unless it forwards

Common Font Stacks​

const sansFont = {
  label: 'Sans Serif',
  value: 'system-ui, -apple-system, BlinkMacSystemFont, sans-serif',
};

const serifFont = {
  label: 'Georgia',
  value: "Georgia, 'Times New Roman', Times, serif",
};

const monoFont = {
  label: 'Monospace',
  value: "'SF Mono', 'Fira Code', 'Roboto Mono', monospace",
};

Multipart Email — End to End​

import {
  Email,
  Row,
  Column,
  ColumnLayouts,
  Heading,
  Paragraph,
  Button,
  renderToHtmlParts,
  renderToPlainText,
} from '@unlayer/react-elements';

function Welcome() {
  return (
    <Email previewText="Welcome aboard!" contentWidth="600px">
      <Row layout={ColumnLayouts.OneColumn} padding="20px">
        <Column>
          <Heading headingType="h1" fontSize="24px">
            Welcome!
          </Heading>
          <Paragraph>Thanks for signing up.</Paragraph>
          <Button href="https://example.com">Get started</Button>
        </Column>
      </Row>
    </Email>
  );
}

const { head, body } = renderToHtmlParts(<Welcome />);
const text = renderToPlainText(<Welcome />);

await mailer.send({
  to: 'jane@example.com',
  subject: 'Welcome',
  html: `<!DOCTYPE html><html><head>${head}</head>${body}</html>`,
  text,
});

See Also​