# el-component

> create HTML from jade-like expressions

Latest version **2.0.4** (published 2026-07-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install el-component
pnpm add el-component
yarn add el-component
bun add el-component
```

## Health

**Score 65/100 (B)** — status: active.

Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.0.4 |
| Published | 2026-07-10 |
| First published | 2013-12-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 4.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 1 |
| Author | Damian Krzeminski |
| Maintainers | pirxpilot |
| Keywords | HTML, DOM |

## Links

- npm: https://www.npmjs.com/package/el-component
- Repository: https://github.com/pirxpilot/el
- Homepage: https://github.com/pirxpilot/el#readme
- Issues: https://github.com/pirxpilot/el/issues
- npm.io page: https://npm.io/package/el-component

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 2.0.4 (latest) — 2026-07-10
- 2.0.3 — 2026-02-13
- 2.0.2 — 2025-04-26
- 2.0.1 — 2025-04-26
- 2.0.0 — 2025-04-26
- 1.0.1 — 2017-02-23
- 1.0.0 — 2015-02-28
- 0.1.1 — 2014-03-10
- 0.1.0 — 2013-12-16
- 0.0.0 — 2013-12-15

## README

[![NPM version][npm-image]][npm-url]
[![Build Status][build-image]][build-url]
[![Dependency Status][deps-image]][deps-url]

# el

creates HTML from jade like expressions

Particularly useful if you are a fan of [`insertAdjacentHTML`][1] but if setting `innerHTML` is your
thing `el` works just as well.

## Installation

  Install with [npm]:

    $ npm install el-component

## API

### el(tag, content, attributes)

- `tag` - can be the name of HTML tag (`span`, `img` etc.) or a jade-like expression
- `content` - is an optional content of the tag
- `attributes` - object with a map of attributes added to the generated HTML, class attribute is
  merged with what was parsed from tag

Some examples:

    el('span', 'some text inside'); // <span>some text inside</span>
    el('span.title', 'Title');      // <span class="title">Title</span>
    el('span.title.car', 'Title');  // <span class="title car">Title</span>
    el('span#title.car', 'Title');  // <span class="car" id="title">Title</span>

you can skip the tag name if you want `div`:

    el('#title', 'Title');   // <div id="title">Title</div>
    el();                    // <div></div>

el knows about void elements:

    el('img', { src: 'http://example.com/img.png' }); // <img src="http://example.com/img.png">
    el('iframe', { src: 'http://example.com' });      // <iframe src="http://example.com"></iframe>


### el.xml(tag, content, attributes)

A version of `el` that can be used to render XML (SVG etc.). It has no notion of voids, which means it closes tags without content with `/>`.

Some examples:

    el.xml('path', { d: 'M0 0H5V7Z' }); // <path d="M0 0H5V7Z"/>

## License

MIT © [Damian Krzeminski](https://pirxpilot.me)

[npm-image]: https://img.shields.io/npm/v/el-component
[npm-url]: https://npmjs.org/package/el-component

[build-url]: https://github.com/pirxpilot/el/actions/workflows/check.yaml
[build-image]: https://img.shields.io/github/actions/workflow/status/pirxpilot/el/check.yaml?branch=main

[deps-image]: https://img.shields.io/librariesio/release/npm/el-component
[deps-url]: https://libraries.io/npm/el-component

[1]: https://developer.mozilla.org/en-US/docs/Web/API/Element.insertAdjacentHTML
[npm]: https://www.npmjs.org/

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