Skip to content
A boilerplate to quickly get started when creating your own component
Branch: master
Clone or download
Latest commit d57a2e7 Mar 8, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
components fix dependencies Mar 8, 2019
.babelrc Bump dependencies Apr 15, 2018
.eslintrc Bump dependencies Apr 15, 2018
package.json Remove `gulp-newer` Apr 15, 2018


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'


const { html, errors } = mjml2html(mjmlString)

With the cli

Using custom components with the CLI is not ready yet.

You can’t perform that action at this time.