chessground
Version:
lichess.org chess ui
111 lines (82 loc) • 4.16 kB
Markdown
# Chessground
[](https://github.com/lichess-org/chessground/actions?query=workflow%3A%22Continuous+Integration%22)
[](https://www.npmjs.com/package/chessground)
_Chessground_ is a free/libre open source chess UI developed for
[lichess.org](https://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](https://greendrake.info/publications/js-gpl).
## Demos
- [Embedded PGN viewer](https://github.com/lichess-org/pgn-viewer)
- [Chess TV](https://lichess.org/tv)
- [Board editor](https://lichess.org/editor)
- [Puzzles](https://lichess.org/training)
- [Analysis board](https://lichess.org/ofWXRFGy)
- [Game preview](https://lichess.org/games)
## 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](https://lichess.org/variant)
## Installation
```sh
npm install --save chessground
```
### Usage
```js
import { Chessground } from 'chessground';
const config = {};
const ground = Chessground(document.body, config);
```
### Wrappers
- React: [react-chess/chessground](https://github.com/react-chess/chessground), [ruilisi/react-chessground](https://github.com/ruilisi/react-chessground)
- Vue.js: [vitogit/vue-chessboard](https://github.com/vitogit/vue-chessboard), [qwerty084/vue3-chessboard](https://github.com/qwerty084/vue3-chessboard)
- Angular: [topce/ngx-chessground](https://github.com/topce/ngx-chessground)
- Svelte: [gtim/svelte-chessground](https://github.com/gtim/svelte-chessground), [gtm-nayan/svelte-use-chessground](https://github.com/gtm-nayan/svelte-use-chessground)
More? Please make a pull request to include it here.
## Documentation
- [Config types](https://github.com/lichess-org/chessground/tree/master/src/config.ts)
- [Default config values](https://github.com/lichess-org/chessground/tree/master/src/state.ts)
- [API type signatures](https://github.com/lichess-org/chessground/tree/master/src/api.ts)
- [Simple standalone example](https://github.com/lichess-org/chessground/blob/master/demo.html)
- [Examples repo](https://github.com/lichess-org/chessground-examples/tree/master/src/units)
- [Base CSS](https://github.com/lichess-org/chessground-examples/blob/master/assets/chessground.css)
## Development
Install build dependencies:
```sh
pnpm install
```
To build the node module:
```sh
pnpm run compile --watch
```
To build the standalone:
```sh
pnpm run dist
```