Skip to main content

Edge Types

React Flow comes with five edge types (default, straight, step, smoothstep, simplebezier). As the names indicate, the edges differ in the representation. The default type is a bezier edge. The basic edge types are default (bezier), straight, step, smoothstep and simplebezier. You can read about how to add custom types in the custom edge types section.

Built-in Edge Types​

The default edgeTypes object looks like this:

{
  default: BezierEdge,
  straight: StraightEdge,
  step: StepEdge,
  smoothstep: SmoothStepEdge
  simplebezier: SimpleBezier
}

The keys represent the type names and the values are the edge components.

Edge Types Overview​