Isepic Chess UI is the user interface for isepic-chess.js.
- Add the necessary files (the order of the .js files is important):
<link rel="stylesheet" href="./css/isepic-chess-ui.css" />
<script src="./js/isepic-chess.js"></script>
<script src="./js/isepic-chess-ui.js"></script>- Wrap your code inside
document.addEventListener('DOMContentLoaded', function(){...});to wait for the DOM to be ready.
<script>
document.addEventListener('DOMContentLoaded', function () {
//you can overwrite configuration options
IcUi.setCfg('soundEffects', false);
IcUi.setCfg('scrollNavigation', false);
IcUi.setCfg('animationTime', 150);
//initialize a board
var board = Ic.initBoard({
boardName: 'main',
});
});
</script>Note: documentation for Ic.initBoard() can be found here.
-
Add some components (don't add them more than once) inside
<body>. -
Open the .html file.
https://ajax333221.github.io/isepic-chess-ui/
- Responsive board size
- Both drag-and-drop and click-from-click-to in parallel
- Interactive pawn promotion options
- Highlight last move, legal moves and checks
- Integrated drawing system for multi-color arrows and circles
- Components:
- Chess board
- Board tabs (with switch-to-board links)
- Material difference (small piece icons)
- Navigation buttons (first, previous, next and last)
- Rotate board button
- Promotion dropdown
- SAN move list (with jump-to-move links and board-tooltip preview)
- Selectable FEN text
- Push alerts top
- Push alerts bottom
- Debug toggler
- Debug
- Automatic component binding, no need to do anything manually to the DOM elements (they will simply work just by having their correct id property at any given time)
- Piece displacement animation
- Chess fonts:
- Chess themes: "wood" (default), "olive", "magenta" and "aqua"
- Sound effects
- Move navigation via scrolling and arrow keys
- Push alerts
- Puzzle mode (🚧 work in progress 🚧)
Note: make sure to also read the isepic-chess.js Documentation.
Copyright © 2026 Ajax Isepic (ajax333221)
Licensed under MIT License: http://opensource.org/licenses/mit-license.php
