chessboard-element

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, content management systems, standard Markdown, and more!

Declarative configuration with attributes

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

HTML

<chess-board
    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());

Start Position Clear Board

Works with your favorite framework

Because <chess-board> is a web component, it works in any framework.

Here's <chess-board> inside of a React app.

And at only 15k minified and gzipped it's probably smaller than your framework!