Hacker News

Hello HN,

For a few months I'm been working on a fun side-project to port the (awesome) chessboardjs library to an easily reusable and embeddable web component. The quarantine has finally spurred me to put the finishing touches on it.

https://justinfagnani.github.io/chessboard-element/

It works in plain HTML files just by writing an HTML tag:

    <chess-board></chess-board>

And it works in any framework because it's just an HTML element.

Styling is encapsulated and customizable with CSS properties and parts:

    chess-board {
      --dark-color: darkmagenta;
    }
    /* Highlight the e2 square in red */
    chess-board::part(e2) {
      box-shadow: inset 0 0 3px 3px red;
    }

I hope it's useful or fun for anyone who wants to do chess things on the web. You can try it out in plain HTML here:

https://jsbin.com/jajijab/2/edit?html,output

Or in a React app here:

https://stackblitz.com/edit/react-chess-board