yFiles for HTML

About yFiles for HTML

yFiles for HTML brings the proven power and ease of yFiles diagramming to your cutting-edge HTML5 applications.

yFiles for HTML has almost all functionality known from our diagramming libraries for the .NET platform. It contains UI controls for viewing and editing diagrams and our layout algorithms for automatically arranging complex graphs and networks at the click of a button.

Can't wait to start graphing in HTML? Evaluate yFiles for HTML!
For your GWT-based web application, test the GWT Overlay!

For a feature overview, see also our showcase application.
In the release notes you will find all feature enhancements of the latest version.

Unique features of yFiles for HTML:

  • 100% client-side graph editing in HTML5-capable browsers—no server component or browser plugin required
  • leverages both SVG and HTML5 Canvas
  • a pure JavaScript solution that works seamlessly with GWT, Dojo, and other frameworks
  • optional server components (Java/.NET) for layout and computationally-intensive tasks
  • direct support for TypeScript 1.0 with TypeScript bindings
  • optional GWT overlay for the development with GWT

GWT Overlay

Speed up your GWT-based web application development with the yFiles for HTML GWT Overlay!

This extension provides an API wrapper which integrates the yFiles for HTML JavaScript library with GWT.
It brings overlay classes and widgets which enable GWT developers to use yFiles for HTML without the need to write native JavaScript. The yFiles for HTML functionality can be accessed using Java code and the yFiles for HTML UI controls can be integrated in a GWT UI just like any other GWT widget.

Showcase Application

The Demo Browser application lets you play with the demo applications of the yFiles for HTML diagramming library.
This web application runs in HTML5-capable browsers with adequate SVG support.

» Launch demo

Demo Applications

The demo applications showcase the visualization and interaction capabilities of the yFiles for HTML diagramming class library.

Technical requirements: an HTML5-capable browser with adequate SVG support (see table)

Organization Chart

The Organization Chart demo application shows how to create an interactive organization chart with data loaded from XML.

Simple Editor

The Simple Editor demo application lets you experience intuitive diagram creation, editing capabilities, and automatic diagram layout:

  • Add, delete, move, and label nodes and edges to create a diagram
  • Interact using zoom and pan, undo/redo, copy/paste, and more
  • Test the different automatic layout algorithms

Graph Viewer

The Graph Viewer demo application demonstrates user interaction possibilities such as zooming, panning, overview, and toggling additional node information.

Collapsible Tree

The Collapsible Tree demo application loads a tree with many nodes, whose branches can be expanded and collapsed. The nodes are rendered with custom icons that indicate their current state. After an expand or collapse operation, the graph is automatically layed out.

Shortest Path

The Shortest Path demo application presents the shortest path search graph analysis algorithm.

Table Editor

The Table Editor demo application demonstrates out-of-the-box support for table nodes that model pools in business process diagrams, for example:

  • Interaction: create and modify the table structure via drag'n'drop, easily re-arrange rows and columns by dragging their headers, resize them by dragging their borders
  • Auto-Layout: calculate a clear routing and placement of the table contents with just the press of a button

Custom Styles

The Custom Styles demo application shows how to easily change the look and feel of nodes, edges, and labels.

Grouped Graph

The Grouped Graph demo application presents the grouping support of yFiles for HTML.

Group nodes can be collapsed and expanded. Whenever this happens, a new incremental layout is calculated and the graph is redrawn.


Commercial Information

Learn more about the terms and conditions for the commercial or academic use of the yFiles for HTML library:

For ordering information and prices, please contact:

Evaluate yFiles for HTML

You can test and experience the yFiles for HTML library with a time-limited fully functional evaluation version.
Speed up your GWT-based web application development with the yFiles for HTML GWT Overlay!