Getting started with yFiles for HTML
This guide will help you get started with yFiles for HTML, an advanced JavaScript/TypeScript Software Development Kit (SDK) for graph visualization and diagramming.
Here, you'll find everything you need to get started, including information on setting up your environment, running and exploring over 250 demos, learning the basics, and building your first interactive diagramming apps.
Whether you're evaluating yFiles or starting your first project, this page is the perfect place to begin.
5 to 10 minutes
First-time setup
The Getting Started section in the Developer's Guide explains the following steps in detail.
Obviously, you do require a yFiles package and a valid license to use yFiles. If you don't have one yet, you can download a free trial version from our customer center or via the yFiles Dev Suite .
2. Running the demos locally
The best way to run the demos locally is with the included dev server .
- Run the start_demos script in the
yFiles-for-HTML-Complete-x.x.xdirectory:- start_demos.cmd (Windows)
- start_demos.sh (Linux)
- start_demos.command (macOS)
- Open the demos
Access and explore them at
/demos-tsor/demos-js.
3. Working with yFiles
- Install an IDE
We recommend WebStorm (30 days free). You can also use Visual Studio Code as a free alternative.
- Open the project
Open the
yFiles-for-HTML-Complete-x.x.xdirectory as a project in your IDE.WebStorm will automatically start the dev server in the background. So you don't have to start the server manually each time. - Modify the demo code and observe the changes
The dev server automatically reloads the demo's page after changes in the source code.
Intro to yFiles
There are three approaches to learning the yFiles basics. Choose the one that resonates with you the most.
Work through the interactive beginners tutorial
If you prefer to learn by exploring and experimenting, check out the yFiles Basic Features tutorial included in the package. It can be found relative to the package root, in the following directories:
/demos-ts/tutorial-yfiles-basic-features 
/demos-js/tutorial-yfiles-basic-features As a prerequisite for this tutorial, open the packages' project in an IDE, as described before in First-time setup.
Read and work through the written tutorial
The written tutorial takes you through the basic concepts of working with yFiles in a step-by-step manner. Links to detailed documentation are provided throughout this tutorial.
As a prerequisite for this tutorial, open the packages' project in an IDE, as described before in First-time setup.
Next steps
Experiment with demos
The yFiles package contains over 250 demos illustrating the various features of the library and how to use them in your own code. We invite you to open the many demos in any IDE and try them out.
/demos-ts /demos-js Work through the interactive advanced tutorials
In addition to the introductory tutorial, you'll find tutorials that deal with specific topics:
Further reading
The yFiles library includes comprehensive documentation about its concepts, features and API. Some entry points for beginners are:
- The graph model: learn the basic concepts of graphs
- Displaying the graph: learn how a graph is displayed on the screen
- User interaction: learn how to configure and implement basic as well as sophisticated graph user interactions
- Customizing styles: learn to tweak the look and feel of various graph elements
- How to use the magnitude of automatic layout algorithms provided by yFiles
Your own yFiles app
yFiles integrates easily into most JavaScript or TypeScript projects. Start a new yFiles-powered app from scratch – or include yFiles into your existing application to add sophisticated diagramming functionality.
- 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 in the yFiles Dev Suite. 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 will help you get started easily.
App Generator
The yFiles App Generator is an ETL tool that lets you rapidly prototype yFiles applications with custom data, styling, and graph layout.
Connecting yFiles MCP Server to your IDE
These guides demonstrate how to integrate the yFiles MCP Server with your preferred IDE and connect advanced coding agents to your workflow. You'll learn how to scaffold, extend, and refine yFiles applications more efficiently, with AI-generated, yFiles-native code available directly in your development environment. This approach helps reduce context-switching and streamlines the development process for yFiles projects.
VS Code & Cline
A walkthrough for connecting the yFiles MCP Server to VS Code with the Cline coding agent for yFiles-enabled AI development.
JetBrains & Junie
Step-by-step instructions for integrating the yFiles MCP Server into JetBrains IDEs using the Junie agent for interactive yFiles coding sessions.
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 showing 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-x.x.x-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-x.x.x-dev.tgz
The npm module comes with support for 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 .
Using yFiles in a framework-specific project
Each framework comes with special requirements. We provide specific advice for most common toolkits.
Various demos showcase yFiles integration within different frameworks:
Frequently Asked Questions
What do I need to get started with yFiles for HTML?
To get started with yFiles for HTML, you'll need Node.js installed on your system. You can use the yFiles Dev Suite for an easy setup and follow the step-by-step guides in the Developer's Guide for detailed instructions.
Is there a low-code version of yFiles for me to get started?
Yes! If you are new to yFiles, the App Generator can help you create and scaffold your first yFiles-powered app within just minutes. You can interactively configure your data-sources, choose you UI-framework and programming language, and share your project ideas with your team and customers.
How do I run yFiles demos locally?
After setting up Node.js, you can run the demos using the included dev server. Navigate to the yFiles-for-HTML-Complete directory and execute the start_demos script for your operating system.
Can I integrate yFiles for HTML into my existing project?
How can I try yFiles?
You can easily try yFiles in two ways.
- yFiles Playground: Quickly and without registration, you can test yFiles in the yFiles sandbox, an online interactive development environment. This platform allows you to explore various features of yFiles, run example code, and experiment with creating and manipulating graphs directly in your browser.
- Free Evaluation: For a more comprehensive experience, you can sign up for a free evaluation version of yFiles. This evaluation provides you with the full version of yFiles, allowing you to develop your prototype and access over 300 source code demos, along with comprehensive support from the yWorks team.
Can I create my diagramming app using TypeScript?
The API of yFiles for HTML has been designed carefully to work perfectly in a TypeScript environment. A complete TypeScript type definition file makes use of advanced TypeScript features such as nullability, interfaces, enumerations, generics, subclassing, union types, overloads, asynchronous programming, and more. yFiles for HTML is also available as an npm module. Adding the library to any modern project is effortless, thanks to these capabilities.
Does yFiles support creating web applications for iOS and Android?
yFiles for HTML is a pure JavaScript library that leverages SVG, Canvas, WebGL, and ECMAScript 5+. It runs on any major HTML5 compliant browser released since Internet Explorer 9. This, of course, includes the native iOS and Android browsers. Also, yFiles for HTML has built-in support for touch and pen input and does not require a mouse or connected physical keyboard.
What is the yFiles Playground?
The yFiles Playground is an interactive environment where you can explore yFiles capabilities directly in your browser. It allows you to try out various yFiles features, run example code, and share your own code snippets. This is an excellent way to get hands-on experience with yFiles before diving into a full evaluation.
11 reasons why web developers choose yFiles, the superior diagramming SDK
Choose your next steps
Get connected
Connect with our Customer Success Team regarding your ideas or projects.
Download yFiles
Try yFiles free of charge.
