A highly customizable, low-level Preact Goban component.

Usage no npm install needed!

<script type="module">
  import sabakiShudan from 'https://cdn.skypack.dev/@sabaki/shudan';


Shudan Goban

A highly customizable, low-level Preact Goban component.



  • Resizable
  • Board coordinates
  • Easy customization
  • Fuzzy stone placement
  • Stone placing animation
  • Board and stone markers
  • Lines and arrows
  • Heat and paint map
  • Busy state
  • Partial board


See documentation.

Build Demo

Make sure you have Node.js v8 and npm installed. First, clone this repository via Git, then install all dependencies with npm:

$ git clone https://github.com/SabakiHQ/Shudan
$ cd Shudan
$ npm install

Use the build-demo script to build the demo project:

$ npm run build-demo

You can use the watch-demo command for development:

$ npm run watch-demo

Open demo/index.html in your browser to run demo. Alternatively, use build-demo-react and watch-demo-react to build the React-based demo.