## Overview

At its core, React Flow is about creating interactive flowgraphs — a collection of nodes connected by edges. To help you understand the terminology we use throughout the documentation, let’s take a look at the example flow below.

## Nodes, handles, edges, and viewport

React Flow has a few default node types out of the box, but customization is where the magic of React Flow truly happens. You can design your nodes to work exactly the way you need them to—whether that’s embedding interactive form elements, displaying dynamic data visualizations, or even incorporating multiple connection handles. React Flow lays the foundation, and your imagination does the rest.

A handle (also known as a “port” in other libraries) is the attachment point where an edge connects to a node. By default, they appear as grey circles on the top, bottom, left, or right sides of a node.

## Learn and reference

The documentation covers Core Concepts, Building a Flow, Adding Interactivity, The Viewport, Built-In Components, Customization, Nodes, Handles, Edges, Edge Labels, Utility Classes, Theming, Layouting, Hooks and Providers, Accessibility, Testing, TypeScript, Uncontrolled Flow, Performance, State Management, Computing Flows, Server Side Rendering, Devtools, Multiplayer, and Whiteboard Features.

React Flow also provides an API Reference for `<ReactFlow />`, `<ReactFlowProvider />`, components, hooks, types, and utils, plus examples for nodes, edges, interaction, collaborative features, subflows & grouping, layout, styling, whiteboard, and miscellaneous use cases.

React Flow Playground lets you “Explore different props, options and layout algorithms in our interactive playground.”