yFiles for HTML
Diagramming in the browser

yFiles for HTML is an extensive JavaScript/HTML library that adds diagramming functionality to your web project. It lets you create cutting-edge custom apps while easily integrating with your existing web solutions and dashboards.

You have questions about yFiles for HTML?

Get in touch to discuss your specific challenges with our diagramming experts. We're here to provide the guidance you need.

You have questions about yFiles for HTML?

We´d love to help you. Reach out and we'll get in touch with you.

We are sorry, something went wrong. Please try again.
If the problem persists, please report the error to [email protected].
Thank you!

Your message has been sent.

Create natural, flowing diagrams directly in the browser

The yFiles diagramming library offers everything needed to easily visualize complex networks and relationships in the browser. Whether starting a new project or enhancing existing data structures, the tools are designed to simplify the process and deliver powerful results. Expert support from core developers ensures a smooth experience, helping to resolve any challenges efficiently.

Start transforming complex networks and dynamic relationships into intuitive, interactive diagrams today with the organic layout in yFiles.

Test yFiles free of charge

Technical features

Developer-friendly

Extensive Developer’s Guide and API documentation, runtime type-checking, debugging tools, plus code completion and quick API lookup in modern IDEs.

Pure JavaScript

A pure JavaScript solution that works seamlessly with Angular, React, Vue.js, and basically any other JavaScript framework.

100% client-side

100% client-side graph drawing and graph editing—no specific server required.

TypeScript support

The complete set of type definitions is available for TypeScript.

Runs everywhere

Supports all modern browsers — from Chrome to Edge, Firefox, and Safari — on desktops, tablets, and phones!

Develop with modern ECMAScript

The API supports ECMAScript features like async functions, promises, classes, JS modules, iterators, etc. during development.

Latest rendering technologies

Leverages SVG, WebGL, and HTML Canvas to draw diagrams—exclusively, simultaneously, or switched dynamically. It's your choice. Spice up your styling with CSS, animations, and transitions.

Flexible Deployment

Develop with your favorite toolchain!
Use Vite, esbuild, JS modules, Angular CLI, tsc, plain script loading, and more.

yFiles in action

Interactive demos

Our interactive demos, created with yFiles for HTML, work directly in your browser.

Interactive demos

Source-code demos

Explore our demos’ source code on GitHub to kick start or improve your projects.

GitHub

Playground

Try yFiles’ capabilities directly here in the playground.

graphComponent.fitGraphBounds()/** * The yFiles graph component is already set up in this playground, and you can access * it via the globally available variables 'graph' and 'graphComponent'. */ const nodeCount = 20 const rootNode = graph.createNode() graph.addLabel(rootNode, 'Hello World') // Create a random graph with a tree structure const nodes: INode[] = [rootNode] for (let i = 1; i < nodeCount; i++) { nodes.push(graph.createNode()) graph.createEdge(nodes[Math.floor(Math.random() * (i - 1))], nodes[i]) } // Apply a tree layout. Other layouts to try are for example OrganicLayout or Hierarchic Layout await graphComponent.applyLayoutAnimated(new TreeLayout(), '1s')

More information

Working resources

Find helpful resources like Developer’s Guides, API documentation and videos.

Support hub

License information

Get the right license and accurate pricing information for your specific use case.

Licenses

11 reasons why web developers choose yFiles, the superior diagramming SDK

Powerful and Diverse Layout Algorithms

A wide variety of layouts, flexible configurations, and superior performance.

  • Wide variety of different layout types
  • Incremental layout algorithms
  • Combination of multiple layouts
  • Advanced edge-routing

Integration with Various Platforms

Seamlessly integrates with existing systems and frameworks.

  • Cross-platform support
  • Framework independent
  • API consistency
  • Modular architecture
  • Cloud and on-premise compatibility

Fast and Competent Support

Quick responses, direct access to core developers.

  • Direct contact with core developers
  • Quick response times
  • Professional support
  • Comprehensive resources

Long-Term Market Presence and Expertise

25 years of experience, mature, future-proof solutions.

  • 25+ years of experience
  • Mature and stable software
  • Future-proof
  • Proven in diverse industries
  • Commitment to ongoing improvements

Get started right away!
Test yFiles for HTML free of charge.

Download yFiles now!

Choose your next steps

Get connected

Connect with our Customer Success Team regarding your ideas or projects.

Connect with the real graph drawing experts.

Dive deep

Get more detailed information about specific yFiles topics.

Download yFiles

Try yFiles free of charge.

Download the yFiles trial version.