Preact Demo
This demo shows how to integrate yFiles in a
Preact
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.
- '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.
Note how all of these operations are synced with the yFiles view.