Svelte Chessground

Overview

Svelte Chessground is a Svelte chessboard component that serves as a wrapper around Chessground, an open-source chess UI developed for Lichess. It provides screenshots of chessboards in both 2D and 3D.

Features

• Live demos showcasing the functionality of Chessground
• Extensive configuration options through props
• Support for displaying specific positions and flipping the board
• Reactivity and real-time updates for changes in orientation or fen
• Examples for allowing only legal moves, reactive position and orientation, playing against random AI, watching random AI play, and applying custom CSS

Installation

To install Svelte Chessground, you can follow these steps:

1. Install the package:

npm install svelte-chessground

2. Display a chessboard by importing the component and including it in your Svelte code:

import Chessboard from "svelte-chessground";

<svelte:head>
    <style>
        @import "svelte-chessground/dist/styles.css";
    </style>
</svelte:head>

<Chessboard />

3. Customize the chessboard by using the available props and configurations as described in Chessground’s config.ts.

Summary

Svelte Chessground offers a convenient way to integrate a chessboard component into Svelte applications. It leverages the features of Chessground and provides extensive customization options through props. With its reactivity and support for various configurations, it allows users to create interactive chessboard experiences. Additionally, it offers examples and guidance for applying custom CSS styles to completely restyle the chessboard.