18_add_imports

Add imports

First, import the React Flow Component and its required styles into your project. We’ll also import the Background component for visual enhancement, and the Controls component for the viewport controls.

import { ReactFlow, Background, Controls } from '@xyflow/react';
import '@xyflow/react/dist/style.css';

Render ReactFlow

Now we create a React component, that renders our flow. The width and height on the parent container are required because React Flow uses these dimensions. We can place the <Background/> and <Controls/> components inside ReactFlow.

Content inside `ReactFlow` stays fixed on top of the viewport. The `Background` component transforms its pattern to match viewport movement.

export default function App() {
  return (
    <div style={{ height: '100%', width: '100%' }}>
      <ReactFlow>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}

Empty flow

That’s it! You have created your first empty flow 🎉

If everything is set up correctly, you should see a blank canvas like this:

Example: learn/building-a-flow-1

App.jsx

import { ReactFlow, Controls, Background } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow 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 />);

Adding nodes

Now that the flow is set up, it’s time to add nodes — each node represents an element in your diagram with a specific position and content.

Quartz 4

Explorer