Blogs
Visualise your chess studies with chesstree

Visualise your chess studies with chesstree

Avatar of wozzed
wozzed
| 5

I am working on a chess study/pgn (as in a commented pgn with variations) visualiser as a side project. I recently added an interactive tree view that looks kinda cool. I wonder if this would be helpful for other people for studying their own games, or other interesting games, openings etc. I find that looking at a chess game study as a tree of decisions and options help me to really understand and focus on the motifs of the game.

Maybe best to show some examples:

and here is a anim gif to demonstrate some of the features: chesstree interactive view demo -- the file is quite large, you might need to wait for it a bit to load.

But also let me summarise the features of the viewer:

  • Tree view (default) — a full interactive tree layout:
    • Dark theme with colour-coded nodes: main-line segments (blue) are visually distinct from variation segments (purple).
    • Node headers show the line type and move range, e.g. "Main line: 1–12" or "Variation: 8–10".
    • Collapsible nodes — click any node to hide its variation children while keeping the main-line continuation visible. A badge in the header shows how many nodes are hidden. Ctrl+click collapses all children including the main-line continuation.
    • Pan and zoom via scroll and drag.
    • Drag-to-reposition individual nodes.
    • Hover board images (optional, see -a below).
    • R key / ↺ Reset button restores the automatic layout.
  • Deck view — a sequential card-by-card navigator (toggle with the 📇 Deck button):
    • Step through game info and main-line segments one card at a time with ← → arrow keys or on-screen buttons.
    • When a card has variations, clickable buttons appear below showing each variation's first move and optional comment (mirroring the tree's edge labels).
    • Click a variation button to enter it; use ← → to step between sibling variations at the same branch point. Sub-variations are accessible the same way.
    • A breadcrumb trail shows your position in the tree and lets you jump back to any ancestor level. Press Escape to go up one level.
  • Cross-view navigation — double-click any node in the tree to open it directly in the deck view (with a zoom animation); double-click a deck card to jump back to the tree view centered on that node.
  • Light/dark theme toggle applies to both views.

There is also a graphviz based view with the same structure but much less interactivity if you are into these kind of things, the above opening study as an example with the graphviz based view (easy to obtain the dot format string from the webpage as well): caro-kann exchange graphviz based view

The project currenlty in development as an open source project, will be definitely availabe as a python based command line tool but could be turned into an online thing easily as well, have not crossed this particular bridge yet. I would be interested in any opinion, comment, question. Would you use such a tool? what seems to be missing? what seems to be wrong or what needs more work to make it useable for you?