# mjml-head-html-attributes

> mjml-head-html-attributes

Latest version **5.4.1** (published 2026-09-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install mjml-head-html-attributes
pnpm add mjml-head-html-attributes
yarn add mjml-head-html-attributes
bun add mjml-head-html-attributes
```

## Health

**Score 60/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score; popular repo.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 5.4.1 |
| Published | 2026-09-10 |
| First published | 2020-05-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 5.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18242 |
| Maintainers | iryusa, kmcb, totocap |

## Links

- npm: https://www.npmjs.com/package/mjml-head-html-attributes
- Repository: https://github.com/mjmlio/mjml
- Homepage: https://mjml.io
- Issues: https://github.com/mjmlio/mjml/issues
- npm.io page: https://npm.io/package/mjml-head-html-attributes

## Dependencies (3)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [mjml-core](https://npm.io/package/mjml-core.md) 5.4.1
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.28.4

## Recent versions

- 5.4.1 (latest) — 2026-09-10
- 5.2.0-beta.1 (beta) — 2026-05-06
- 5.0.0-alpha.11 (experimental) — 2026-02-10
- 4.7.0-beta.2 (next) — 2020-08-28
- 5.4.0 — 2026-06-29
- 5.3.0 — 2026-05-27
- 5.2.2 — 2026-05-19
- 5.2.1 — 2026-05-12
- 5.2.0 — 2026-05-07
- 5.1.0 — 2026-04-24
- 5.1.0-beta.1 — 2026-04-24
- 5.0.1 — 2026-04-16
- 5.1.0-alpha.1 — 2026-04-16
- 5.0.0 — 2026-04-16
- 5.0.0-beta.2 — 2026-03-19
- … 42 more at https://npm.io/package/mjml-head-html-attributes/versions

## README

### mj-html-attributes

Allows you to add custom attributes on any HTML tag within the generated HTML, using CSS selectors.

It's not needed for most email creations, but can be useful in some cases, e.g. editable templates.

```xml
<mjml>
 <mj-head>
   <mj-html-attributes>
     <mj-selector path=".custom div">
       <mj-html-attribute name="data-id">42</mj-html-attribute>
     </mj-selector>
   </mj-html-attributes>
 </mj-head>
 <mj-body>
   <mj-section>
     <mj-column>
       <mj-text css-class="custom">
         Hello World!
       </mj-text>
     </mj-column>
   </mj-section>
 </mj-body>
</mjml>
```

In the generated HTML, an `mj-text` tag becomes a `td` tag with a child `div` tag.

In this example, the `td` tag will have the `class="custom"` attribute. Using the css selector `path=".custom div"`, the `div` inside the `td` will get the attribute `data-id="42"`.

To use this component, you will likely have to look at the generated HTML to see exactly where the `css-class` is applied, to know which CSS selector you need to add your custom attribute to.

You can use multiple `mj-selector` tags inside a `mj-html-attributes` tag, and multiple `mj-html-attribute` tags inside a `mj-selector` tag.

<div class="alert alert-caution" role="alert">
  <p>Caution</p>
  <p><code>mj-html-attributes</code> re-parses the generated HTML internally. Template tags that look like HTML or XML (for example EJS <code>&lt;%= value %&gt;</code>) can be altered or broken during that pass. Prefer running your templating engine after MJML rendering, or avoid combining those tags with <code>mj-html-attributes</code>.</p>
</div>

<p class="cta-container"><a class="cta" href="https://mjml.io/try-it-live/components/head-html-attributes">Try it live</a></p>

---
_Source: https://npm.io/package/mjml-head-html-attributes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._