Lit Template Node Style Demo

This demo presents the LitNodeStyle that leverages the powerful data binding and conditional rendering features of the Lit templating framework.

With this style, node visualizations are defined by SVG snippet rendering functions. These rendering functions are powered by the Lit template string technology, which makes it easy to componentize, create, and efficiently update SVG DOM snippets.

Things to Try

Change the render function of one or more nodes. Bind colors or text to properties in the tag. Then, apply the new template by pressing the button. Or modify the tag and see how the visualization changes.

Related Demos

Template Styles Demo
Vue.js Template Node Style Demo
String Template Node Style Demo
React JSX Component Node Style Demo

Template String

Could not compile template string!

Tag Object

Could not parse tag object!