Demos and Tutorials

yFiles for HTML comes with many source code demo applications and tutorials to help you get started. All of these demos are available in JavaScript and TypeScript. They are located in the demos-js directory and the demos-ts directory, respectively.

• The yFiles Demo List present the library’s range of features in concise, self-contained JavaScript demo applications.
• The Tutorial: Basic Features is a step-by-step introduction to the concepts and the features of yFiles for HTML.
• The tutorials Tutorial: Node Style Implementation, Tutorial: Label Style Implementation, Tutorial: Edge Style Implementation and Tutorial: Port Style Implementation are step-by-step introductions to customizing the visual representation of graph elements. yFiles for HTML already provides a number of styles for typical visualizations. Follow these tutorials if you need to create a custom style that perfectly fits your needs.

In the course of this Developer’s Guide, many sections will contain links to corresponding source code demos and tutorials.

The top-level directory of the yFiles for HTML package contains pre-configured projects for JetBrains IDEs and Visual Studio Code. In these projects, you can run the demo applications that are included in the package, and inspect their source code to learn how to implement the features you want to use. Of course, you can also browse the extensive API documentation and the developer’s guide from there.

The pre-configured project settings include startup tasks for installing the yFiles for HTML NPM module and starting a local demo server that serves the yFiles for HTML demos.In current JetBrains IDEs, you need to explicitly allow these tasks to be executed.