<chess-board>
A web component that renders a chess position. Put a FEN string between the tags and get a board. No framework, no stylesheet to load, one small dependency.
$ npm install chess-board- Standards only. A plain custom element with shadow DOM.
- Typed. Ships TypeScript declarations for the element, squares and pieces.
- Scriptable. Move, place and clear pieces from JavaScript.
Every ply is one board.move(from, to) call on the same element. Castling is two calls. The last move is marked with ::part().
Quick start
Install, import, write markup. The element registers itself on import.
-
Install
The package is plain ES2022 with a single runtime dependency,
fen-chess-board.$ npm install chess-board -
Import once
Importing the module registers the
<chess-board>element. Do it once, anywhere in your app.import "chess-board"; -
Write markup
The text content is the position. The piece-placement field of a FEN string is enough; the rest is ignored.
<chess-board> rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR </chess-board>
Playground
Toggle the attributes, paste a position, pick a colour scheme, drag the size. The markup updates as you go.
Styling
The colours are custom properties and every square is a ::part(),
so a page can theme the board and mark squares without touching the component.
frameColours
Set the properties on the element or on any ancestor. Leave one out and the board keeps its default for it, so nothing changes for pages that set none.
chess-board {
--chess-board-light: #eeeed2;
--chess-board-dark: #769656;
--chess-board-border: none;
}Squares
Each square carries the parts square, its own name and its shade.
Mark the last move, or the square an annotation is talking about:
chess-board::part(e2),
chess-board::part(e4) {
box-shadow: inset 0 0 0 0.15em #f0d13a;
}| Property | Applies to |
|---|---|
--chess-board-light | Light squares, #FFCE9E by default |
--chess-board-dark | Dark squares, #D18B47 by default |
--chess-board-border | Border around the 8×8 board, 1px solid black by default |
--chess-board-frame-font-size | File and rank labels, 40% by default |
| Part | Element |
|---|---|
board | The 8×8 table |
square | Every square |
a1 … h8 | One square |
light, dark | The squares of one shade |
frame | The file and rank labels shown by frame |
API
Grab a mounted element with querySelector and call methods on it.
Bad input throws and leaves the board untouched. Press a call to run it on this board.
Property
Methods
Markup
| Attribute | Effect |
|---|---|
frame | Show file (a–h) and rank (1–8) labels around the board. |
reverse | Flip the board so the black pieces are on the bottom. |
unicode | Render pieces as Unicode glyphs instead of the default SVGs. |
| Letter | Piece |
|---|---|
K Q R B N P | White king, queen, rook, bishop, knight, pawn |
k q r b n p | Black king, queen, rook, bishop, knight, pawn |
Sizing
The host is display: inline-block and every square is one em,
so a board goes wherever text goes and scales with font-size.
A diagram can sit right in a sentence, like this
chess-board {
font-size: 14px;
vertical-align: middle;
}12px22px34px with frame