Vivaldi

A browser-based React Flow starter using React, TypeScript, and Vite, adapted from the official React Flow Vite template linked in the Quick Start guide.

Use Node.js 22.12+ (or nvm use), then:

npm install
npm start

Open the local URL printed by Vite. npm run dev also starts the development server.

• Drag nodes to move them. The “drag me!” node displays its current coordinates.
• Drag from an output handle to an input handle to connect nodes.
• Select nodes or edges and press Backspace to delete them.
• Pan the canvas, zoom with the controls, or navigate using the minimap.

Changes are held in memory and reset when you reload the page.

npm run lint
npm run build
npm run preview

The build includes TypeScript checking and writes the production site to dist/.

• src/App.tsx: flow state, connection handling, and canvas controls.
• src/nodes/: initial nodes, custom position node, and node types.
• src/edges/: initial edges and edge types.
• src/main.tsx and src/index.css: browser entry point and full-height layout.