Chessground

Chessground in 2D and 3D

Chessground is a free/libre open source chess UI developed for lichess.org. It targets modern browsers, as well as mobile development using Cordova.

License

Chessground is distributed under the GPL-3.0 license (or any later version, at your option). When you use Chessground for your website, your combined work may be distributed only under the GPL. You must release your source code to the users of your website.

Please read more about GPL for JavaScript on greendrake.info.

Demos

Embedded PGN viewer
Chess TV
Board editor
Puzzles
Analysis board
Game preview

Features

Chessground is designed to fulfill all lichess.org web and mobile apps needs, so it is pretty featureful.

Well typed with TypeScript
Fast. Uses a custom DOM diff algorithm to reduce DOM writes to the absolute minimum.
Small footprint: 10K gzipped (31K unzipped). No dependencies.
SVG drawing of circles, arrows, and custom user shapes on the board
Arrows snap to valid moves. Freehand arrows can be drawn by dragging the mouse off the board and back while drawing an arrow.
Entirely configurable and reconfigurable at any time
Styling with CSS only: board and pieces can be changed by simply switching a class
Fluid layout: board can be resized at any time
Support for 3D pieces and boards
Full mobile support (touchstart, touchmove, touchend)
Move pieces by click
Move pieces by drag & drop
- Minimum distance before drag
- Centralisation of the piece under the cursor
- Piece ghost element
- Drop off revert or trash
Premove by click or drag
Drag new pieces onto the board (editor, Crazyhouse)
Animation of pieces: moving and fading away
Display last move, check, move destinations, and premove destinations (hover effects possible)
Import and export positions in FEN notation
User callbacks
No chess logic inside: can be used for chess variants

Installation

npm install --save chessground

Usage

import { Chessground } from 'chessground';

const config = {};
const ground = Chessground(document.body, config);

Wrappers

React: react-chess/chessground, ruilisi/react-chessground
Vue.js: vitogit/vue-chessboard, qwerty084/vue3-chessboard
Angular: topce/ngx-chessground
Svelte: agelas/svelte-chessground-ui, gtim/svelte-chessground, gtm-nayan/svelte-use-chessground

More? Please make a pull request to include it here.