@quartz/mjml-components

A boilerplate to quickly get started when creating your own component.

Usage no npm install needed!

<script type="module">
  import quartzMjmlComponents from 'https://cdn.skypack.dev/@quartz/mjml-components';
</script>

README

mjml-component-boilerplate

A boilerplate to quickly get started when creating your own component.

3 examples can be found in /components. Each of them introduce new features, so they should be checked in this order : MjBasicComponent, MjImageText, MjLayout.

For more complex examples, have a look at standard MJML components code such as mj-carousel.

Getting started

A step-by-step tutorial is available here.

  • Clone the repo
  • npm install inside
  • Add your component inside components folder
  • Add your component to the registrations in gulpfile.babel.js
  • Use your own component in index.mjml
  • npm run build to build, or npm start if you want to watch recompile on change you make (to your component or to index.mjml)
  • The result will be outputted in index.html

Later use of your component

In Node.js

import mjml2html from 'mjml'
import { registerComponent } from 'mjml-core'
import MyComponent from './components/MyComponent'

registerComponent(MyComponent)

const { html, errors } = mjml2html(mjmlString)

With the cli

Using custom components with the CLI is not ready yet.