I made a web component 🔗 to render Conway’s Game of Life in an offscreen canvas.

You can install from NPM 🔗 or download the game-of-life.js 🔗 JavaScript file manually and add it to your site.

    npm install @jedidiah/game-of-life-wc --save

Once you have the script on your page then you can use it in html as an element like this:

<game-of-life fps="6" cellSize="4"></game-of-life>

<game-of-life fps="6" color1="white" color1Tick="rgba(255,255,255,0.5)"  color2="rebeccapurple" cellSize="4"></game-of-life>

Settings

• fps - The game can run a bit too quickly, this attribute will limit the max speed to a given fps (frames per second). Note if prefers reduced motion is set on the users device then this attribute is ignored and the fps is limited to 1.
  Default: fps=“12”

• cellSize - How many pixels wide should each cell be drawn on the canvas.
  Default: cellSize=“1”

• color1 - This is the colour of the background and dead cells
  Default: color1=“rgba(0, 20, 0, 1)“

• color1Tick - To allow cells to fade out when they die this colour is overlayed each tick/frame of the animation. If you want dead cells to disappear straight away then set this to the same value as color1
  Default: color1Tick=“rgba(0, 20, 0, 0.3)“

• color2 - This is the colour the live cells will be drawn in
  Default: cellSize=“rgba(0, 200, 0, 1)“

• width - The width of the canvas (not the width it will be rendered)
  Default: width=“300”

• height - The height of the canvas (not the height it will be rendered)
  Default: height=“150”

• hueRotate - Instead of setting color2 you can just have all the colours
  Default: hueRotate=“false”

<game-of-life fps="60" height="600" hueRotate color1="white" color1Tick="transparent" cellSize="2"></game-of-life>

I love the effect you get when you enable hueRotate and set the the tick colour to transparent. It’s like a living ink running round a page.

Game of Life Web Component © 2025 by Jedidiah Broadbent is licensed under CC BY-SA 4.0