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