https://github.com/mjmlio/mjml-component-boilerplate
A boilerplate to quickly get started when creating your own component
https://github.com/mjmlio/mjml-component-boilerplate
email mjml responsive-email
Last synced: about 1 month ago
JSON representation
A boilerplate to quickly get started when creating your own component
- Host: GitHub
- URL: https://github.com/mjmlio/mjml-component-boilerplate
- Owner: mjmlio
- License: mit
- Created: 2016-08-30T14:42:40.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T02:33:20.000Z (over 2 years ago)
- Last Synced: 2025-04-01T14:21:09.280Z (about 2 months ago)
- Topics: email, mjml, responsive-email
- Language: JavaScript
- Size: 233 KB
- Stars: 137
- Watchers: 5
- Forks: 54
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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](https://github.com/mjmlio/mjml/tree/master/packages/mjml-accordion).
## Getting started
A step-by-step tutorial is available [here](https://medium.com/mjml-making-responsive-email-easy/tutorial-creating-your-own-component-with-mjml-4-1c0e84e97b36).
* 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
```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.