Easy to integrate.

Adding a chess board to your page is as simple as adding an HTML tag to your document. And it has out-of-the-box support for mouse and keyboard moves.

<g-chess-board
  interactive
  fen="8/5p2/8/2b2k2/2P4P/4rPP1/R5K1/8">
</g-chess-board>

Add annotations.

Use named slots to show SVGs, images or any other HTML on any square. Draw arrows on squares using customizable brush styles.

<g-chess-board id="drawable-board" fen="start">
  <span slot="e5">
    <svg><!-- svg content --></svg>
  </span>
</g-chess-board>

const board = document.getElementById("drawable-board");
board.arrows = [
  { from: "e2", to: "e4" },
  { from: "g1", to: "f3" },
  { from: "c7", to: "c5", brush: "secondary" },
];

Customize everything.

Customize styles, colors and even piece images using attributes and CSS to fit the theme of your application.

<g-chess-board id="styled" coordinates="outside" fen="start">
</g-chess-board>

#styled {
  --square-color-dark: hsl(27deg, 36%, 55%);
  --square-color-light: hsl(37deg, 66%, 83%);
}