HexaFlow Board: Designing Hexagonal Node Canvases with ReactFlow

Most flow editors work on rectangular grids. But what if your data — or your users' imagination — doesn't fit in squares? HexaFlow Board is a premium ReactFlow example that replaces the traditional canvas with a stunning hexagonal grid, opening up entirely new possibilities for creative and technical diagramming.

Why Hexagonal Layouts?

Hexagonal grids have unique geometric properties that make them perfect for certain domains:

• Equal adjacency — every hex tile touches 6 neighbours at the same distance, unlike squares (4 near, 4 far)
• Natural clustering — data that forms organic clusters reads more naturally on hex grids
• Game and map design — strategy games, territory maps, and board simulations are a natural fit
• Visual appeal — hex layouts simply look more interesting than rectangular ones

With HexaFlow Board, you get all these benefits wrapped in a clean, production-ready ReactFlow implementation.

Key Features

Hexagonal Grid Canvas

The entire canvas is structured as an offset hexagonal coordinate system. Each tile snaps to hex grid positions, ensuring perfect alignment regardless of zoom level.

Custom Hex-Shaped Nodes

ReactFlow custom nodes are shaped using CSS clip-path to create true hexagons. Each node displays its label and can be colour-coded based on its type or state.

Interactive Board Layout

Users can drag nodes between hex positions, and the board automatically snaps them to the nearest valid grid coordinate. This creates a tactile, satisfying interaction model.

Drag & Drop Support

New nodes can be dragged from a side palette and dropped onto any empty hex position on the board.

Color-Coded Tile System

Tiles are colour-coded to represent different categories, statuses, or data values — making the board instantly scannable.

Zoom & Pan Controls

Standard ReactFlow viewport controls allow users to navigate large boards with many tiles without losing context.

Implementation Highlights

Hex Coordinate System

// Offset coordinates for flat-top hexagonal grid
export function hexToPixel(col: number, row: number, size: number) {
  const x = size * (3 / 2) * col;
  const y = size * Math.sqrt(3) * (row + (col % 2) * 0.5);
  return { x, y };
}

export function pixelToHex(x: number, y: number, size: number) {
  const col = Math.round((2 / 3) * x / size);
  const row = Math.round((-x / 3 + (Math.sqrt(3) / 3) * y) / size);
  return { col, row };
}

Custom Hex Node Component

const HexNode = ({ data }: { data: { label: string; color: string } }) => (
  <div
    style={{
      width: 80,
      height: 92,
      clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)',
      background: data.color,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      color: '#fff',
      fontWeight: 'bold',
      fontSize: 13,
    }}
  >
    {data.label}
  </div>
);

Snap-to-Grid Behaviour

const onNodeDragStop = useCallback(
  (_: React.MouseEvent, node: Node) => {
    const { col, row } = pixelToHex(node.position.x, node.position.y, HEX_SIZE);
    const snapped = hexToPixel(col, row, HEX_SIZE);
    setNodes(nodes =>
      nodes.map(n =>
        n.id === node.id ? { ...n, position: snapped } : n
      )
    );
  },
  [setNodes]
);

Use Cases

Project Structure

hexaflow-board/
├── components/
│   ├── HexCanvas.tsx       # Main ReactFlow canvas with hex grid
│   ├── HexNode.tsx         # Custom hexagonal node component
│   ├── HexPalette.tsx      # Drag source panel with node types
│   └── HexToolbar.tsx      # Controls: reset, export, colour picker
├── lib/
│   ├── hexGrid.ts          # Coordinate system utilities
│   └── snapToGrid.ts       # Snap-to-hex drag behaviour
└── data/
    └── initialBoard.ts     # Sample board configuration

Why This Is Unique

Most node-based editors — including the official ReactFlow examples — use only rectangular or free-form positioning. HexaFlow Board is one of the very few production-ready examples using a constrained hexagonal coordinate system, making it a genuinely differentiated tool in your portfolio.

Whether you're building a game editor, a creative data visualiser, or just want to explore unconventional UI patterns with ReactFlow, HexaFlow Board gives you the solid foundation to get there fast.

Purchase includes full TypeScript source, setup instructions, and the complete hex coordinate utility library. Ready to run with npm install && npm run dev.