Include the chess-board.js script (either inline, a version uploaded on your server, or via https://rnbqkbnr.com/chess-board.js) and then add elements anywhere in your HTML to produce an SVG of the board image.

Set the width/position of the board with CSS (use the chess-board selector or set ids for different elements) or the style attribute.

One example element for the start position is:

Set the position with the fen attribute.

Set arrows with arrows attribute. The arrows can be separated by spaces or commas. Each arrow should be 4 characters: the initial square followed by the destination square. There is no way to edit the color/style at the moment(without editing the chess-board.js file, but you will need to edit the endpoint and the path).

Set the colors of dark and light squares by using the dark and light attributes. Any SVG color should work: names like white, rgb(), or hex.

Set the border with the border attribute. The first part is the width in points where each square is 45 points wide. Optionally, add a space and then the color of the border and then another space followed by the color of the text.

I hope any future syntax changes will be backwards compatible, but there are no promises at the moment as I do hope to add more features/options soon.

Read this blog post about creating the chess board images, visit rnbqkbnr.com to express your support for this project and signup for updates, and/or check out more of my projects at triplelog.com.