Quartz 4

20_create_edge_objects

3 min read

Create edge objects

To create an edge, we define an array of edge objects.

Each edge object needs to have an id, a source (where the edge begins), and a target (where it ends). In this example, we use the id values of the two nodes we created so far (n1 and n2) to define the edge:

const initialEdges = [
  {
    id: 'n1-n2',
    source: 'n1',
    target: 'n2',
  },
];

This edge connects the node with id: 'n1' (the source) to the node with id: 'n2' (the target).

Add edges to the flow

Now we can pass our initialEdges array to the <ReactFlow /> component using the edges prop:

<ReactFlow nodes={initialNodes} edges={initialEdges}>
  <Background />
  <Controls />
</ReactFlow>

Your flow should now look like this:

Example: learn/building-a-flow-3

App.jsx
import { ReactFlow, Controls, Background } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
const initialNodes = [
  {
    id: 'n1',
    data: { label: 'Node 1' },
    position: { x: 0, y: 0 },
    type: 'input',
  },
  {
    id: 'n2',
    data: { label: 'Node 2' },
    position: { x: 100, y: 100 },
    type: 'output',
  },
];
const initialEdges = [{ id: 'n1-n2', source: 'n1', target: 'n2' }];
 
function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow nodes={initialNodes} edges={initialEdges} fitView colorMode="system">
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}
 
export default Flow;
index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Flow Example</title>
    <style>
      html,
      body {
        margin: 0;
        font-family: sans-serif;
      }
 
      #app {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./index.jsx"></script>
  </body>
</html>
index.jsx
import { createRoot } from 'react-dom/client';
import App from './App';
 
const container = document.querySelector('#app');
const root = createRoot(container);
 
root.render(<App />);
Edge label and type

By default, React Flow allows you to add text labels to edges that will float in the middle of the edge via the label property. Also, many types of edges are built in, such as smoothstep and step. We can change the type of the edge by setting the type property.

const initialEdges = [
  {
    id: 'n1-n2',
    source: 'n1',
    target: 'n2',
    type: 'smoothstep',
    label: 'connects with',
  },
];
Done! 🎉

Congratulations! You have completed a basic flow with nodes and edges! 🎉

Full code example 🏁

The completed flow will look like this:

Example: learn/building-a-flow-4

App.jsx
import { ReactFlow, Controls, Background } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
const initialNodes = [
  {
    id: 'n1',
    data: { label: 'Node 1' },
    position: { x: 0, y: 0 },
    type: 'input',
  },
  {
    id: 'n2',
    data: { label: 'Node 2' },
    position: { x: 100, y: 100 },
    type: 'output',
  },
];
const initialEdges = [
  { id: 'n1-n2', source: 'n1', target: 'n2', label: 'connects with', type: 'smoothstep' },
];
 
function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow nodes={initialNodes} edges={initialEdges} fitView colorMode="system">
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}
 
export default Flow;
index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Flow Example</title>
    <style>
      html,
      body {
        margin: 0;
        font-family: sans-serif;
      }
 
      #app {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./index.jsx"></script>
  </body>
</html>
index.jsx
import { createRoot } from 'react-dom/client';
import App from './App';
 
const container = document.querySelector('#app');
const root = createRoot(container);
 
root.render(<App />);

You took your first steps in React Flow! You might have realized that you can’t drag or otherwise interact with nodes. On the next page you’ll learn how to make the flow interactive.

Graph View