Instead of using MJML markup strings, you can define your email structure using a JSON object. This is particularly useful for programmatic manipulation or when interacting with the MJML API.
In the JSON format, an MJML component is represented as an object with the following structure:
tagName (string): The name of the MJML component (e.g., 'mj-section').attributes (object): A collection of key-value pairs representing the component's attributes.content (string) OR children (array):- Use
content to provide a plain text string for components that hold text. - Use
children to provide an array of nested component objects.
import mjml2html from 'mjml'
async function example() {
const result = await mjml2html({
tagName: 'mjml',
attributes: {},
children: [
{
tagName: 'mj-body',
attributes: {},
children: [
{
tagName: 'mj-section',
attributes: {},
children: [
{
tagName: 'mj-column',
attributes: {},
children: [
{
tagName: 'mj-image',
attributes: {
width: '100px',
src: '/assets/img/logo-small.png',
},
},
{
tagName: 'mj-divider',
attributes: {
'border-color': '#F46E43',
},
},
{
tagName: 'mj-text',
attributes: {
'font-size': '20px',
color: '#F45E43',
'font-family': 'Helvetica',
},
content: 'Hello World',
},
],
},
],
},
],
},
]
})
console.log(result)
}
example()
