To get an SVG, add a fen string after https://rnbqkbnr.com/ (i.e. https://rnbqkbnr.com/rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR for the start position).

You can add the full fen string and everything past the board position is ignored (i.e. https://rnbqkbnr.com/rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1 is also the start position).

You don't need the / between rows and/or use other non-whitespace separators if desired.

SVGs can be embedded in websites or downloaded and used as desired. You can use this service to quickly add/share/visualize a particular image or to dynamically generate based on user input.

To get a PNG, add .png to the end of the url (i.e. https://rnbqkbnr.com/rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR.png).

PNGs can be embedded in websites, used anywhere that allows linking to images, or downloaded and used as desired. You can use this service to quickly add/share/visualize a particular image or to dynamically generate based on user input.

To generate a gif, visit https://rnbqkbnr.com/gif. You can also add a fen string followed by .gif to set the initial position in the generator (i.e. visit a url like https://rnbqkbnr.com/rnbqkbnr/ppppppp.gif).

There is currently no way to automatically generate/serve a gif so you will need to make a gif, download it, and then upload it somewhere if you wish to share.

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 <chess-board> 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: <chess-board fen="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR" arrows="e3e4 b1c3 g8f6" dark="blue" light="gray" border="12 black white"></chess-board>

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.

See this repl for an example implementation.

Autostereogram chess puzzles at https://rnbqkbnr.com/magichtml/1.html. Adjust your eyes so that some pieces pop off the board then solve the puzzle.

Explanation coming once data is more permanent.

I wrote a blog post about how to generate chess board images and am planning another post about how I setup the server to potentially serve millions of images each hour.

If you want me to work on more chess-related projects and/or improve the existing, visit this page to enter your email. Go to triplelog.com for links to my other projects, code snippets, and blog posts.