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 1.1!
For a feature overview, see also our demo applications.
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
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.
Modules
The Modules 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.
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:
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.










