diff --git a/src/container/GraphView/index.js b/src/container/GraphView/index.js
index aaabfc7b..21c68a4e 100644
--- a/src/container/GraphView/index.js
+++ b/src/container/GraphView/index.js
@@ -3,6 +3,7 @@ import { useStoreState, useStoreActions } from 'easy-peasy';
import NodeRenderer from '../NodeRenderer';
import EdgeRenderer from '../EdgeRenderer';
+import GridRenderer from '../GridRenderer';
import UserSelection from '../../components/UserSelection';
import NodesSelection from '../../components/NodesSelection';
import useKeyPress from '../../hooks/useKeyPress';
@@ -67,6 +68,7 @@ const GraphView = memo(({
return (
+
{
+ const {
+ width,
+ height,
+ transform: [x, y, scale],
+ } = useStoreState(s => s);
+
+ const gridClasses = classnames('react-flow__grid', className);
+ const scaledGap = gap * scale;
+
+ const xStart = x % scaledGap;
+ const yStart = y % scaledGap;
+
+ const lineCountX = Math.ceil(width / scaledGap) + 1;
+ const lineCountY = Math.ceil(height / scaledGap) + 1;
+
+ const xValues = Array.from({length: lineCountX}, (_, index) => `M${index * scaledGap + xStart} 0 V${height}`);
+ const yValues = Array.from({length: lineCountY}, (_, index) => `M0 ${index * scaledGap + yStart} H${width}`);
+
+ const path = [...xValues, ...yValues].join(' ');
+
+ return (
+
+ );
+});
+
+GridRenderer.displayName = 'GridRenderer';
+
+export default GridRenderer;