If you've ever tried to include a chess diagram in a blog post, a study document, or a video thumbnail, you know the pain. Most tools are either:
- A screenshot from a UI that wasn't designed for clean export
- Decent but behind a paywall or watermark
- Good but abandoned, last updated in 2015
I got tired of it and built ChessVision — a completely free, open-source chess diagram editor that runs entirely in the browser.
What it does
The core loop is simple: paste a FEN, set up the position you want, export the image. That's it.
But the details matter:
Export quality that actually holds up for print
You can export at 1×, 2×, 3×, or 4× resolution — the top setting gives you 1200 DPI. Board size is set in centimetres, so when you say "8cm board," it prints at 8cm. DPI metadata is embedded in the PNG/JPEG so the file knows its own physical size.
Batch export
Up to 10 positions simultaneously, downloaded as a ZIP. Useful for problem sets, opening repertoire PDFs, anything where you need a series of diagrams.
Customization that isn't an afterthought
23 piece sets sourced from the Lichess CDN, 20 preset board themes, a full HSV/RGB/HEX color picker for custom colors, and the ability to save up to 48 theme presets. The thin board frame, coordinate labels, and flip orientation are all toggleable.
Position database search
From inside the editor, you can search Lichess, PDB (the endgame problem database), and YACPDB for the current position. It shows up directly in the sidebar.
Optional cloud sync
There's an account system (email + password + optional TOTP 2FA) backed by Supabase. Your FEN history, themes, and settings sync across devices. But you don't need an account for anything — all core features work locally, no sign-in required.
The stack
- React 19 with TypeScript strict mode throughout
- Vite 8 for bundling
- @dnd-kit for the drag-and-drop board editor
- Tailwind CSS with CSS custom properties for theming
- Canvas API for rendering — no third-party chart or image library
- Supabase for auth and cloud sync (row-level security, TOTP MFA)
- Web Workers for heavy raster export so the UI stays responsive during batch jobs
What was actually hard
The canvas rendering pipeline took the most iteration. The challenge isn't drawing squares and pieces — that's straightforward. It's making the output physically accurate:
- PNG and JPEG have DPI metadata fields (
pHYschunk for PNG, EXIF for JPEG). Browsers don't write these automatically. I had to implement the chunk insertion manually to make "export at 8cm, 600 DPI" actually mean something when you open the file in Illustrator or send it to a printer. - SVG export required inlining the piece images as base64 so the file is self-contained. Hotlinking a CDN from an SVG that might be opened offline or embedded in a PDF doesn't work.
- The batch exporter runs in a Web Worker with a pause/resume/cancel interface, because blocking the main thread for 10 × 1200 DPI canvas renders is obviously not acceptable.
It's fully open source
MIT would've been my preference but the piece sets come from Lichess which is AGPL, so the project is AGPL-3.0.
→ GitHub: https://github.com/chessvision-org/chess-vision
→ Live: https://chessvision.org
PRs welcome. The contributing guide is intentionally short — pnpm validate passing is the main gate.
Built by Khatai Huseynzada. If you use it for something, I'd love to hear about it.
