yFiles for HTML Release Notes

Release Notes

yFiles for HTML is the newest bugfix and maintenance release available.

Technical Requirements

  • For development, we strongly recommend an IDE with dedicated support for JavaScript, for example WebStorm and IDEA Ultimate from JetBrains, or Visual Studio Code.
  • yFiles for HTML-based web applications require an HTML5-capable browser with adequate SVG support. See the browser compatibility list for more details.

yFiles for HTML - Changes Since

This is the 4th bugfix release for yFiles for HTML 2.4. This version brings error corrections, but no incompatible API changes.

In addition, there are lots of new demos, and while our old demos weren't ugly, it was time for a change. The new look combines harmonious colors, round shapes with clear borders, and even better readability.

Last but not least, we updated the user interface of our API documentation and Developer's Guide for better usability and readability, and a more pleasant design. At the same time, we ironed out some quirks in the content.



  • The TypeScript types of the delegate.combine, remove, and removeAll methods now allow both null and undefined arguments, as the implementation already did.


  • The ITable.StripeChanged event now reports the correct parent when re-parenting will be undone or redone.
  • The GraphBuilder, TreeBuilder, and AdjacencyGraphBuilder classes no longer throw exceptions when their updateGraph method is called after the graph has been modified.


  • There is no longer a console warning about adding a non-passive event listener. The originating event listener was added in version as part of the workaround for touch interaction on iOS and is now correctly registered as active. In a related change, this workaround is now only active on touch devices.
  • Calling the CanvasComponent.cleanUp method no longer removes change listeners on commands for other CanvasComponents.
  • Non-essential CSS rules for the tooltip are now part of the stylesheet instead of being defined as the element's style (namely z-index, line-height, box-sizing) . This makes it easier to overwrite them with custom CSS rules.


  • When expanding a closed group, the parent groups of the expanded group no longer become unnecessarily large. The incorrect behavior could be observed only under certain conditions and was caused by a bug in the NavigationInputMode class.
  • Collapsing and expanding a group no longer makes its parent groups larger with each operation. This error occurred only when the view-editor module was not loaded.


  • The LayoutExecutorAsync constructors now ignore null and undefined values in the given layoutDescriptor instead of throwing a TypeError.
  • The HierarchicLayoutData class now creates the correct constraints again when using the LayerConstraintsData.nodeComparables property. The behavior was wrong since yFiles for HTML 2.4.
  • The HierarchicLayout class now correctly considers the specified port groups for edges. Previously, such groups were not always considered properly if there are either critical edges or property SimplexNodePlacer.straightenEdges is enabled.
  • The HierarchicLayout class now correctly considers the specified critical edge priorities if the input graph contains grouped edges.
  • The HierarchicLayout class now adheres more closely to its maximum duration and its abortHandler.
  • The HierarchicLayout class now correctly considers input graphs with group nodes and a PartitionGrid. Previously, in some rare cases, such inputs may have caused overlapping group nodes.
  • The OrganicLayout and ClassicOrganicLayout classes no longer cause undesired layout side effects when a mapper is registered with key RecursiveGroupLayout.GroupNodeLayoutDpKey or when data is provided via the RecursiveGroupLayoutData.groupNodeLayouts property. Previously, the layout algorithms registered there could be applied to nodes that should actually be kept fix by the organic layout.
  • The OrganicLayout class no longer throws an exception when running on a graph with a partition grid, group nodes and the IDs of the group nodes are defined using a provider that cannot handle null as argument to its {{get}} method.
  • The CircularLayout class no longer produces node label overlaps when its placeChildrenOnCommonRadius property is disabled.
  • The EdgeRouter class no longer generates unnecessary detours in the routes when it is configured with MonotonicPathRestriction.BOTH.
  • The ClearAreaLayout class now correctly considers node labels. Previously, there could be results where node labels intersected with the specified area to be cleared.

New Demos

Graph Wizard for FlowChart Diagrams

The Graph Wizard for FlowChart Demo shows a convenient and fast way to interactively create flowchart diagrams. Many common tasks are easily available as single actions with both a context toolbar and shortcut keys. One example of such an action is adding the next step to a node and entering labels for both the new node itself and its link.

Critical Path Analysis (CPA) Demo

The Critical Path Analysis Demo shows how to perform critical path analysis in project management with yFiles. It combines yFiles's analysis algorithms to detect critical paths with its auto-layout to arrange the diagram in a suitable way.

Layout Features Tutorial

This new tutorial is intended for developers who want to learn how to implement a specific feature of the yFiles layout algorithms in source code. Therefore, these demos focus on this configuration code and provide only minimal interaction nor other feature.

Toolkit and Loading Demos

The yFiles demos for Vue.js are now available in TypeScript, and in versions for both Vue 2 and Vue 3.

The Preact Demo integrates yFiles in a Preact app. It uses the "No build tools route" of the preact setup for simplicity. A custom template node style uses data binding to keep the visualization in sync with the data.

The Svelte Demo integrates yFiles with the Svelte framework. It features a custom node style with data binding, asynchronous layout calculation in a web worker, a development setup with hot module reloading, and more.

The Vite Demo integrates yFiles with the Vite framework. Among others, it makes use of Vite's hot module replacement and features an auto-layout that is calculated in a web worker.

The WMR Loading Demo shows how to load yFiles with WMR as a loader for efficient web development and easy builds.

The Web Dev Server Demo shows how to conveniently develop with yFiles for HTML using the buildless Web Dev Server by "Modern Web".

The Snowpack Demo integrates yFiles in a Snowpack project. This demo support Snowpack's hot module replacement.

Demos for Diagram Types

The Tag Cloud Demo creates tag clouds with circular and rectangular bounds with the help of yFiles's auto-layout.

The Chord Diagram Demo shows how to create a chord diagram that emphasizes the magnitude of connections between nodes.

The Arc Diagram Demo shows how to arrange and visualize a graph as an Arc Diagram.

Style Demos

The Isometric Bar Chart Node Style Demo shows how a diagram can be augmented with isometric bars providing additional information about the nodes.

The List Node Demo shows nodes which consist of re-arrangeable rows with associated edges. This means that when a row is moved, its edges are moved as well.

The String Template Node Style Demo presents a versatile and customizable template node style.

The Directed Edge Label Style Demo shows label styles displaying arrows that always point to the source or target port.

The Composite Node Style Demo shows how to combine node visualizations from several styles.

Interaction Demos

The Drag from Component Demo shows how to drag elements from the canvas to elements outside the canvas.

The Graph Drag and Drop Demo shows drag and drop of graphs consisting of multiple items.

The Custom Drag and Drop Demo shows how to change the color of nodes and edges using drag and drop operations.

The Deferred Cut Clipboard Demo shows how to implement a clipboard that grays out elements when they are cut and only removes them completely when they are pasted. This behavior is similar to that of Windows Explorer.

The Marquee Node Creation Demo shows how to customize the MarqueeSelectionInputMode class to create new nodes. In other words, users can click-and-drag with the mouse to create a new node of the desired size.

The Arrange Objects Demo shows simple operations for aligning and distributing nodes.

The Restricted Editing Demo shows how to restrict interactive editing when using the GraphEditorInputMode class.

The Button Input Mode Demo shows how to use a custom input mode for adding temporary buttons for model items.

Other Notable Demo Improvement

yFiles for HTML - Changes Since

This is the third bugfix release for yFiles for HTML 2.4 which brings some error corrections.

In addition, a new version of the yFiles for HTML Optimizer is available on npm. The optimizer now supports the obfuscation of babel's safe public class fields output and comes with a TypeScript type declaration file that provides code completion in webpack config files.


  • Two problems with touch interaction in iOS and iPadOS devices have been corrected.

    • Double taps work now correctly, again.
    • A long press no longer selects some random text in the page.
  • The ParallelEdgeRouter class now produces correct parallel routes if its property joinEnds is enabled.
  • The LayoutExecutorAsyncWorker.process method no longer throws a cryptic error if a hierarchic layout with layer constraints or sequence constraints should be calculated but the layout-hierarchic module is not yet loaded, e.g. because lazy loading is used.
  • In the TypeScript type declarations, parameters of type enum are no longer advertised as being type convertible in places where they are not. Previously, using a string as argument in these places compiled without problems but the argument value had no effect.

Notable Demo Improvement

yFiles for HTML - Changes Since

This is the second bugfix release for yFiles for HTML 2.4. There are 2 error corrections and some demo improvements.


  • With WebGL2 rendering, group nodes at certain levels of nesting no longer disappear if they are collapsed.
  • The EdgeRouter class now stops much more quickly when the maximumDuration is exceeded or the algorithm should stop due to AbortHandler. Previously the search for a path kept on running for a long time.

New Demos and Notable Demo Improvements

  • The new Simple Highlight Decorator and Complex Highlight Decorator demos show how to highlight graph items in a simple and a more complex use case, respectively.
  • The demos that calculate an automatic layout in a Web Worker now show correctly how to handle exceptions that are thrown during the layout calculation.

yFiles for HTML - Changes Since 2.4

This is the first bugfix release for yFiles for HTML 2.4. In addition to the usual error corrections, there are some demo improvements.

This release reverts an unintended incompatible change in yFiles for HTML 2.4.


Graph, View, and Interaction

  • Smooth zooming is now performed correctly on more input devices.
  • Smooth zooming now works in Internet Explorer 11.
  • Mouse event coordinates are no longer quantized to very large steps if a projection is used and the viewport is zoomed in afterwards.
  • Fixed a possible error when the graph was altered while label editing was in progress.
  • Fixed a bug which caused the FilteredGraphWrapper.getParent method to return parent nodes which are hidden by the filter. This bug could have caused errors in a FoldingView if a FilteredGraphWrapper was the master graph.
  • The clipboard now doesn't copy labels or ports if they are not selected and their owner's IClipboardHelper forbids copying the owner.


  • The HierarchicLayoutData class no longer incorrectly assigns same-layer constraints to nodes for which the LayerConstraintsData.nodeComparables property provides comparables of equal value. The incorrect behavior was only introduced with yFiles for HTML 2.4.
  • Automatic type conversion now works correctly again for the LayerConstraintData.nodeComparables, SequenceConstraintData.itemComparables, and ClearAreaLayoutData.componentIds properties. While the type declarations still reflected the possible conversion, this crashed at runtime.
  • The HierarchicLayout class now has an improved strategy for choosing the port candidates for same-layer edges with multiple available candidates. Previously, the chosen candidate may have led to superfluous back-loops.
  • The PartialLayout.allowMovingFixedElements method now works correctly and throws an error if the layout-area module is missing.
  • The RadialLayout class is now much faster if the input graph is a very large tree structure.
  • The OrganicLayout and ClassicOrganicLayout classes no longer produce an internal integer overflow that may lead to an early exit and, thus, poor layout results for very large input graphs.

Type Declarations

  • The TypeScript declaration files (.d.ts files) no longer specify not applicable types for some properties of option objects.

Most Notable Demo Improvements

  • The demos for React and React with TypeScript no longer throw an error during npm install since they now correctly declare their fs-extra dependency.
  • In the webpack demos, live reloading now works as expected.

Why, how, what? —
Just ask the diagramming experts!

Our team is happy to advise you – no strings attached. Let's talk about your project and find the perfect solution for your needs!

E-mail: hello@yworks.com

The data you enter will only be used to contact you.
Learn about our privacy policy.