Skip to content

Home

Jump to bottom
BilgeGates edited this page Jun 28, 2026 · 4 revisions

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.

Clone this wiki locally