gird

src/App.tsx

@@ -32,6 +32,12 @@ import { Moon, Sun } from 'lucide-react'
 // Generate short unique node ids when missing
 const genId = () => `node_${Math.random().toString(36).slice(2, 9)}`
 
+const SNAP_GRID: [number, number] = [15, 15]
+const snapToGrid = (x: number, y: number): { x: number; y: number } => ({
+  x: Math.round(x / SNAP_GRID[0]) * SNAP_GRID[0],
+  y: Math.round(y / SNAP_GRID[1]) * SNAP_GRID[1],
+})
+
 const initialNodes: Node[] = [
   {
     id: 'config-1',
@@ -107,6 +113,7 @@ export default function App() {
       } catch (e) {
         // ignore and use raw point
       }
+      position = snapToGrid(position.x, position.y)
 
       const id = genId()
       const typeMap: Record<string, Node['type']> = {
@@ -166,10 +173,12 @@ export default function App() {
                 onConnect={onConnect}
                 nodeTypes={nodeTypes}
                 colorMode={theme as ColorMode}
+                snapToGrid
+                snapGrid={SNAP_GRID}
                 fitView
                 onInit={onInit}
               >
-                <Background />
+                <Background variant="dots" gap={20} />
                 <Controls />
                 <MiniMap />
               </ReactFlow>