Kookie Flow
A node editor for React that stays smooth with thousands of nodes.
Kookie Flow is a React library for node editors, such as shader graphs, AI pipelines and whiteboards. Most node editors draw each node as HTML, and they become slow when a graph has many nodes. Kookie Flow draws everything in WebGL instead, so a board with 50,000 nodes stays at 60 frames per second when you pan, zoom and drag. Its API is similar to React Flow, so it is easy to learn if you know React Flow.
flow.tsx"use client";import { KookieFlow, useGraph, type Entity } from "@kushagradhawan/kookie-flow-react";import { skin } from "@kushagradhawan/kookie-flow-skin";const initialEntities: Entity[] = [ { id: "constant", type: "constant", position: { x: 0, y: 0 }, data: { label: "Constant" }, outputs: [{ id: "value", name: "Value", type: "float" }], }, { id: "viewer", type: "viewer", position: { x: 320, y: 0 }, data: { label: "Viewer" }, inputs: [{ id: "value", name: "Value", type: "float" }], },];export default function Flow() { const { entities, edges, onEntitiesChange, onEdgesChange, onConnect } = useGraph({ initialEntities, }); return ( <div style={{ width: "100%", height: 360 }}> <KookieFlow skin={skin} entities={entities} edges={edges} onEntitiesChange={onEntitiesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} /> </div> );}The speed comes from one rule: React does not render again while you work on the canvas. React state changes only when you add or remove an item. Positions change through refs on each animation frame, a quadtree finds the item under the pointer, and each letter of text comes from a font atlas on the GPU.
A graph runs through one function, onEvaluate, which gets the inputs of a node and returns its outputs. A node usually runs again when an input changes, but an expensive node, such as a call to an AI model, can be manual. A manual node shows that its result is old and waits until somebody runs it.
The look comes from a skin, and the default skin comes from Kookie UI, in light and dark. Kookie Studio uses Kookie Flow for its canvas. It is open source and before version 1.0, tested in Chromium only, and for now you build it from the repository.