Hacker News

Show HN: A <chess-board> HTML element for any web page or app

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.


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

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:


Or in a React app here:


19 pointsspankalee posted 9 months ago
Comment loading...