diagram-js-ui

A wrapper around htm/preact that exposes components for building reactive HTML widgets in the context of diagram-js and extensions.

Usage

This module is available through diagram-js/lib/ui. Use it to create and mount your Preact components and render them through the htm utility.

1// MyService.js
2import { render, html } from 'diagram-js/lib/ui';
3import MyCounter from './MyCounter';
4
5export default function MyService() {
6  const parentElement = document.createElement('div');
7
8  render(html`<${MyCounter} />`, parentElement);
9}

1// MyCounter.js
2import { useState, html } from 'diagram-js/lib/ui';
3
4export default function MyCounter(props) {
5  const counter = useState(0);
6
7  return html`
8    <div>Counter: ${counter}</div>
9  `;
10}

Build and Run

1# install all dependencies
2npm install
3
4# lint and build the library
5npm run all

License

MIT