MJML Browser (`mjml-browser`) is the client-side build of the MJML framework, designed for rendering responsive email templates directly within web browsers. This package, currently stable at version 5.0.1, allows developers to integrate MJML compilation into front-end applications, email builders, or interactive preview environments without requiring a Node.js backend. The MJML project maintains an active release cadence, frequently publishing alpha and beta versions alongside stable updates, indicating ongoing development and feature enhancements. While providing the core MJML rendering capabilities, `mjml-browser` differentiates itself from the full `mjml` Node.js package by its strict browser-only execution environment. This means certain server-side features, such as `mj-include` for modular templating and `.mjmlconfig` for custom components, are intentionally unsupported and ignored. Version 5 introduced significant changes, including a switch to `htmlnano` and `cssnano` for optimized HTML and CSS minification, which may affect output formatting compared to previous major versions.
npm install mjml-browserVerified import paths — ran on the pinned version, not inferred.
This quickstart compiles a simple MJML template into responsive HTML directly in the browser, demonstrating the core `mjml2html` function with basic options and error handling.
Adjust any tooling or tests that expect specific HTML/CSS formatting. If you previously passed minifier/beautifier flags, remap them to new `htmlnano`/`cssnano` configurations if applicable through MJML's options.
Most standard MJML usage should adapt automatically. Custom components or highly specific post-processing might need adjustments to align with the new HTML structure.
To use `mj-include` functionality, you must use the full `mjml` package in a Node.js environment. For `mjml-browser`, bundle your MJML into a single string before passing it to `mjml2html`.
If custom components are required, either compile your MJML using the full `mjml` package (which supports `.mjmlconfig`) in a Node.js environment, or find alternative ways to manage and inject custom HTML/MJML content directly into your templates before browser compilation.
Use a module bundler to process your JavaScript, or use the ESM `import mjml2html from 'mjml-browser';` syntax if your environment and `mjml-browser` version support it. For direct browser use, ensure the script is loaded in a way that handles CommonJS, or use a pre-bundled ESM version if available.
When targeting modern browsers, use `import mjml2html from 'mjml-browser';` and ensure your project is configured for ESM. If using older browser environments, a module bundler like Webpack, Rollup, or Browserify is required to transform CommonJS `require()` calls for browser compatibility.
Either concatenate your MJML templates into a single string before passing it to `mjml2html` in the browser, or perform MJML compilation including `mj-include` on the server-side using the full `mjml` package.
Refactor your custom components to be standard MJML or plain HTML that can be directly embedded in your template string, or compile the MJML with custom components on the server-side using the full `mjml` package.
No dependency data recorded yet.