As a JSX framework, JSX Mail offers some JSX tags that you can use. All tags were carefully created to ensure compatibility with your email template, so here you can see all the props that each tag accepts.

​
<a />

The <a /> tag is used to create links in your email. It accepts the following props:

PropTypeDescription
classNamestringSome class to the result HTML
hrefstringThe link URL
idstringSome ID to the result HTML
styleJSX.ElementStyleSome style to the result HTML see more here
targetstringThe link target
childrenJSX.ElementChildrenThe link text

Example

<a href="https://example.com">Example</a>

​
<b />

The <b /> tag is used to create bold text in your email. It accepts the following props:

PropTypeDescription
classNamestringSome class to the result HTML
idstringSome ID to the result HTML
styleJSX.ElementStyleSome style to the result HTML see more here
childrenJSX.ElementChildrenThe bold text

Example

<b>Example</b>

​
<body />

The <body /> tag is used to create the body of your email. It accepts the following props:

PropTypeDescription
styleJSX.ElementStyleSome style to the result HTML see more here
childrenJSX.ElementChildrenThe body content

Example

<body>
  <h1>Hello World</h1>
</body>

​
<br />

The <br /> tag is used to create a line break in your email. It accepts the following props:

PropTypeDescription
classNamestringSome class to the result HTML
idstringSome ID to the result HTML
styleJSX.ElementStyleSome style to the result HTML see more here

Example

<br />

​
<button />

The <button /> tag is used to create a button in your email. It accepts the following props:

PropTypeDescription
classNamestringSome class to the result HTML
hrefstringThe button URL
idstringSome ID to the result HTML
styleJSX.ElementStyleSome style to the result HTML see more here
childrenJSX.ElementChildrenThe button text

Example

<button href="https://example.com">Example</button>

​
<div />

The <div /> tag is used to create structure in your emails. It is super flexible and JSX Mail automatically compiles it into tables if necessary. It accepts the following props:

PropTypeDescription
idstringSome ID to the result HTML
styleJSX.ElementStyleSome style to the result HTML see more here
childrenJSX.ElementChildrenThe div content
classNamestringSome class to the result HTML
containerbooleanIf it is a container or not. If container is true, jsx mail will compile your div to a table tag in the html
sectionbooleanIf it is a section or not. If section is true, jsx mail will compile your div to a tr tag in the html
flexbooleanIf true, jsx mail will automatically place each element within its section in a separate td tag. If it is false, JSX Mail will place all elements within your section in a single td. Only sections can have this defined
alignXstringThe horizontal alignment of the div. Only sections can have this defined
alignYstringThe vertical alignment of the div. Only sections can have this defined

Example

  • Normal div
<div>
  <h1>Hello World</h1>
</div>
  • Container div
<div container>
  <div section>
    <h1>Hello World 1</h1>
  </div>
  <div section flex>
    <h2>Hello World 2</h2>
    <h2>Hello World 3</h2>
  </div>
</div>

Every container div must have at least one section div inside it.

The container div is compiled to a table, and the section div is compiled to a table row.

​
<font />

The <font /> tag is used to create a font in your email. It accepts the following props:

PropTypeDescription
hrefstringThe font URL

Example

<font href="https://example.com/font.ttf" />

Use the <font /> tag in the <head /> tag.

​
<h1-6 />

The <h1-6 /> tag is used to create a heading in your email. It accepts the following props:

PropTypeDescription
alignstringThe text alignment
classNamestringSome class to the result HTML
idstringSome ID to the result HTML
styleJSX.ElementStyleSome style to the result HTML see more here
childrenJSX.ElementChildrenThe heading text

Example

<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>

The <head /> tag is used to create the head of your email. It accepts the following props:

PropTypeDescription
childrenJSX.ElementChildrenThe head content

Example

<head>
  <title>Hello World</title>
</head>

​
<hr />

The <hr /> tag is used to create a horizontal line in your email. It accepts the following props:

PropTypeDescription
alignstringThe text alignment
sizenumberThe size of the line
widthnumberThe width of the line

Example

<hr />

​
<html />

The <html /> tag is used to create the HTML of your email. It accepts the following props:

PropTypeDescription
childrenJSX.ElementChildrenThe HTML content
langstringThe HTML language

Example

<html lang="en">
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

​
<img />

The <img /> tag is used to create an image in your email. See more about it here.

It accepts the following props:

PropTypeDescription
alignstringThe text alignment
bordernumberThe border size
heightnumberThe image height
widthnumberThe image width
srcstringThe image path see more
styleJSX.ElementStyleSome style to the result HTML see more here
altstringThe image alt text

Example

import MyImage from './my-image.png';

<img src={MyImage} alt="My Image" />;

​
<li />

The <li /> tag is used to create a list item in your email. It accepts the following props:

PropTypeDescription
classNamestringSome class to the result HTML
dirstringThe list direction
idstringSome ID to the result HTML
styleJSX.ElementStyleSome style to the result HTML see more here
typestringThe list type
childrenJSX.ElementChildrenThe list item text

Example

<li>Example</li>

The <link /> tag is used to create a link in your email. It accepts the following props:

PropTypeDescription
relstringThe link relationship
hrefstringThe link URL
crossOriginstringThe link cross origin

Example

<head>
  <link rel="stylesheet" href="https://example.com/style.css" />
</head>

​
<ol />

The <ol /> tag is used to create an ordered list in your email. It accepts the following props:

PropTypeDescription
classNamestringSome class to the result HTML
dirstringThe list direction
idstringSome ID to the result HTML
styleJSX.ElementStyleSome style to the result HTML see more here
typestringThe list type
childrenJSX.ElementChildrenThe list items

Example

<ol>
  <li>Example 1</li>
  <li>Example 2</li>
  <li>Example 3</li>
</ol>

​
<p />

The <p /> tag is used to create a paragraph in your email. It accepts the following props:

PropTypeDescription
classNamestringSome class to the result HTML
dirstringThe text direction
idstringSome ID to the result HTML
styleJSX.ElementStyleSome style to the result HTML see more here
typestringThe text type
childrenJSX.ElementChildrenThe paragraph text

Example

<p>Example</p>

​
<span />

The <span /> tag is used to create a span in your email. It accepts the following props:

PropTypeDescription
classNamestringSome class to the result HTML
idstringSome ID to the result HTML
styleJSX.ElementStyleSome style to the result HTML see more here
childrenJSX.ElementChildrenThe span text

Example

<span>Example</span>

​
<strong />

The <strong /> tag is used to create a bold text in your email. It is compiled to the <b /> tag.

So look at the <b /> tag here.

​
<title />

The <title /> tag is used to create the title of your email. It accepts the following props:

PropTypeDescription
childrenJSX.ElementChildrenThe title text

Example

<head>
  <title>Hello World</title>
</head>

​
<ul />

The <ul /> tag is used to create an unordered list in your email. It accepts the following props:

PropTypeDescription
classNamestringSome class to the result HTML
dirstringThe list direction
idstringSome ID to the result HTML
styleJSX.ElementStyleSome style to the result HTML see more here
childrenJSX.ElementChildrenThe list items

Example

<ul>
  <li>Example 1</li>
  <li>Example 2</li>
  <li>Example 3</li>
</ul>

That’s it! Now you can create your email template using JSX Mail.

LocalCore