Building Interactive Graph Visualizations with Vis.js and Next.js 16

Graph visualizations have become essential in modern web applications, particularly for AI-powered systems that need to represent complex relationships between entities. However, building interactive graphs that work consistently across browsers can be challenging, especially with WebGL-based libraries that struggle with compatibility.

This guide walks through creating interactive graph visualizations using Vis.js and Next.js 16, replacing older WebGL-based approaches with a more robust HTML Canvas implementation that works everywhere.

Why Vis.js Over WebGL Libraries?

WebGL-based graph libraries like Sigma.js offer impressive performance but introduce several challenges:

Feature	WebGL (Sigma.js)	HTML Canvas (Vis.js)
Browser Compatibility	Poor in Brave, Safari, some mobile browsers	Excellent across all browsers
Setup Complexity	Requires WebGL context handling	Simple API, no context management
Mobile Performance	Variable, often poor	Consistent performance
Accessibility	Limited	Better (canvas fallback)
Bundle Size	~100KB (minified)	~200KB (minified)
Learning Curve	Steep	Gentle

For most applications, especially those targeting general audiences, Vis.js provides a better balance of performance, compatibility, and developer experience.

Project Setup

Start with a fresh Next.js 16 project:

npx create-next-app@latest graph-wizard
cd graph-wizard
npm install vis-network@10.1.0

Creating the Graph Component

Create a new component src/components/VisNetworkGraph.tsx:

'use client'

import { useEffect, useRef } from 'react'
import * as vis from 'vis-network'

interface GraphData {
  nodes: vis.Node[]
  edges: vis.Edge[]
}

interface VisNetworkGraphProps {
  data: GraphData
  options?: vis.Options
}

export default function VisNetworkGraph({ data, options }: VisNetworkGraphProps) {
  const containerRef = useRef<HTMLDivElement>(null)
  const networkRef = useRef<vis.Network | null>(null)

  useEffect(() => {
    if (!containerRef.current) return

    // Create network
    const network = new vis.Network(containerRef.current, data, options)
    networkRef.current = network

    // Cleanup on unmount
    return () => {
      network.destroy()
    }
  }, [data, options])

  return <div ref={containerRef} style={{ width: '100%%', height: '600px' }} />
}

Example: Knowledge Graph Visualization

Here's a complete example showing a knowledge graph with AI-related entities: