Home

ChessVision Wiki

Documentation for the current stable release of ChessVision.

Pages

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

Project overview

ChessVision is a browser-based chess diagram editor. It renders positions from FEN notation and produces high-resolution, print-ready image exports. An optional account enables cloud sync across devices — the app is otherwise fully functional without one.

Architecture summary

ChessVision is a single-page React 19 application built with Vite 8.

Application layer

• React 19 with React Router 7 for client-side routing. All 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/shared/utils/fenParser.ts. Input is hard-capped at MAX_FEN_LENGTH = 93.
• The interactive board editor is built on @dnd-kit with both pointer and touch sensors.
• Board rendering targets an off-screen HTMLCanvasElement via src/shared/utils/canvasRenderer.ts.

Export pipeline

• PNG and JPEG export run through canvasExporter.ts, with physical-dimension targeting (centimeters to pixels) computed in imageOptimizer.ts.
• Heavy raster work runs off the main thread via a Web Worker (src/shared/workers/).
• SVG export is handled by svgExporter.ts.
• Batch export is assembled into a ZIP through archiveManager.ts.
• A shared cancel / pause / resume state machine governs every long-running export.
• Safari canvas memory is protected by an explicit canvas.width = 0 disposal after every blob generation.

State layer

• Three React contexts: FENBatchContext, ModalContext, ThemeSettingsContext.
• Persistence: localStorage for local data, Supabase for optional cloud sync.
• All untrusted-string reads go through safeJSONParse.

Auth layer

• Email/password authentication with TOTP-based two-factor authentication via Supabase.
• Row-level security: each user can only read and write their own rows.
• 90-day re-verification gate for sensitive operations.

Tooling

• pnpm 10, Vite 8, Tailwind 4, TypeScript 6 (strict).
• ESLint 9, Prettier, Husky, lint-staged, commitlint, Conventional Commits.
• semantic-release configured against the master branch.
• GitHub Actions: CI, CodeQL, semantic-release, label sync, PR labeler.