Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time

clint - chess live interface

clint is a complete website for live broadcasting of a chess tournament based on pgn4web. It is inspired by many chess websites and strives to offer their best functionalities to any chess broadcast operator. It can also be used simply as a viewer for PGN files.

Single board view Multiple boards view
interface screenshot interface screenshot

Checkout the demo page to see clint in action.

Table of contents


  • Banner with general information (about the tournament) and footer with customizable buttons for hyperlinks (other websites, photo gallery, tournament regulations etc.)
  • Chess board with compactly displayed player names, clock times and ratings
  • PGN section for display and navigation
  • Engine analysis
  • Switching between different games and PGN files (rounds) on the same page
  • Support for embedding video (live stream) or image for each PGN file (round)
  • Download PGN / FEN of the current game, round or whole tournament, sharing link to a specific game
  • Multiple boards view (e.g. 6 boards)
  • Responsive design - mobile phone friendly
  • Full color customization support, predefined light and dark theme



  • Clone this repository on your web server
  • Download pgn4web on your web server
  • Edit the pgn4web.js path and the fonts path in index.html and in mosaic-tile.html
    (in my case, pgn4web-3.06 is placed one directory up)
<script src="../pgn4web-3.06/pgn4web.js" defer></script>
<link rel="stylesheet" type="text/css" href="../pgn4web-3.06/fonts/pgn4web-font-ChessSansUsual.css">

and the image path for the pieces in assets/js/config.js

  • Upload / broadcast your PGN files on the server, and define their locations in assets/js/config.js in the listPGNFiles() function. Detailed explanation of all parameters is located through comments in the file itself. A configuration example follows:
function listPGNFiles() {
    // If broadcasting a tournament
        "name" : "Round 1",
        "pgn" : "pgn/r1.pgn"
        "name" : "Round 2",
        "pgn" : "pgn/r2.pgn"
    // ...
        "name" : "Archive",
        "pgn" : "pgn/all.pgn"

    // And/or if you just want to display some PGN files (ended tournaments)
        "name" : "Tournament (last year's edition)",
        "pgn" : "pgn/last_year.pgn",
        "video-left" : "<your-code>",
        "video-right" : "<your-code>",
        "image-left" : "<image-url>",
        "image-right" : "<image-url>"
    // ...


In index.html you can:

  • edit the general information about the tournament (e.g. banner)

In assets/js/config.js you can:

  • in operatorSettings() edit hyperlinks. Detailed explanation of all parameters is located through comments in the file itself. For instance:
    "text" : "Photo Gallery",
    "link" : "",
    "fa-icon" : "fas fa-images"
  • some default options (such as autoplay delay, move highlighting etc.)
  • expected round duration (used for automatically choosing the initial PGN file to be opened)
  • number of miniboards for the multiple boards view
let numberMiniboards = 6;

In assets/style.css you can configure all the colors used on the page. It comes with a predefined light and dark theme.

/* Light theme example preset */
:root {
    --bg-color: #eee;
    --bg-color-text: #111;
    --bg-color-light: #ddd;
    --bg-color-light-text: #111;
    --bg-color-text-light: #888;
    --bg-color-hover: #27c;
    --bg-color-hover-text: #eee;
    --bg-color-active: #cde;
    --main-color-bg: #ddd;
    --main-color-text: #000;
    --main-color-hover: #cccf;
    --main-color-border: #bbb;
    --white-square: #f0d9b5;
    --black-square: #b58863;
    --highlight-white-sq: #cdd26a;
    --highlight-black-sq: #aaa23a;


  • The page is currently in Croatian. With little effort, it can be translated to any language
  • The repository includes sample PGN files from the 42nd Chess Olympiad, which are present only for illustrational and testing purposes. PGN files include
    • r1.pgn - 40 games
    • r2.pgn - 144 games
    • r3.pgn - 596 games
    • all.pgn - 7426 games

Credits and license

  • This website is based on pgn4web
  • The engine currently used is Stockfish compiled to JavaScript. The releases are obtained from stockfish.js and stockfish.wasm
  • Icons present on the website are from Font Awesome
  • The layout of components is inspired by lichess
  • The above items remains subject to their original licenses (if any)
  • Remaining clint code is Copyright (c) 2023 Patrick Nikić (see LICENSE file)
  • You are free to use clint for your website. You should give it a proper attribution, so that interested viewers can find this repository and possibly use it themselves

I hereby sincerely thank all the people who helped make clint better by comments, suggestions and code contributions. Your feedback is much appreciated.


Future work:

  • Translation
  • Clock countdown
    • Add custom color
    • Fix interaction with board rotation (up to 1 second delay)
  • Resizable board
  • Fix some responsive design issues (regarding rotations to mobile phone)
  • Tournament table
  • Analysis board
  • Add landing page (with countdown to tournament start, description, overview - multiple boards)
  • Fetching ratings and countries from FIDE (or link to a player's profile by clicking on the name)
  • Placeholder for notifications (e.g. below banner)
  • Support for multiple tournaments (when there are too many PGN files, the dropdown menu is not a good option)
  • Show which games have new moves


If you want to support my work, consider a small donation via PayPal. Thank you!

Total donations:

Year Amount
2023 0 EUR
2022 28 EUR
2021 20 EUR

About the author

Patrick is a software engineer,
chess player and arbiter from Croatia.