MJML

MJML is a markup language designed to reduce the pain of coding a responsive email.

Language Info

Name

mjml

Extension

.mjml

Editor

markup

Compiler

The browser build of the official MJML compiler.

Version

mjml-browser: v4.15.3

Custom Settings

Custom settings added to the property mjml are passed as a JSON object to the mjml compiler. Please check the documentation for full reference.

Example:

{
  "mjml": {
    "keepComments": false,
    "minify": true
  }
}

Example Usage

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "mjml": "<mjml>\n\t<mj-body>\n\t\t<mj-section>\n\t\t\t<mj-column>\n\t\t\t\t<mj-text>\n\t\t\t\t\tHello World!\n\t\t\t\t</mj-text>\n\t\t\t</mj-column>\n\t\t</mj-section>\n\t</mj-body>\n</mjml>\n"
  }
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "params": {
    "mjml": "<mjml>\n\t<mj-body>\n\t\t<mj-section>\n\t\t\t<mj-column>\n\t\t\t\t<mj-text>\n\t\t\t\t\tHello World!\n\t\t\t\t</mj-text>\n\t\t\t</mj-column>\n\t\t</mj-section>\n\t</mj-body>\n</mjml>\n"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "params": {
    "mjml": "<mjml>\n\t<mj-body>\n\t\t<mj-section>\n\t\t\t<mj-column>\n\t\t\t\t<mj-text>\n\t\t\t\t\tHello World!\n\t\t\t\t</mj-text>\n\t\t\t</mj-column>\n\t\t</mj-section>\n\t</mj-body>\n</mjml>\n"
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "params": {
    "mjml": "<mjml>\n\t<mj-body>\n\t\t<mj-section>\n\t\t\t<mj-column>\n\t\t\t\t<mj-text>\n\t\t\t\t\tHello World!\n\t\t\t\t</mj-text>\n\t\t\t</mj-column>\n\t\t</mj-section>\n\t</mj-body>\n</mjml>\n"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

let options = $state({
  "params": {
    "mjml": "<mjml>\n\t<mj-body>\n\t\t<mj-section>\n\t\t\t<mj-column>\n\t\t\t\t<mj-text>\n\t\t\t\t\tHello World!\n\t\t\t\t</mj-text>\n\t\t\t</mj-column>\n\t\t</mj-section>\n\t</mj-body>\n</mjml>\n"
  }
});
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

Solid

import { createPlayground, type EmbedOptions } from 'livecodes';

export default function App() {
  const options: EmbedOptions = {
  "params": {
    "mjml": "<mjml>\n\t<mj-body>\n\t\t<mj-section>\n\t\t\t<mj-column>\n\t\t\t\t<mj-text>\n\t\t\t\t\tHello World!\n\t\t\t\t</mj-text>\n\t\t\t</mj-column>\n\t\t</mj-section>\n\t</mj-body>\n</mjml>\n"
  }
};
  const onMounted = (container: HTMLElement) => {
    createPlayground(container, options);
  };

  return <div ref={onMounted}></div>;
}

Ripple

import { createPlayground, type EmbedOptions } from 'livecodes';

export default component App() {
  const options: EmbedOptions = {
    "params": {
      "mjml": "<mjml>\n\t<mj-body>\n\t\t<mj-section>\n\t\t\t<mj-column>\n\t\t\t\t<mj-text>\n\t\t\t\t\tHello World!\n\t\t\t\t</mj-text>\n\t\t\t</mj-column>\n\t\t</mj-section>\n\t</mj-body>\n</mjml>\n"
    }
  };
  const onMount = (container: HTMLElement) => {
    createPlayground(container, options);
  };

  <div {ref onMount}></div>
}

This playground loads a template from the official MJML email templates:

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "import": "https://github.com/mjmlio/email-templates/blob/master/templates/onepage.mjml"
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "import": "https://github.com/mjmlio/email-templates/blob/master/templates/onepage.mjml"
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "import": "https://github.com/mjmlio/email-templates/blob/master/templates/onepage.mjml"
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "import": "https://github.com/mjmlio/email-templates/blob/master/templates/onepage.mjml"
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

let options = $state({
  "import": "https://github.com/mjmlio/email-templates/blob/master/templates/onepage.mjml"
});
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

Solid

import { createPlayground, type EmbedOptions } from 'livecodes';

export default function App() {
  const options: EmbedOptions = {
  "import": "https://github.com/mjmlio/email-templates/blob/master/templates/onepage.mjml"
};
  const onMounted = (container: HTMLElement) => {
    createPlayground(container, options);
  };

  return <div ref={onMounted}></div>;
}

Ripple

import { createPlayground, type EmbedOptions } from 'livecodes';

export default component App() {
  const options: EmbedOptions = {
    "import": "https://github.com/mjmlio/email-templates/blob/master/templates/onepage.mjml"
  };
  const onMount = (container: HTMLElement) => {
    createPlayground(container, options);
  };

  <div {ref onMount}></div>
}

Links

• MJML official website

• MJML documentation

• MJML GitHub repo

• Official email templates