About yFiles for HTML

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

yFiles for HTML 1.0 will be a feature-rich release with almost all functionality known from our diagramming libraries for the .NET platform. It will contain UI controls for viewing and editing diagrams and our layout algorithms for automatically arranging complex graphs and networks at the click of a button.

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

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 (Internet Explorer 9, Firefox 12, Chrome 19, Safari 5.1, Opera 11.61)

Note: The pre-release demos have not yet been optimized for loading time or execution speed, and may contain bugs. Also, support for touch devices/touch gestures is not yet integrated.

Organization Chart

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

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

Your browser's HTML5 support is insufficient to run this demo, but you can watch the video.
Or launch the demo anyway.

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

Support for touch devices is not yet integrated, but you can watch the video.
Or launch the demo anyway.

Watch video     Launch demo  

Watch video  

Simple Editor

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

• Add, delete, move, and label nodes and edges to create a diagram
• Interact using zoom and pan, undo/redo, copy/paste, and more

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

• Add, delete, move, and label nodes and edges to create a diagram
• Interact using zoom and pan, undo/redo, copy/paste, and more

Your browser's HTML5 support is insufficient to run this demo, but you can watch the video.
Or launch the demo anyway.

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

• Add, delete, move, and label nodes and edges to create a diagram
• Interact using zoom and pan, undo/redo, copy/paste, and more

Support for touch devices is not yet integrated, but you can watch the video.
Or launch the demo anyway.

Watch video     Launch demo  

Watch video  

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.

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.

Your browser's HTML5 support is insufficient to run this demo, but you can watch the video.
Or launch the demo anyway.

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.

Support for touch devices is not yet integrated, but you can watch the video.
Or launch the demo anyway.

Watch video     Launch demo  

Watch video  

Shortest Path

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

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

Your browser's HTML5 support is insufficient to run this demo, but you can watch the video.
Or launch the demo anyway.

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

Support for touch devices is not yet integrated, but you can watch the video.
Or launch the demo anyway.

Watch video     Launch demo  

Watch video  

Documentation

• yFiles for HTML Developer's Guide: UI Components
• yFiles for HTML Developer's Guide: Analysis and Layout
• yFiles for HTML API documentation

Commercial Information

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

• Software License Agreement

For ordering information and prices, please contact: sales@yworks.com.

Evaluate yFiles for HTML

You can test and experience the yFiles for HTML library with a time-limited, fully functional evaluation version.