# @bpmn-io/diagram-js-ui

> [![CI](https://github.com/bpmn-io/diagram-js-ui/actions/workflows/CI.yml/badge.svg)](https://github.com/bpmn-io/diagram-js-ui/actions/workflows/CI.yml)

Latest version **0.2.4** (published 2026-06-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @bpmn-io/diagram-js-ui
pnpm add @bpmn-io/diagram-js-ui
yarn add @bpmn-io/diagram-js-ui
bun add @bpmn-io/diagram-js-ui
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.2.4 |
| Published | 2026-06-03 |
| First published | 2022-10-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 4.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Beatriz Mendes |
| Maintainers | bpmn-io-admin, nikku, barmac, philippfromme, maxtru, skaiir-camunda, vsgoulart, barinali, jarekdanielak, ev-camunda, alekseymanetov |

## Links

- npm: https://www.npmjs.com/package/@bpmn-io/diagram-js-ui
- Repository: https://github.com/bpmn-io/diagram-js-ui
- Homepage: https://github.com/bpmn-io/diagram-js-ui#readme
- Issues: https://github.com/bpmn-io/diagram-js-ui/issues
- npm.io page: https://npm.io/package/@bpmn-io/diagram-js-ui

## Dependencies (2)

- [htm](https://npm.io/package/htm.md) ^3.1.1
- [preact](https://npm.io/package/preact.md) ^10.29.2

## Recent versions

- 0.2.4 (latest) — 2026-06-03
- 0.2.3 — 2024-03-12
- 0.2.2 — 2023-01-10
- 0.2.1 — 2022-11-29
- 0.2.0 — 2022-11-10
- 0.1.1 — 2022-10-26
- 0.1.0 — 2022-10-26

## README

# diagram-js-ui

[![CI](https://github.com/bpmn-io/diagram-js-ui/actions/workflows/CI.yml/badge.svg)](https://github.com/bpmn-io/diagram-js-ui/actions/workflows/CI.yml)

A wrapper around [`htm/preact`](https://github.com/developit/htm#usage) that exposes components for building reactive HTML widgets in the context of [diagram-js](https://github.com/bpmn-io/diagram-js) and extensions.


## Usage

This module is available through `diagram-js/lib/ui`. Use it to create and mount your [Preact](https://preactjs.com/) components and render them through the [`htm` utility](https://github.com/developit/htm).

```javascript
// MyService.js
import { render, html } from 'diagram-js/lib/ui';
import MyCounter from './MyCounter';

export default function MyService() {
  const parentElement = document.createElement('div');

  render(html`<${MyCounter} />`, parentElement);
}
```

```javascript
// MyCounter.js
import { useState, html } from 'diagram-js/lib/ui';

export default function MyCounter(props) {
  const counter = useState(0);

  return html`
    <div>Counter: ${counter}</div>
  `;
}
```


## Build and Run

```sh
# install all dependencies
npm install

# lint and build the library
npm run all
```


## License

MIT

---
_Source: https://npm.io/package/@bpmn-io/diagram-js-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._