Black King

chessboard-element

A <chess-board> element for your web pages

As easy as HTML

<chess-board> is just an element. Use it anywhere you use HTML!

HTML

<chess-board></chess-board>

<chess-board> works in plain HTML documents, with your favorite framework, inside of CMSes, in Markdown, and more!

Declarative configuration with attributes

Set the board position, enable draggable pieces, show spare pieces, and more with attributes.

HTML

<chess-board id="board2"
    draggable-pieces
    position="8/R7/8/8/k1K5/8/8/8">
</chess-board>

Powerful HTML, JavaScript, and CSS APIs

Set the board position, move pieces, listen to events, style squares and pieces, and more with native HTML, JavaScript, and CSS APIs.

HTML

<chess-board id="board3"
    draggable-pieces
    spare-pieces
    drop-off-board="trash">
</chess-board>
<button id="startBtn">Start Position</button>
<button id="clearBtn">Clear Board</button>

JavaScript

startBtn.addEventListener('click', () => board3.start());
clearBtn.addEventListener('click', () => board3.clear());