This demo shows how to integrate yFiles in a
application. It uses the
"No build tools route"
of the preact setup for simplicity. Note that //@ts-ignore comments have to be used when
importing from esm.sh URLs, as TypeScript has no way of knowing the types of these
packages. The interoperability between the yFiles graph view and the preact components
that is demonstrated in this demo would not change with a different configuration setup,
though (e.g. Preact CLI, custom bundling pipeline).
The sample application shows how a collection of data items and connections can be
automatically synced with both a Preact view and a yFiles view.
To keep the yFiles view in sync with the application data, the yFiles
GraphBuilder API is used.
The nodes are rendered via the
NodeTemplate preact component.
Things to Try
The item collection can be changed with the panel on the right-hand side.
Note how all of these operations are synced with the yFiles view.
- 'Add Item' creates a new data item and a random connection.
- The item view contains a checkbox that toggles the item's "enabled" state.
- Finally, items can also be removed in the Preact view.