HTML Controls Demo

This demo shows how a custom HTML-based node style can be used to create interactive nodes that use HTML input elements and benefit from CSS responsiveness.

Adapting the contents of the node visualization to varying node sizes can often be achieved much easier when using an HTML-based style instead of an SVG visualization.

See HTML Rendering for details about when to prefer HTML- or SVG-based visuals.

For rich components and data binding support, you can consider using a framework instead of plain HTML/JS. See the framework-specific demos linked below for examples.

Things to Try

Edit the avatar image, name, date, status, or description in a node. Click the apply button to commit your changes.
Select a node to see the corresponding data below. Changes to the node data are reflected here.
Resize a node and note how the HTML elements adapt according to the CSS rules.
Export the graph to an SVG image. Note that due to the use of HTML this SVG image will not render in standalone image editors.

Selected Node Data

Select a node to display the associated data.