svelte5-chessground

November 4, 2025 · View on GitHub

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

PropTypeDefaultDescription
configPartial<Config>{}Chessground configuration object
fenstringundefinedFEN string for initial position (shorthand, overrides config.fen)
orientation'white' | 'black''white'Board orientation (shorthand, overrides config.orientation)
onMove(from: string, to: string) => voidundefinedCallback for move events
apiApi | undefinedundefinedBindable 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 in config.

  • Use fen and orientation props for simple cases
  • Use config prop 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