Browser-compatible mjml bundle.
You can install mjml-web
with your npm
client of choice.
$ npm install mjml-web
The default export is the mjml2html
function. The package also re-exports the content of mjml-core
.
-
Webpack (recommended)
const mjml = await import(/* webpackChunkName: "mjml-web" */ 'mjml-web') const { default: mjml2html, registerComponent } = mjml registerComponent(MyComponent) mjml2html('<mjml>...</mjml>')
// webpack.config.js const TerserPlugin = require('terser-webpack-plugin') module.exports = { optimization: { minimizer: [ new TerserPlugin({ exclude: /mjml-web/, }), ], }, }
-
Browser (codepen)
<script src="https://unpkg.com/mjml-web"></script>
const { default: mjml2html, registerComponent } = window.mjml registerComponent(MyComponent) mjml2html('<mjml>...</mjml>')
-
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 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).
License - MIT