<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.
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, drag the size. The markup updates as you go.
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