Getting Started

This chapter is an introduction to yFiles for HTML that helps you getting started quickly. First, a short tutorial guides you through building your first yFiles for HTML application and familiarizes you with some of the basic concepts in yFiles for HTML. Then, we describe how to create a new yFiles for HTML project in your preferred development environment (IDE). Finally, we introduce the tools that are included in yFiles for HTML to assist you during development.

The tutorial starts with a base yFiles for HTML web application, a simple HTML <div> element containing the main diagram component. In its next sections, it extends this web app step by step with new features. In particular, you will learn how to create a simple graph and how to customize its visual appearance. Enabling user interaction will extend your web app into a simple graph editor. Enabling automatic graph layout will conclude this tutorial.

At the start of each tutorial section a note like this will summarize the main topics of that step.

You can also have a look at our YouTube Playlist that covers some of the same topics.

First Time Setup

To get ready for development and exploring the yFiles for HTML sample applications, please run

npm install

or one of the start_demos scripts in the package root folder once. This will install the demo server for you.

Source Code Demos and Tutorials

The yFiles for HTML package comes with pre-configured project settings 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. See the chapter Demos and Tutorials for more details.

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

Part of the demo applications is the Basic Features source code tutorial, a step-by-step introduction that is more comprehensive than this tutorial. We recommend reading this chapter to quickly learn the most basic concepts and have a look at the comprehensive source code tutorial for more details and features not covered here.

yFiles Dev Suite

The yFiles Dev Suite provides a graphical interface in the browser that facilitates working with a yFiles for HTML package. It supports

• Creating a new yFiles application with a few clicks
• Browsing through the demo applications, including
  • Managing the demo server
  • Browsing the source code
  • Using demo source code as base for your own application
  • Using an integrated diff tool to compare your code with the original demo code
• Communication with the yWorks support team and integration with my.yworks.com

To use the yFiles Dev Suite you can run the following command:

npx yfiles-dev-suite

which will open the yFiles Dev Suite in the browser.

See this video for an introduction.

Tutorial Videos

Our introductory videos provide a quick start with tutorials about working and developing with yFiles for HTML.

App Generator

The App Generator allows you to rapidly create diagram application prototypes. You can use the browser based application to choose from different kinds of data sources and data processing to finally prototype a yFiles for HTML applications with custom data, styling and graph layout.

With a few clicks you can configure a yFiles for HTML application and export it as plain JavaScript or for various target frameworks like React oder Vue. The generated code looks human-written and can be modified afterwards, allowing the app to grow to a production-ready tool tailored to your specific requirements.

Watch the Video for a concise introduction to how to work with the App Generator.