DEV Community: Khatai Huseynzada

7 months building an open-source chess tool. Here's what actually happened.

Khatai Huseynzada — Sun, 28 Jun 2026 16:53:19 +0000

I started this project in December 2025. Not because anyone asked. Not because I saw a gap in the market. Because I compose chess problems as a hobby and every tool I tried to export a diagram with either watermarked the output, required an account, or exported at 72 DPI like it was still 2003.

So I built my own. Seven months later: 5 stars on GitHub, 6 forks, a handful of npm downloads, about $13 spent on hosting.

That's the whole story, numbers-wise.

Why I kept going

The tool actually works. That sounds like a low bar, but a lot of side projects don't clear it.

You paste in a FEN string, configure the board however you want — colors, piece set, whether to show coordinates — and export a PNG at up to 1200 DPI with real physical dimensions. You tell it "6cm board at 600 DPI" and it gives you a file you can drop straight into a print layout. No watermark. No account. No ads.

I added cloud sync, batch export (up to 10 positions as a ZIP), a FEN history, a position database search. Probably spent too long on some of that. But the core thing works exactly as I wanted it to.

The bugs that actually taught me something

Safari has a GPU memory limit on canvas elements that Chrome doesn't. If you don't reset canvas.width = 0; canvas.height = 0 after every blob export, iOS will crash — silently, with no useful error. I hit this, spent a while confused about why it only happened on iPhones, then traced it down and fixed it. Now it's a documented invariant in the codebase: you touch the canvas export path, you reset the dimensions after. No exceptions.

The FEN parser has co-located unit tests and a rule: every change requires a new test case. It sounds strict but it's saved me twice.

These are the parts I'm actually proud of.

What I got wrong

I thought if the tool was good, people would find it. That's not how it works.

GitHub has no discovery mechanism. npm sorts by download count — which means new packages are invisible by default. The people who need your tool don't know it exists and aren't searching for it by name.

I also built for a narrow audience without fully accepting what that meant. Chess composers are a small group. Most chess players don't need to export diagrams to print. I knew this going in, but I still somehow expected more traction.

The npm package

A month ago I extracted the rendering core into a separate package: @chessvision-org/chess-vision. Zero dependencies, works in Node.js, Deno, Bun, and the browser. Pure SVG output — no DOM, no canvas.

import { generateDiagram } from '@chessvision-org/chess-vision';

const svg = generateDiagram({
  fen: 'rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR b KQkq e3 0 1',
  size: 400,
  showCoords: true,
});

The idea was that even if the web app never takes off, the package might be useful to someone building a chess blog or generating diagrams server-side. It's only been on npm a week so I have no idea yet.

Where I'm at

The code is the best it's ever been. The tool does what I wanted it to do. I've learned more about Canvas, Safari memory behavior, Supabase RLS, and FEN parsing edge cases than I ever would have otherwise.

But I haven't figured out how to reach the people who would actually use it. That part is harder than the technical stuff. I'm more comfortable writing a parser than writing a cold message to a chess magazine editor.

I'm going to keep working on it. Just with less time on features and more time actually talking to people.

Repo: github.com/chessvision-org/chess-vision

Tool: chessvision.org

Package: @chessvision-org/chess-vision

If you've been through something similar — built something real, got nowhere with distribution — I'd like to hear what you did.

How to render chess diagrams in Node.js (no DOM, no canvas, no headless browser)

Khatai Huseynzada — Sun, 28 Jun 2026 16:05:02 +0000

If you've ever needed to generate a chess diagram programmatically — for a blog, a PDF report, or a static site — you've probably hit the same wall I did.

Most solutions require either a browser environment, a headless Chromium instance, or a canvas polyfill that pulls in half of npm. For something as simple as "turn a FEN string into an image," that's a lot of overhead.

So I extracted the rendering core from my chess editor into a standalone package: @chessvision-org/chess-vision. Zero dependencies. Works in Node.js, Deno, Bun, and the browser. No DOM, no canvas, no network calls.

The basics

npm install @chessvision-org/chess-vision

import { generateDiagram } from '@chessvision-org/chess-vision';

const svg = generateDiagram({
  fen: 'rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR b KQkq e3 0 1',
  size: 400,
  showCoords: true,
});

svg is a self-contained SVG string — inline it in HTML, write it to a file, embed it in a PDF. Pieces are inlined as SVG paths (CBurnett / Lichess style), so no external resources are needed.

generateDiagram throws if the FEN string is invalid. Validate first if you're working with untrusted input:

import { generateDiagram, validateFEN, getFENValidationError } from '@chessvision-org/chess-vision';

if (!validateFEN(fen)) {
  console.error(getFENValidationError(fen)); // e.g. 'Board must have 8 ranks'
} else {
  const svg = generateDiagram({ fen, size: 400 });
}

Real use cases

Static site or blog

If you write about chess and want diagrams in your posts, generate them at build time:

import { writeFileSync } from 'fs';
import { generateDiagram } from '@chessvision-org/chess-vision';

const positions = [
  {
    fen: 'r1bqkb1r/pppp1ppp/2n2n2/4p3/2B1P3/5N2/PPPP1PPP/RNBQK2R w KQkq - 4 4',
    file: 'italian.svg',
  },
  {
    fen: 'rnbqkb1r/pp3ppp/3ppn2/8/3NP3/2N5/PPP2PPP/R1BQKB1R w KQkq - 0 6',
    file: 'sicilian.svg',
  },
];

for (const { fen, file } of positions) {
  writeFileSync(`./diagrams/${file}`, generateDiagram({ fen, size: 480, showCoords: true }));
}

The output SVGs embed directly in Markdown, MDX, or HTML with no image hosting needed.

Server-side rendering

Generate diagrams on request without spinning up a browser:

import express from 'express';
import { generateDiagram, validateFEN } from '@chessvision-org/chess-vision';

const app = express();

app.get('/diagram', (req, res) => {
  const fen = String(req.query.fen ?? '');
  if (!validateFEN(fen)) return res.status(400).send('Invalid FEN');

  const svg = generateDiagram({ fen, size: 400, showCoords: true });
  res.setHeader('Content-Type', 'image/svg+xml');
  res.send(svg);
});

Astro / Next.js at build time

// In an Astro component or Next.js getStaticProps
import { generateDiagram } from '@chessvision-org/chess-vision';

const svg = generateDiagram({
  fen: 'r1bqkbnr/pppp1ppp/2n5/4p3/4P3/5N2/PPPP1PPP/RNBQKB1R w KQkq - 2 3',
  size: 360,
  showCoords: true,
  flipped: false,
});

// Render directly — no img tag, no src, no upload
// <Fragment set:html={svg} />   ← Astro
// <div dangerouslySetInnerHTML={{ __html: svg }} />  ← React (SVG is from your own code, not user input)

Themes and customization

The package ships 20 built-in board themes (classic, ocean, wood, forest, navy, marble, and more):

import { generateDiagram, getBoardTheme, listThemeIds, themeCoordinateColor } from '@chessvision-org/chess-vision';

listThemeIds();
// → ['classic', 'brown', 'wood', 'sand', 'slate', 'marble', 'blue', 'ocean',
//    'green', 'forest', 'mint', 'purple', 'lavender', 'red', 'coral',
//    'sunset', 'pink', 'burgundy', 'navy', 'ice']

const theme = getBoardTheme('ocean')!;
// → { name: 'Ocean', light: '#c9e4f5', dark: '#4a90a4' }

const svg = generateDiagram({
  fen: 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1',
  size: 400,
  lightSquare: theme.light,
  darkSquare: theme.dark,
  showCoords: true,
  coordColor: themeCoordinateColor(theme), // → 'white' or 'black', whichever is more legible
});

Or pass any hex colors directly:

const svg = generateDiagram({
  fen: 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1',
  size: 400,
  lightSquare: '#e8f4f8',
  darkSquare: '#7eb8da',
  flipped: true,       // Black's perspective
  showFrame: true,     // thin outer frame
  coordColor: 'white', // coordinate label color
  label: 'Starting position', // aria-label on the SVG
});

FEN utilities

The package also ships a full FEN parser if you need to work with positions directly:

import {
  parseFEN,
  boardToFEN,
  movePiece,
  getPieceAt,
  countPieces,
  materialBalance,
  findKing,
  STARTING_FEN,
} from '@chessvision-org/chess-vision';

// Parse to an 8×8 matrix (row 0 = rank 8, row 7 = rank 1)
const board = parseFEN(STARTING_FEN);
board[7][4]; // → 'K'  (white king on e1)

getPieceAt(board, 'e1'); // → 'K'
getPieceAt(board, 'd8'); // → 'q'

// Move a piece — pure, returns a new board, never mutates
const next = movePiece(board, 'e2', 'e4');
boardToFEN(next); // → updated piece placement string

countPieces(board);    // → { P: 8, N: 2, B: 2, R: 2, Q: 1, K: 1, p: 8, … }
materialBalance(board); // → 0  (equal material)
findKing(board, 'w');  // → 'e1'

Full FEN record

Parse and serialize all six FEN fields:

import { parseFENRecord, buildFENRecord, toggleActiveColor } from '@chessvision-org/chess-vision';

const record = parseFENRecord('rnbqkbnr/pp1ppppp/8/2p5/4P3/8/PPPP1PPP/RNBQKBNR b KQkq e3 5 12');
// → { board, activeColor: 'b', castling: 'KQkq', enPassant: 'e3', halfmove: 5, fullmove: 12 }

buildFENRecord(record);
// → 'rnbqkbnr/pp1ppppp/8/2p5/4P3/8/PPPP1PPP/RNBQKBNR b KQkq e3 5 12'

toggleActiveColor(record).activeColor; // → 'w'

Why SVG

Scales to any resolution without quality loss
Self-contained — 23 piece sets inlined as paths, no external resources
Embeds directly in HTML and most PDF libraries
Converts to raster easily with sharp if you need PNG

If you need high-res PNG for print, the web app (chessvision.org) handles that — up to 1200 DPI with accurate physical dimensions in centimeters.

I built an open-source chess diagram editor because every existing tool was either ugly or paywalled

Khatai Huseynzada — Tue, 23 Jun 2026 17:44:55 +0000

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 (pHYs chunk 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.

ChessVision – client-side chess diagram generator

Khatai Huseynzada — Tue, 26 May 2026 15:08:06 +0000

Show HN: ChessVision – client-side chess diagram generator with print-quality export

I built ChessVision, a browser-based tool that renders FEN positions to high-resolution raster and vector images. Everything runs client-side — no backend, no data leaves the device.

The main use case is chess players, coaches, and authors who need precise board diagrams for books, articles, or presentations without depending on a server.

A few things that might be interesting to HN:

PNG/JPEG export up to 30,208 × 30,208 px, processed entirely in the browser via Canvas API
SVG export and ZIP-bundled batch export across multiple positions and formats
23 piece sets, 20+ themes, full custom color picker (HSL/RGB/HEX)
FEN history with favorites, pinning, archive, and search
Safari canvas-disposal invariant enforced to prevent memory leaks on export

Stack: React 19, TypeScript 6, Vite 8, Tailwind CSS 4. Semantic versioning with automated releases via conventional commits.

Live demo: https://chess-vision-site.vercel.app
Source: https://github.com/BilgeGates/chess-vision

Happy to answer questions about the export pipeline or the client-side rendering approach.

Stop Using console.log(): 5 Hidden Chrome DevTools Superpowers 🚀

Khatai Huseynzada — Thu, 16 Apr 2026 19:25:27 +0000

Let's be honest: as web developers, whether we are working on the front-end or back-end, we spend half of our lives staring at the browser's Developer Tools. However, the vast majority of us only scratch the surface of what this massive Swiss Army knife can actually do.

If your primary debugging strategy is still littering your codebase with console.log("here 1") and console.log("data", data), you are losing valuable time.

Let's dive into 5 lesser-known Chrome DevTools features that will instantly speed up your workflow and make your debugging process a lot less painful.

1. Convert Network Requests to Code Instantly ("Copy as Fetch") 🌐

Imagine a complex API request is firing on your website, and you want to test that exact same request in your terminal, a Node.js script, or Postman. Manually typing out all the headers, authorization tokens, and stringified payloads is a nightmare.

The Hack:

Go to the Network tab in DevTools.
Right-click the request you want to duplicate.
Hover over Copy and select Copy as fetch (or Copy as cURL).

Boom! The browser instantly generates the exact code needed to replicate that request. You can paste it directly into your code editor or console and tweak it as needed.

2. Visualize Arrays and Objects with `console.table()` 📊

When fetching an array of objects from an API, a standard console.log() results in a deeply nested, messy output in the console that requires endless clicking to expand.

The Hack:
Swap out your console.log(data) for console.table(data).

The browser will automatically parse your array of objects and render it as a beautifully formatted, highly readable table. Even better? You can click the column headers in the console to sort the data!

3. Turn Your Browser into a Live Text Editor (`designMode`) ✍️

A designer or client asks you to "quickly tweak the wording" on a landing page to see how it looks. Switching back to your IDE, finding the exact text node, changing it, and waiting for the page to reload is incredibly tedious.

The Hack:
Open your Console and type this magic spell:

document.designMode = "on";

Hit Enter. Now, you can click on any text element on the webpage and edit it live, exactly like a Microsoft Word document. It’s an absolute lifesaver for rapid UI testing and typography adjustments.

4. Lightning-Fast DOM Access in the Console (`$0`) ⚡

You are inspecting an HTML element in the Elements tab and want to manipulate it using JavaScript in the console. Most developers waste time writing document.querySelector('.my-long-class-name') to grab it.

The Hack:

Simply click on any element in the Elements tab so it's highlighted.
Switch over to the Console tab.
Type $0 and hit Enter.

That's it! $0 is a magic variable that holds the reference to the most recently inspected element. You can immediately start calling methods on it, like $0.classList.add('hidden').

(Bonus: DevTools remembers your history! You can use $1, $2, etc., to reference previously inspected elements).

5. Debug Loops Painlessly with Conditional Breakpoints 🛑

You have a for loop that iterates 1,000 times, but a bug only occurs when i === 499. If you drop a standard breakpoint inside the loop, execution will pause on the very first iteration, and you'll have to click "Resume" 499 times. No thanks.

The Hack:

Go to the Sources tab.
Right-click on the line number where you want to pause.
Select Add conditional breakpoint...
Type your condition (e.g., i === 499 or user.role === 'admin').

Execution will completely ignore the breakpoint unless your exact condition evaluates to true. This reduces your bug-hunting time from hours to seconds.

Wrapping Up

Chrome DevTools is much more than just a place to read error messages. By incorporating these small hacks into your daily routine, you'll drastically reduce friction in your development process.

Which DevTools feature can you not live without? Did I miss your favorite? Let me know in the comments below! 👇

DEV Community: Khatai Huseynzada

7 months building an open-source chess tool. Here's what actually happened.

Why I kept going

The bugs that actually taught me something

What I got wrong

The npm package

Where I'm at

How to render chess diagrams in Node.js (no DOM, no canvas, no headless browser)

The basics

Real use cases

Static site or blog

Server-side rendering

Astro / Next.js at build time

Themes and customization

FEN utilities

Full FEN record

Why SVG

Links

I built an open-source chess diagram editor because every existing tool was either ugly or paywalled

What it does

The stack

What was actually hard

It's fully open source

ChessVision – client-side chess diagram generator

Stop Using console.log(): 5 Hidden Chrome DevTools Superpowers 🚀

1. Convert Network Requests to Code Instantly ("Copy as Fetch") 🌐

2. Visualize Arrays and Objects with console.table() 📊

3. Turn Your Browser into a Live Text Editor (designMode) ✍️

4. Lightning-Fast DOM Access in the Console ($0) ⚡

5. Debug Loops Painlessly with Conditional Breakpoints 🛑

Wrapping Up

2. Visualize Arrays and Objects with `console.table()` 📊

3. Turn Your Browser into a Live Text Editor (`designMode`) ✍️

4. Lightning-Fast DOM Access in the Console (`$0`) ⚡