# @holochain-open-dev/elements

> Common utilities and elements to build Holochain web applications

Latest version **0.701.0** (published 2026-10-16) · 0 weekly downloads

## Install

```sh
npm install @holochain-open-dev/elements
pnpm add @holochain-open-dev/elements
yarn add @holochain-open-dev/elements
bun add @holochain-open-dev/elements
```

## Health

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

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

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.701.0 |
| Published | 2026-10-16 |
| First published | 2022-09-25 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 133 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 7 |
| Author | guillem.cordoba@gmail.com |
| Maintainers | ddd-mtl, guillem.cordoba, matthme, zippy314, mattyg |

## Links

- npm: https://www.npmjs.com/package/@holochain-open-dev/elements
- Repository: https://github.com/holochain-open-dev/infrastructure
- Homepage: https://github.com/holochain-open-dev/infrastructure#readme
- Issues: https://github.com/holochain-open-dev/infrastructure/issues
- npm.io page: https://npm.io/package/@holochain-open-dev/elements

## Dependencies (10)

- [lit](https://npm.io/package/lit.md) ^3.0.2
- [@mdi/js](https://npm.io/package/@mdi/js.md) ^7.4.47
- [@lit/localize](https://npm.io/package/@lit/localize.md) ^0.12.2
- [prosemirror-view](https://npm.io/package/prosemirror-view.md) ^1.31.3
- [@holochain/client](https://npm.io/package/@holochain/client.md) ^0.21.1
- [prosemirror-state](https://npm.io/package/prosemirror-state.md) ^1.4.3
- [prosemirror-keymap](https://npm.io/package/prosemirror-keymap.md) ^1.2.2
- [@holo-host/identicon](https://npm.io/package/@holo-host/identicon.md) ^0.1.0
- [prosemirror-commands](https://npm.io/package/prosemirror-commands.md) ^1.5.2
- [@shoelace-style/shoelace](https://npm.io/package/@shoelace-style/shoelace.md) ^2.20.1

## Recent versions

- 0.701.0 (latest) — 2026-10-16
- 0.700.0-rc.0 (rc) — 2026-07-22
- 0.700.0-dev.0 (dev) — 2026-04-27
- 0.700.0 — 2026-07-31
- 0.601.2 — 2026-06-12
- 0.601.1 — 2026-05-15
- 0.601.0 — 2026-01-26
- 0.600.0 — 2025-11-20
- 0.600.0-dev.0 — 2025-10-07
- 0.500.1 — 2025-06-30
- 0.500.0 — 2025-04-25
- 0.500.0-rc.1 — 2025-04-18
- 0.500.0-rc.0 — 2025-04-08
- 0.400.1 — 2025-01-30
- 0.400.0 — 2025-01-03
- … 67 more at https://npm.io/package/@holochain-open-dev/elements/versions

## README

# @holochain-open-dev/elements

Common elements and element related utilities to build Holochain web applications.

## Elements

### HoloIdenticon

Import it like this:

```js
import "@holochain-open-dev/elements/dist/elements/holo-identicon.js";
```

And then you can use it like this in your html:

```html
<holo-identicon
  hash="uhCEkBsnnW9JSVhGQx4AE2m0lSlWLrioEHP-7Uj4ZnbI0W-M"
></holo-identicon>
```

### DisplayError

Import it like this:

```js
import "@holochain-open-dev/elements/dist/elements/display-error.js";
```

And then you can use it like this in your html:

```html
<display-error headline="Error fetching data" error="500"></display-error>
```

### SelectAvatar

Import it like this:

```js
import "@holochain-open-dev/elements/dist/elements/select-avatar.js";
```

And then you can use it like this in your html:

```html
<select-avatar></select-avatar>
```

## Utils

### wrapPathInSvg

Function to convert paths from the [@mdi/js library](https://pictogrammers.com/library/mdi) to inline SVG sources.

Example usage:

```ts
import { mdiAlertCircleOutline } from "@mdi/js";
import { wrapPathInSvg } from "@holochain-open-dev/elements";

function renderIcon() {
  return html`
    <sl-icon
      style="color: red; height: 64px; width: 64px;"
      src="${wrapPathInSvg(mdiAlertCircleOutline)}"
    ></sl-icon>
  `;
}
```

---
_Source: https://npm.io/package/@holochain-open-dev/elements · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._