Home

ChessVision Wiki

This wiki documents the v5.5.3 stable release of ChessVision. It reflects the state of the master branch only. Forward-looking development happens on develop; that work is intentionally not described here and will be incorporated when it ships.

Pages

• Setup — Prerequisites, installation, development workflow, and production build.
• Features — The complete stable feature set on master, inventoried from source.
• Maintenance — How to report bugs, request features, and contribute.

Project Overview

ChessVision is a browser-based chess diagram generator. It renders chess positions from FEN notation and produces high-resolution, print-ready image exports. The application is entirely client-side: there is no server, no account requirement, and no remote persistence on the stable line.

The product serves players, coaches, content creators, and developers who need accurate and reproducible board renderings.

Architecture Summary

ChessVision v5.5.3 is a single-page React application built with Vite. The architecture is organized along the following lines:

Application Layer

• React 19 with react-router-dom 7 for client-side routing.
• All eight top-level routes are split with React.lazy and wrapped in Suspense.
• Route transitions are animated with framer-motion (AnimatePresence).

Domain Layer

• FEN parsing and validation live in src/utils/fenParser.ts and src/utils/validation.js. Input length is hard-capped at MAX_FEN_LENGTH = 93.
• The interactive board editor is built on react-dnd with both the HTML5 and Touch backends, so drag-and-drop works on desktop and touch devices.
• Board rendering goes through src/utils/canvasRenderer.js, which targets an off-screen HTMLCanvasElement.

Export Pipeline

• PNG and JPEG export run through canvasExporter.js, with physical-dimension targeting (centimeters to pixels) computed in imageOptimizer.js.
• Large canvases are produced through chunked main-thread rendering in advancedExport.js.
• SVG export is handled by svgExporter.js.
• Batch export from the Advanced FEN page is assembled into a ZIP through archiveManager.js.
• A shared cancel / pause / resume state machine governs every long-running export.

State Layer

• Three React contexts: FENBatchContext, LayoutContext, ThemeSettingsContext.
• Persistence is localStorage only. All untrusted-string reads go through safeJSONParse in src/utils/validation.js.
• The FEN history persists through useFENHistory with a 300 ms debounce on writes.

Tooling

• pnpm 10 workspace (packageManager: pnpm@10.33.0).
• Vite 8, Tailwind 4, TypeScript 6 (the codebase is predominantly .jsx / .js; TypeScript coverage is partial in v5.x).
• ESLint 9 with React, React Hooks, and React Refresh plugins. CI enforces --max-warnings=0 for production.
• Prettier, Husky, lint-staged, commitlint, and Conventional Commits.
• semantic-release is configured against the master branch.

For the authoritative source-tree inventory and known limitations, see ROADMAP.md on master.