mjml-raw

library5.3.0jsnpmunverified

MJML component for embedding raw HTML that bypasses MJML processing. Used inside MJML templates to insert unparsed HTML, often for custom code, templating languages (e.g., Liquid, Handlebars), or pre-doctype content via position="file-start". Current version 5.3.0 (stable). Released as part of MJML monorepo with quarterly minor releases. Key differentiators: preserves exact output, supports minification hints with , can inject content before <!doctype html>. Unlike similar components in other email frameworks, mj-raw is an "ending tag" and cannot contain other MJML components.

communication

npm install mjml-raw

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · MJML-RAW

mjml-raw

communicationjavascriptv5.3.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

MjRaw

✓ import { MjRaw } from 'mjml-raw'

✗ import MjRaw from 'mjml-raw'

MjRaw is a named export, not default. MJML components are typically registered via mjml-core.

mjml-raw package

✓ const mjmlRaw = require('mjml-raw')

✗ const MjRaw = require('mjml-raw').default

CommonJS: require returns the module, not an object with .default. This package has no default export.

registerComponent

✓ import { registerComponent } from 'mjml-core'; import { MjRaw } from 'mjml-raw'; registerComponent(MjRaw);

✗ import { MjRaw } from 'mjml-raw'; // missing registration call

In MJML v4+, component must be registered with mjml-core before use in templates.

Demonstrates registering the MjRaw component, using it with htmlmin:ignore to safely include templating logic inside minified MJML templates.

import { registerComponent } from 'mjml-core'; import { MjRaw } from 'mjml-raw'; import mjml2html from 'mjml'; registerComponent(MjRaw); const htmlOutput = mjml2html(` <mjml> <mj-body> <mj-raw> {% if user.age < 18 %} </mj-raw> <mj-section> <mj-column> <mj-text>Welcome</mj-text> </mj-column> </mj-section> <mj-raw> {% endif %} </mj-raw> </mj-body> </mjml> `, { minify: true }); console.log(htmlOutput.html);

Debug

Known issues

gotchamj-raw cannot contain other MJML components inside it; it is an 'ending tag'.

fix

Do not nest MJML tags inside <mj-raw>. Only raw HTML or templating code is allowed.

affects: >=1.0.0

gotchaUsing the minify option with < character inside mj-raw may cause parsing errors.

fix

Wrap < and other problematic characters in <!-- htmlmin:ignore --> comments to prevent minifier from parsing them.

affects: >=4.0.0

gotchaMultiple lines inside mj-raw with minify option are joined into a single line unless wrapped in htmlmin:ignore.

fix

Use <!-- htmlmin:ignore --> around multi-line content that must preserve line breaks.

affects: >=4.0.0

gotchaposition="file-start" only works when mj-raw is placed directly inside <mjml>, outside of <mj-head> and <mj-body>.

fix

Ensure <mj-raw position="file-start"> is a direct child of <mjml> and not nested in other sections.

affects: >=4.0.0

Errors

Common errors & fixes

Parsing error: malformed expression at ...

Minifier tries to parse templating code (e.g., {% if foo < 5 %}) and fails on the < character.

fix

Wrap templating code in <!-- htmlmin:ignore --> tags to exclude it from minification.

Cannot read property 'name' of undefined

MjRaw component is not registered with mjml-core before use.

fix

Import and call registerComponent(MjRaw) from mjml-core before calling mjml2html.

Unrecognized MJML tag: mj-raw

Missing import/registration of mjml-raw package.

fix

Run: npm install mjml-raw, then import { MjRaw } from 'mjml-raw' and register it.

Upgrade

Version history

5.3.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

14 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/mjmlio/mjml ↗

packagemjml-raw ↗

homepagehttps://mjml.io ↗