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
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
components fix dependencies Mar 8, 2019
lib
.babelrc Bump dependencies Apr 15, 2018
.editorconfig
.eslintrc Bump dependencies Apr 15, 2018
.gitignore
.mjmlconfig
LICENSE
README.md
gulpfile.babel.js
index.mjml
package-lock.json
package.json Remove `gulp-newer` Apr 15, 2018

README.md

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.

You can’t perform that action at this time.