JSX Render function

SVG HTML

Could not compile template string!

Tag Object

Could not parse tag object!

React JSX Component Style Demo

This demo presents the React Component node and label style that leverages JSX and the powerful data binding features of the React framework.

With the React Component Style, node and label visualizations are defined by SVG or HTML component templates written with JSX, similar to the template styles that are included with the library. However, since the templates of this style can use JSX and the powerful data binding of React, complex requirements are easier to realize.

Note that the implementation used here employs a runtime JSX compiler (Babel) that transforms the code to JavaScript which then gets evaluated for the purpose of the demo and interactivity. Real applications define the rendering function in JSX or TSX files and the compiler tool-chain performs the compilation at build time.

Things to Try

Select nodes or labels to examine their templates and tag values in the text editors.
Modify the JSX code, bind colors or text to tag properties, and click the button to apply the new template to the selected item.
Modify the tag and observe the visualization update.