# Kookie Flow > A WebGL-native node graph library for React: entities are instanced meshes, edges are batched GPU geometry and text is drawn through MSDF shaders. Every page below is available as markdown by adding `.md` to its path. ## Getting started - [Installation](https://flow.kookie.design/start/installation.md): Add Kookie Flow and its peer dependencies to a React 19 app, then give the canvas a box with a height so it has room to draw. - [Quick start](https://flow.kookie.design/start/quick-start.md): Build a two-node graph step by step: describe the entities, give them sockets, hold them in state, and drag a wire between them. - [Controlled and uncontrolled state](https://flow.kookie.design/start/state.md): The canvas keeps its own copy of your graph and reports most edits back to you. Decide whether to apply those reports with useGraph, in your own store, or not at all. ## Entities - [The entity model](https://flow.kookie.design/entities/model.md): Every object on the canvas, from a node with sockets to a sticky note or a video, is an entity with an id, a type, a position and data. - [Sockets and widgets](https://flow.kookie.design/entities/sockets.md): Give an entity typed inputs and outputs. An unconnected input can show a control, such as a slider or a text field, that sets its value. - [Entity types](https://flow.kookie.design/entities/types.md): Describe a kind of node once, with its label, size and sockets, so every entity of that type gets them without repeating them. - [Frames and groups](https://flow.kookie.design/entities/frames.md): Put entities inside a frame to group them, collapse a frame to hide what it holds, and fold a set of nodes into one group node with ports. - [Text and comments](https://flow.kookie.design/entities/text.md): Place text on the canvas that people can edit in place, choose how it sizes itself, and add sticky-note comments. - [Images, video and models](https://flow.kookie.design/entities/media.md): Show pictures, video clips, and glTF models on the canvas, and let a node show whatever one of its outputs holds inside its own body. ## Edges and connections - [Edges](https://flow.kookie.design/edges/edges.md): Connect two sockets with an edge, choose the shape of its path, and add labels, arrows, moving light and reroute points. - [Connections](https://flow.kookie.design/edges/connections.md): Let people drag wires between sockets, turn a finished drag into an edge, and reject the connections your graph can't use. ## Data - [Evaluation](https://flow.kookie.design/data/evaluation.md): Give the canvas one function that computes an entity's outputs from its inputs. The canvas decides when to call it, cancels stale runs and shows progress on the node. - [Saving and exporting](https://flow.kookie.design/data/saving.md): Save the graph as plain data you can store and load again, and export what is on screen as an image. - [Undo and redo](https://flow.kookie.design/data/history.md): Turn on undo and redo in useGraph, add buttons for them, and learn what counts as one step. - [Layout and alignment](https://flow.kookie.design/data/arrange.md): Tidy a whole graph into columns, line a selection up or space it evenly, and help people place nodes with guides and a snapping grid. - [The flow store](https://flow.kookie.design/data/store.md): Read and change the live graph from any component rendered inside KookieFlow, without re-rendering on every frame. - [Graph queries](https://flow.kookie.design/data/graph-queries.md): Ask what feeds an entity, what it feeds, what order things run in and whether the graph is valid, and work out rewiring edits such as inserting a node on an edge. - [Clipboard and cloning](https://flow.kookie.design/data/clipboard.md): Copy, cut and paste a selection with useClipboard, or clone entities yourself to duplicate them and to copy a graph between tabs. ## Interaction - [Canvas and camera](https://flow.kookie.design/interaction/camera.md): Pan and zoom the canvas, set where the view starts, move the camera from code, and convert between screen and world coordinates. - [Selection](https://flow.kookie.design/interaction/selection.md): Select, move, resize, and delete entities and edges with the pointer, respond to clicks, and read or set the selection from code. - [Keyboard](https://flow.kookie.design/interaction/keyboard.md): Use the keys the canvas already responds to, reach a node's controls without a mouse, and add your own shortcuts without taking keys from the rest of the page. - [Selection toolbar](https://flow.kookie.design/interaction/toolbar.md): Show a floating toolbar above the selection with built-in controls for text, comments, images and ink, or with controls you write yourself. - [Context menus](https://flow.kookie.design/interaction/context-menu.md): Open your own menu when someone right-clicks or long-presses the canvas, work out what they clicked, and act on it. - [Drawing](https://flow.kookie.design/interaction/drawing.md): Press D to turn on the pen and draw freehand strokes. Each stroke is an entity you can select, move, restyle and undo. - [Dropping and pasting media](https://flow.kookie.design/interaction/drop-and-paste.md): Paste or drop a picture, a video, a glTF model or a link to one onto the canvas, and it becomes an entity. Pass onFileDrop when you want the files yourself, for example to upload them first. ## Styling - [Theming](https://flow.kookie.design/styling/theming.md): The canvas paints with your KookieUI theme's colours, spacing and corners, and repaints when the root Theme's settings change. - [Entity styling](https://flow.kookie.design/styling/entities.md): Choose the size, variant, corner radius and title placement every node is drawn with, mark nodes with a line of colour, and override the resolved style where you need to. - [Fonts and text rendering](https://flow.kookie.design/styling/fonts.md): Choose the font the canvas draws its labels with, use the platform's own font, or bring an MSDF font atlas of your own. - [Minimap](https://flow.kookie.design/styling/minimap.md): Show a small overview of the whole graph in a corner of the canvas. People can click it or drag it to move the view. ## API reference - [KookieFlow](https://flow.kookie.design/api/kookie-flow.md): Look up every KookieFlow prop with its type and default, grouped by purpose, with a link to the chapter that explains it. - [The ref instance](https://flow.kookie.design/api/instance.md): Look up every method on the KookieFlow ref, see which ones report their edits to onEntitiesChange, and follow each one to its chapter. - [Hooks](https://flow.kookie.design/api/hooks.md): Look up every hook the package exports and where each one works, then read the style, layout and font hooks that let an overlay match what the canvas drew. - [Utilities](https://flow.kookie.design/api/utilities.md): Use the plain functions the package exports to find what sits under a point, walk frames and their children, and convert CSS colours for your own drawing. - [Types](https://flow.kookie.design/api/types.md): Find every exported type and the chapter that explains it, and narrow an entity to a built-in type with the type guards.