Setting up Your Development Environment

If you’re developing with Visual Studio Code or an IDE from JetBrains with JavaScript Support (e.g. WebStorm), we recommend to always use the latest version. While yFiles for HTML has no specific requirements, some features for effective development are only available, or at least work much better, in newer versions.

If you are using JetBrains, make sure that the JavaScript Support plugin is enabled. This plugin is bundled with JetBrains IDEs that have support for JavaScript.

Creating a Project

Depending on the IDE that you are using create an empty project or a new folder in the filesystem with a suitable name. This will be the project root folder.

Using the npm Package

Next, you need to add the yFiles for HTML library and the license to your project. The yFiles for HTML library is provided as tgz file which is located in the lib directory of the yFiles package. There are different files to support both module loading and umd loading, respectively.

We recommend adding the library as npm package to your project. This has the advantage that coding assistance like code completion, parameter info, code inspections, and quick documentation lookup are available without further configuration. We highly recommend using this powerful feature.

If you’re using an evaluation version of yFiles for HTML, an evaluation license is part of the yFiles package and located at lib/license.json. Otherwise, include the license that was sent to you separately.

To install yFiles as an npm package, make sure that Node.js is installed. Then, open a Terminal in your project folder and create a plain package.json file by running:

npm init -y

Alternatively, you can manually add a new package.json file with the following contents:

{
  "name": "myapp",
  "version": "1.0.0",
  "license": "UNLICENSED",
  "private": true
}

The lib-dev/yfiles-<version>+dev.tgz file is an archived npm package of the yFiles library. Therefore, you can install yFiles for HTML from your local yFiles package with the following command

npm install <yFiles package path>/lib-dev/yfiles-26.0.0+local+dev.tgz

This basically copies the yFiles for HTML library into the node_modules/yfiles directory of your project.

Including the License

If you’re using an evaluation version of yFiles for HTML, an evaluation license is part of the yFiles distribution and located in lib/license.json. Otherwise, use the license that was separately provided to you.

You need to include the license data in every web app that uses the yFiles for HTML library but it is not necessary to keep it in a separate file. See the section about registering a license for more details.

Creating a Web Application

Now that the project has been set up, continue with your first yFiles for HTML application. This tutorial introduces basic yFiles features that you’ll use in almost all of your yFiles projects.

We also offer introductory videos that provide a quick start with tutorials about working and developing with yFiles for HTML.

TypeScript Support

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

When you add the yFiles npm module to your project as recommended, no additional setup is necessary to enable TypeScript support. The yFiles npm module contains a typings file that will be automatically picked up by the TypeScript compiler and modern IDEs.

Visual Studio Code

Visual Studio Code offers extensive support for TypeScript projects. Detailed documentation is available on the Visual Studio web site.

WebStorm

For detailed instructions on working with TypeScript in WebStorm, see TypeScript Support in WebStorm.

Visual Studio

The latest Visual Studio releases come with TypeScript out of the box. The TypeScript home page also offers download links for various Visual Studio versions.