Skip to content
Branch: master
Go to file

Latest commit


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.

Single board view Multiple boards view
interface screenshot interface screenshot

A demo is available on:


  • Banner with general information about the tournament and 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 rounds on the same page
  • Support for embedding video (live stream)
  • Download PGN / FEN of the current game, round or whole tournament
  • Multiple boards view (e.g. 6 boards)
  • Responsive design - mobile phone friendly



  • Clone the 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.04 is placed one directory up)
<script src="../pgn4web-3.04/pgn4web.js"></script>
<link rel="stylesheet" type="text/css" href="../pgn4web-3.04/fonts/pgn4web-font-ChessSansUsual.css">

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

  • Upload / broadcast your PGN files on the server, and define their locations in assets/js/setup.js in the operatorSettings() function. For instance:
function operatorSettings() {
    allPGNs.push(["Round 1 - dd/mm/yyyy hh:mm", "pgn/r1.pgn"])


In index.html you can:

  • edit the general information about the tournament
  • add / edit buttons for hyperlinks

In assets/js/setup.js you can configure:

  • in operatorSettings() edit the links to already defined buttons and name of the operator
  • some default options (such as autoplay delay, move highlighting etc.)
  • number of miniboards for the multiple boards view
let numberMiniboards = 6;

In assets/style.css you can do some basic configuration of used colors. The customization of colors will be systematically addressed later

:root {
    --bg-color: #F3F3F3;
    --first-color: #DCDCDC;


  • 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 purposes. Each PGN file includes cca. 600 games

Credits and license

  • This website is based on pgn4web
  • The engine currently used is Stockfish compiled to JavaScript. The release is obtained from stockfish.js
  • Icons present on the website are from Flaticon (made by PixelPerfect and Freepik), or from Wikimedia
  • 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) 2020 Patrick Nikić (see LICENSE file)
  • You are free to use clint for your website. You are encouraged to notify me if you are using clint

Future work:

  • Translation
  • Add functionality for live time countdown during broadcast
  • Add snackbar-like notifications when a moves is played
  • Implement resizable board
  • Fix some responsive design issues (regarding to mobile phone rotations)
  • Customization of colors
You can’t perform that action at this time.