chevron_right Demos chevron_right Template Node Style
Related demos
Book a live Demo

Live Demo — yFiles in Action

30–45 min | Online | No install required

For Developers, Product Mangers & Executives

  • Interactive graph visualization in real time
  • Integration example
  • Live Q&A and next step recommendations

30–45 minutes | 1:1 or team session

Book a free live demo

Live Demo — yFiles in Action

30–45 min | Online | No install required

For Developers, Product Mangers & Executives

30–45 minutes | 1:1 or team session

Book a free live demo

Template String

Could not compile template string!

Tag Object

Could not parse tag object!

Template Node Style Demo

This demo presents a node style implementation that leverages a simple data binding and templating engine to declaratively render SVG as node style.

The templating engine is based on an implementation that was previously available in yFiles for HTML versions 1.x and 2.x, but which has since been removed and is provided here as a source code demo implementation.

With this style, node visualizations are defined by a SVG templating language, similar to what is known in React, Vue, Angular, and similar frameworks. TemplateNodeStyle's template language is a lot simpler and less powerful than the templating support in the aforementioned frameworks, but it is more lightweight and does not depend on third party software. It was modelled after the XAML templating language.

Things to Try

Change the template 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 style changes.

Related Documentation

Available Busy Travel ? Offline