♟️ Chess Diagram Generator

Professional chess position visualizer with ultra-HD export capabilities

Live Demo · Report Bug · Request Feature

---

📖 Table of Contents

• 📖 Table of Contents
• 🌟 Overview
• ✨ Features
• 🖼 Demo & Screenshots
• 🚀 Quick Start
  • Prerequisites
  • Installation
  • Production Build
• 📁 Project Structure
• 🛠️ Technology Stack
  • Core Technologies
  • Performance Stack
• 🌐 Browser Support
  • Required Browser Features
• 🔐 Security & Privacy
  • 🔒 Security Highlights
  • 🧠 Threat Model
  • 🛡️ Data Safety Guarantee
• 🤝 Contributing
  • Quick Contribution Guide
  • Contributors
• 📝 License
• 👨‍💻 Author
  • Khatai Huseynzada
• 🙏 Acknowledgments
  • Special Thanks
• 📧 Support & Contact
• FAQ

---

🌟 Overview

Chess Diagram Generator is a modern web application for creating high-quality chess diagrams from FEN notation.
It is built for chess players, coaches, authors, streamers, and developers who need fast, precise, and customizable board visuals.

---

✨ Features

• Full FEN notation support with validation
• Multi-FEN input (up to 10 positions)
• Ultra-HD PNG & JPEG export (up to 12,800×12,800px)
• Batch export & clipboard copy
• 23 professional piece sets
• Advanced color picker & themes
• Favorites, history & famous positions
• Board flip & coordinates

---

🖼 Demo & Screenshots

Live demo: https://chess-viewer-site.vercel.app

---

🚀 Quick Start

Prerequisites

Node.js >= 16
npm >= 8

Installation

# Clone the repository
git clone https://github.com/BilgeGates/chess_viewer.git

# Navigate to project directory
cd chess_viewer

# Install dependencies
npm install
# or
yarn install

# Start development server
npm start
# or
yarn start

The application will automatically open at http://localhost:3000

Production Build

# Create optimized production build
npm run build

# Preview production build locally
npm run preview

# Deploy to Vercel (requires Vercel CLI)
vercel --prod

---

📁 Project Structure

Complete File Tree (Click to expand)

chess_viewer/
│
├── 📂 public/
│   ├── index.html
│
├── 📂 src/
│   │
│   ├── 📂 components/
│   │   │
│   │   ├── 📂 board/              # Chess Board Rendering
│   │   │   ├── BoardSquare.jsx    # Single square component (memoized)
│   │   │   ├── BoardGrid.jsx      # 8×8 grid layout
│   │   │   ├── ChessBoard.jsx     # Main board with Canvas rendering
│   │   │   ├── MiniChessPreview.jsx # Thumbnail for history
│   │   │   └── index.js
│   │   │
│   │   ├── 📂 controls/           # Control Panel System
│   │   │   │
│   │   │   ├── 📂 atoms/          # Atomic components
│   │   │   │   ├── FENInputField.jsx
│   │   │   │   ├── FamousPositionButton.jsx
│   │   │   │   └── index.js
│   │   │   │
│   │   │   ├── 📂 modals/         # Modal dialogs
│   │   │   │   ├── AdvancedFENInputModal.jsx
│   │   │   │   ├── ExportSettingsModal.jsx
│   │   │   │   ├── FENHistoryModal.jsx
│   │   │   │   ├── ThemeModal.jsx
│   │   │   │   └── index.js
│   │   │   │
│   │   │   ├── ControlPanel.jsx   # Main control container
│   │   │   ├── BoardSizeControl.jsx
│   │   │   ├── DisplayOptions.jsx
│   │   │   ├── ExportSettings.jsx
│   │   │   ├── FENInput.jsx
│   │   │   ├── PieceSelector.jsx
│   │   │   ├── ThemeSelector.jsx
│   │   │   └── index.js
│   │   │
│   │   ├── 📂 ui/                 # Reusable UI Components
│   │   │   │
│   │   │   ├── 📂 base/           # Base components
│   │   │   │   ├── Badge.jsx
│   │   │   │   ├── Button.jsx
│   │   │   │   ├── Card.jsx
│   │   │   │   ├── Checkbox.jsx
│   │   │   │   ├── Input.jsx
│   │   │   │   ├── Modal.jsx
│   │   │   │   ├── Select.jsx
│   │   │   │   ├── SearchableSelect.jsx
│   │   │   │   ├── RangeSlider.jsx
│   │   │   │   └── index.js
│   │   │   │
│   │   │   ├── 📂 color-picker/   # Advanced color picker
│   │   │   │   │
│   │   │   │   ├── 📂 parts/      # Picker components
│   │   │   │   │   ├── ColorCanvas.jsx
│   │   │   │   │   ├── ColorInput.jsx
│   │   │   │   │   ├── ColorPalettes.jsx
│   │   │   │   │   ├── ColorSwatch.jsx
│   │   │   │   │   ├── HueSlider.jsx
│   │   │   │   │   ├── PrimaryActions.jsx
│   │   │   │   │   ├── SelectedPreview.jsx
│   │   │   │   │   ├── ThemePresetCard.jsx
│   │   │   │   │   └── index.js
│   │   │   │   │
│   │   │   │   ├── 📂 views/      # Picker views
│   │   │   │   │   ├── ThemeMainView.jsx
│   │   │   │   │   ├── ThemeAdvancedPickerView.jsx
│   │   │   │   │   ├── ThemeSettingsView.jsx
│   │   │   │   │   └── index.js
│   │   │   │   │
│   │   │   │   ├── ColorPicker.jsx
│   │   │   │   ├── PickerModal.jsx
│   │   │   │   └── index.js
│   │   │   │
│   │   │   ├── ActionButtons.jsx
│   │   │   ├── ExportProgress.jsx
│   │   │   ├── NotificationContainer.jsx
│   │   │   ├── UserGuide.jsx
│   │   │   └── index.js
│   │   │
│   │   └── 📂 layout/             # Layout components
│   │       ├── Navbar.jsx
│   │       ├── Footer.jsx
│   │       └── index.js
│   │
│   ├── 📂 pages/                  # Application pages
│   │   ├── HomePage.jsx
│   │   ├── AboutPage.jsx
│   │   ├── DownloadPage.jsx
│   │   ├── SupportPage.jsx
│   │   └── index.js
│   │
│   ├── 📂 hooks/                  # Custom React hooks
│   │   ├── useChessBoard.js       # FEN parsing & validation
│   │   ├── usePieceImages.js      # Image loading & caching
│   │   ├── useFENHistory.js       # History management
│   │   ├── useTheme.js            # Theme state
│   │   ├── useNotifications.js    # Toast system
│   │   ├── useLocalStorage.js     # Persistent storage
│   │   ├── useColorState.js       # Color picker state
│   │   ├── useColorConversion.js  # Color utilities
│   │   ├── useCanvasPicker.js     # Canvas interactions
│   │   ├── useOutsideClick.js     # Click outside detection
│   │   └── index.js
│   │
│   ├── 📂 utils/                  # Utility functions
│   │   ├── fenParser.js           # FEN validation & parsing
│   │   ├── colorUtils.js          # Color conversions
│   │   ├── coordinateCalculations.js # Board coordinates
│   │   ├── canvasExporter.js      # Export logic
│   │   ├── imageOptimizer.js      # Canvas optimization
│   │   └── index.js
│   │
│   ├── 📂 constants/              # Application constants
│   │   ├── chessConstants.js      # Piece sets, themes, positions
│   │   └── index.js
│   │
│   ├── 📂 routes/                 # Routing configuration
│   │   └── Router.jsx
│   │
│   ├── App.jsx                    # Root component
│   ├── index.js                   # Entry point
│   └── index.css                  # Global styles
│
├── 📄 .env                        # Environment variables
├── 📄 .gitignore
├── 📄 postcss.config.js
├── 📄 tailwind.config.js
├── 📄 package.json
├── 📄 package-lock.json
├── 📄 vercel.json                 # Vercel deployment config
├── 📄 README.md
├── 📄 CONTRIBUTING.md
├── 📄 ARCHITECTURE.md
├── 📄 SECURITY.md
├── 📄 CODE_OF_CONDUCT.md
├── 📄 FAQ.md
└── 📄 LICENSE

🛠️ Technology Stack

Core Technologies

React (18+ compatible, built with 19.x) UI Framework

JavaScript ES6+ Language

Tailwind CSS 3.3.5 Styling

HTML5 Canvas Rendering

Node.js 16+ Runtime

Performance Stack

• Rendering: HTML5 Canvas
• Optimization: React.memo, useCallback, useMemo
• Storage: localStorage (browser native)
• Deployment: Vercel (Edge + CDN)

---

🌐 Browser Support

Browser	Version	Status
Chrome	90+	✅ Tested
Firefox	88+	✅ Tested
Safari	14+	✅ Expected to work
Edge	90+	✅ Expected to work
Opera	76+	✅ Expected to work

Required Browser Features

• HTML5 Canvas API
• ES6+ JavaScript
• CSS Grid & Flexbox
• Clipboard API (optional)
• localStorage API

---

🔐 Security & Privacy

This project follows a privacy-first, zero-backend architecture.
All functionality runs entirely in the user's browser with no external data flow.

🔒 Security Highlights

• ✅ No server-side data storage
• ✅ Client-side processing only
• ✅ No cookies, trackers, or fingerprinting
• ✅ No third-party analytics or telemetry
• ✅ No user data is collected, stored, or transmitted

🧠 Threat Model

• No authentication or user accounts
• No sensitive or personal data processed
• No external APIs or background requests
• Attack surface limited to static client-side execution only

🛡️ Data Safety Guarantee

Chess Diagram Generator will never upload, sync, or share your data.
All positions, exports, favorites, and settings remain local to your device.

---

🤝 Contributing

We welcome contributions! Please see CONTRIBUTING.md for detailed guidelines.

Quick Contribution Guide

# 1. Fork the repository
# 2. Create your feature branch
git checkout -b feature/amazing-feature

# 3. Commit your changes
git commit -m 'Add amazing feature'

# 4. Push to the branch
git push origin feature/amazing-feature

# 5. Open a Pull Request

Contributors

---

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License

Copyright (c) 2026 Khatai Huseynzada

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

---

👨‍💻 Author

Khatai Huseynzada

Front-End Web Developer | Open Source Contributor

---

🙏 Acknowledgments

This project wouldn't be possible without these amazing resources:

Lichess Lichess piece SVGs

React Team Amazing framework

Tailwind Labs Beautiful utilities

Lucide Icons Icon library

Special Thanks

• Lichess.org - Inspiration and FEN notation standards
• Vercel - Hosting and deployment platform

---

📧 Support & Contact

Channel	Link
🐛 Bug Reports	GitHub Issues
💡 Feature Requests	GitHub Discussions
📧 Email	[email protected]

Responses on a best-effort basis

---

FAQ

How do I report a bug?

1. Check if the issue already exists in GitHub Issues
2. If not, create a new issue with:
   • Clear description of the problem
   • Steps to reproduce
   • Expected vs actual behavior
   • Screenshots (if applicable)
   • Browser and OS information

Can I use this commercially?

Yes! This project is MIT licensed, which means you can use it for commercial purposes.
Just include the license notice in your project.

How do I add a new piece set?

1. Add piece images to /public/pieces/[set-name]/
2. Update PIECE_SETS in src/constants/chessConstants.js
3. Submit a pull request with your changes

Can I export to SVG format?

Currently only PNG and JPEG are supported.
SVG export is planned for version 4.0.0.
You can track progress in Issue #1.

---

© 2026 Khatai Huseynzada. Licensed under MIT.