Your browser does not support modern CSS

This page will be displayed incorrectly. We recommend using a more recent browser.

Note that yFiles for HTML itself does not rely on these features.

Your own yFiles app

yFiles integrates easily into most JavaScript or TypeScript-based projects. Start a new yFiles-powered app from scratch – or include yFiles into your existing application to add sophisticated diagramming functionality.

Learn about the Development Mode to improve your development process:
  • meaningful error messages
  • type information
  • graph inspection

Creating a new app using yFiles

There are several ways to create a yFiles-enabled web app from scratch. Choose the one that suits you best.

yFiles Dev Suite project wizard

Create a basic project with just a few clicks. Automatically add application features like a context menu or a graph search. (powered by App Generator)

Templates on GitHub

Our template apps for Vue.js, React and Angular provide a starting point for development. You can clone the repositories from GitHub manually, or use the Yeoman Generator.
Install Yeoman Generator

App Generator

The yFiles App Generator is an ETL tool that lets you rapidly prototype yFiles applications with custom data, styling, and graph layout.
Open App Generator

Manual setup

Create your app manually in JavaScript or TypeScript.
Open instructions
Have you heard?
You can also create projects from existing demos! Go to the Manage demos list.

Integrate yFiles into an existing project

yFiles is compatible with all modern web application frameworks, so it can be easily integrated into your existing application. After including the library, there are multiple demos show you how to add graphs to your application.

General integration

The easiest way to include the yFiles for HTML library into your project is to use it as a local npm module. Find lib-dev/es-modules/yfiles-24.0.5-eval-dev.tgz in your yFiles package and add it as a dependency to your package.json.

npm install --save <yFiles package path>/lib-dev/es-modules/yfiles-24.0.5-eval-dev.tgz

The npm module comes with support of code completion for both JavaScript and TypeScript. If necessary, these typings can be generated and included in existing projects at any time.

For more information on how to set up this module, see the Working with the yFiles npm module chapter in the Developer's Guide.

Before you can start developing, register the yFiles for HTML license. Import License and set the value to the license's content.

Using yFiles in a framework-specific project

Each framework comes with special requirements. We provide specific advice for most common toolkits.

Several demos showcase yFiles integration with different frameworks.

Distributing your application

Before distributing your application, we highly recommend that you obfuscate and minify the resulting application. This reduces the download size of the library files for your end-users and protects your intellectual property by making the application source code harder to read.

The top-level deployment directory contains the yFiles deployment tool that provides name obfuscation and minification, especially for the yFiles for HTML library, amongst others. For more details, see the description in the deployment directory or the respective section in the Developer's Guide.

Please make sure that you do not distribute any of the files included in the evaluation version of yFiles for HTML as part of your software or publish them in any way. Find out more about which parts of yFiles for HTML are redistributable in the License and redistribution information page.