Skip to content


Repository files navigation

⬡ Honeycomb NPM version Minified size Gitter

A hexagon grid library made in JavaScriptTypeScript, heavily inspired by Red Blob Games' blog posts and code samples.

Honeycomb works in modern browsers and Node (>=16). It's recommended to use Honeycomb with TypeScript, but not required.




npm i honeycomb-grid


yarn add honeycomb-grid

Or download the distribution from jsdelivr or

Basic example

Create a rectangular grid of 10 by 10 hexes and log each hex:

import { defineHex, Grid, rectangle } from 'honeycomb-grid'

// 1. Create a hex class:
const Tile = defineHex({ dimensions: 30 })

// 2. Create a grid by passing the class and a "traverser" for a rectangular-shaped grid:
const grid = new Grid(Tile, rectangle({ width: 10, height: 10 }))

// 3. Iterate over the grid to log each hex:


Documentation is available at API docs can be found at


These are ideas that may require further investigation 🕵️. Don't hesitate to open an issue or start a discussion.

  • Directions should also be given in degrees (in steps of 30°)?
  • Add functionality related to edges and/or corners. Use
  • Add path finding (e.g. A*) functionality. Currently available as an example, see /examples/a-star-path-finding/.
  • Clarify the "Line of sight" example (and rename to "Field of view"). Maybe add animations and some enemies as well?
  • Add examples for (procedural) map generation (from a seed).