Skip to content

Home

Jump to bottom
Khatai Huseynzada edited this page Jan 3, 2026 · 2 revisions

♟️ Chess Viewer Wiki

Welcome to the Chess Viewer Wiki. This documentation explains how to use the Chess Diagram Generator, its features, and technical details.

📌 Overview

Chess Viewer is a professional chess diagram generator designed for players, coaches, content creators, and developers. It allows you to visualize chess positions using FEN notation, customize the board and pieces, and export ultra-high-resolution images suitable for web and print.

Key goals:

  • Accurate chess position rendering
  • Advanced customization
  • Ultra-HD export quality
  • Clean and modern UI

♞ FEN Notation Support

The application fully supports Forsyth–Edwards Notation (FEN).

Example FEN

rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1

Supported fields

  • Piece placement
  • Active color
  • Castling availability
  • En passant target square

Invalid FEN strings are automatically detected and rejected.

🎨 Board & Piece Customization

Board Themes

  • 12+ preset themes (Brown, Blue, Green, Wood, etc.)
  • Fully customizable light and dark square colors
  • Supports HEX / RGB / HSL color formats

Piece Styles

  • 20+ professional piece sets
  • Inspired by popular chess platforms
  • High-contrast styles for print and digital use

🧭 Board Controls

  • Flip board – view from Black’s perspective
  • Coordinates toggle – show/hide files (a–h) and ranks (1–8)
  • Reset board – return to default position

🖼️ Ultra-HD Export

Chess Viewer supports extremely high-quality exports using HTML5 Canvas.

Export formats

  • PNG
  • JPEG

Export quality

  • 4× to 32× scale
  • Maximum resolution: 12,800 × 12,800 px
  • Optimized compression for large images

Use cases

  • Chess books & PDFs
  • Thumbnails & blog posts
  • Social media diagrams
  • Printable study material

📋 Preset Positions

The app includes a set of famous and commonly used chess positions:

  • Starting position
  • Classical openings
  • Study and training positions

These presets help you get started quickly.

🛠️ Tech Stack

  • React – UI and state management
  • Tailwind CSS – styling system
  • HTML5 Canvas – board rendering and export
  • JavaScript (ES6+) – core logic

🚀 Roadmap

Planned features for future versions:

  • PGN import support
  • Move navigation
  • Annotation tools (arrows, circles)
  • SVG export
  • Mobile UI optimizations

📄 License

This project is licensed under the MIT License. You are free to use, modify, and distribute the software with attribution.

🌐 Links

If you have suggestions or find issues, please use the Issues section on GitHub.

Happy analyzing ♟️

Clone this wiki locally