chessboard.js

As easy as two lines.

HTML

<div id="board1" style="width: 400px"></div>

JavaScript

var board1 = Chessboard('board1', 'start')

Customize with a powerful API.

HTML

<div id="board2" style="width: 400px"></div>
<button id="startBtn">Start Position</button>
<button id="clearBtn">Clear Board</button>

JavaScript

var board2 = Chessboard('board2', {
  draggable: true,
  dropOffBoard: 'trash',
  sparePieces: true
})
$('#startBtn').on('click', board2.start)
$('#clearBtn').on('click', board2.clear)

Start Position Clear Board