https://github.com/vberlier/mjml-web
Browser-compatible mjml bundle.
https://github.com/vberlier/mjml-web
browser bundle email mjml
Last synced: 5 months ago
JSON representation
Browser-compatible mjml bundle.
- Host: GitHub
- URL: https://github.com/vberlier/mjml-web
- Owner: vberlier
- License: mit
- Created: 2020-06-19T13:01:07.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T20:32:34.000Z (over 2 years ago)
- Last Synced: 2025-04-04T08:02:02.332Z (6 months ago)
- Topics: browser, bundle, email, mjml
- Language: JavaScript
- Homepage:
- Size: 465 KB
- Stars: 7
- Watchers: 3
- Forks: 2
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mjml-web
[](https://www.npmjs.com/package/mjml-web)
[](https://www.npmjs.com/package/mjml-web)> Browser-compatible [mjml](https://github.com/mjmlio/mjml) bundle.
## Installation
You can install `mjml-web` with your `npm` client of choice.
```bash
$ npm install mjml-web
```## Usage
The default export is the `mjml2html` function. The package also re-exports the content of `mjml-core`.
- **Webpack** (recommended)
```js
const mjml = await import(/* webpackChunkName: "mjml-web" */ 'mjml-web')
const { default: mjml2html, registerComponent } = mjmlregisterComponent(MyComponent)
mjml2html('...')
``````js
// webpack.config.jsconst TerserPlugin = require('terser-webpack-plugin')
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
exclude: /mjml-web/,
}),
],
},
}
```- **Browser** ([codepen](https://codepen.io/vberlier/pen/xxVqMdP))
```html
``````js
const { default: mjml2html, registerComponent } = window.mjmlregisterComponent(MyComponent)
mjml2html('...')
```## Troubleshooting
- `Element doesn't exist or is not registered`
You're probably using a bundler that's trying to minify `mjml-web` alongside your application. The original [mjml](https://github.com/mjmlio/mjml) package isn't meant to be used client-side and the component registration code can break depending on the way it gets minified.
The solution is to separate `mjml-web` from the other chunks and exclude it from the minification process (see [above](#usage)).
---
License - [MIT](https://github.com/vberlier/mjml-web/blob/master/LICENSE)