Svelte5 Chessground
A Svelte 5 wrapper for the Chessground library
svelte5-chessground
A Svelte 5 wrapper for the chessground chess board library.
Installation
npm install svelte5-chessground
Usage
Basic Example
<script lang="ts">
import { Chessground } from 'svelte5-chessground';
import 'svelte5-chessground/style.css';
let fen = 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1';
function handleMove(from: string, to: string) {
console.log('Move:', from, 'to', to);
}
</script>
<div class="container">
<Chessground {fen} onMove={handleMove} />
</div>
<style>
.container :global(.cg-wrap) {
width: 512px;
height: 512px;
}
</style>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
config |
Partial<Config> |
{} |
Chessground configuration object |
fen |
string |
undefined |
FEN string for initial position (shorthand, overrides config.fen) |
orientation |
'white' | 'black' |
'white' |
Board orientation (shorthand, overrides config.orientation) |
onMove |
(from: string, to: string) => void |
undefined |
Callback for move events |
api |
Api | undefined |
undefined |
Bindable reference to chessground API instance |
[!TIP] Don't mix shorthand props with their config equivalents. Shorthand props (
fen,orientation) take precedence over the same properties inconfig.
- Use
fenandorientationprops for simple cases- Use
configprop for complex configurations
[!NOTE] I’m still working out the details. Feel free to create an issue describing your use case to help shape this library.
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.
Credits
- chessground - The underlying chess board library by Lichess
