Minimal Chess Publishing Engine

Turn chess
games into
content in
seconds.

Transform raw notation into diagrams, puzzles, and interactive studies directly in the browser. Built for chess creators and educators.

Try the Sandbox View Reference

Static Diagrams

Generate high-quality diagrams from FEN strings. Perfect for blog posts and newsletters.

Interactive Puzzles

Create playable puzzles with move validation. Engage your audience with interactive challenges.

Annotated Games

Full PGN support with move lists and static board displays for game analysis.

Game Player

Interactive video-style player for PGN games with full navigation controls.

See ChessPublica in Action

Watch our promo video to discover how ChessPublica transforms chess notation into beautiful, interactive content — all directly in your browser.

Component Reference

A comprehensive guide to the core ChessPublica components.

1. Static Diagrams <fen>

The fen element renders a non-interactive board from a FEN string.

<fen>...</fen>
[FEN "7k/1p1b1Qp1/1r6/p1r2pq1/1b1Np2p/4P3/K1BNR1PP/3R4 b - - 3 35"] [Orientation "Black"] [Caption "**GM Praggnanandhaa R. - GM Sindarov, Javokhir**\nFIDE Candidates Tournament, 2026."] {[%cal Gd7e6] [%csl Ra2,Rf7]}

2. Interactive Puzzles <puzzle>

The puzzle element provides a self-contained interactive challenge.

<puzzle> [FEN "..."] 1. ... </puzzle>
[Event "Study by Richard Réti, Münchner Neueste Nachrichten, 1928"] [FEN "8/5K2/8/4pk2/4R3/8/8/8 w - - 0 1"] [Orientation "White"] [Caption "White to move and win."] 1. Re2! e4 ( 1. Re1? { 🚫 Wrong move
A seemingly sensible move, Re1? would be a sad mistake. Black maintains the opposition after } 1... e4 2. Ke7 Ke5 3. Kd7 Kd5 { and manages to draw. Try again. } ) 2. Re1! Ke5 { Losing a move with 1. Re2! and 2. Re1! is the key! } 3. Ke7 Kd4 {[%cal Ge7e6]} 4. Ke6 Kd3 {[%cal Ge6e5]} 5. Ke5 e3 {[%cal Ge5f4]} 6. Kf4 e2 {[%cal Gf4f3]} 7. Kf3 { Black will lose the pawn, and the game. }

3. Annotated Games <pgn>

The pgn element displays a full game with a move list.

<pgn> [Event "..."] [Site "..."] [Date "..."] [White "..."] [Black "..."] [Result "..."] 1. ... </pgn>
[Event "Excerpt from Nimzowitsch, A. (1994) My System. Original work published 1925-1927"] { If it were possible to develop the pieces without the aid of pawn moves, the pawnless advance would be the correct one. The pawnless advance, however, is in reality impossible of execution, since the enemy pawn center, thanks to its inherent aggressiveness, would drive back the pieces we had developed. For this reason we should, in order to safeguard the development of our pieces, **first build up a pawn center.** } { The wrecking of a pawnless advance is illustrated by the following: } 1. Nf3 Nc6 2.e3 { Since the pawn has not been moved to the center, we may still regard the advance as pawnless in our sense. } 2... e5 3. Nc3 Nf6 4. Bc4? d5 { Now the faultiness of White's development may be seen; the Black pawns have a demobilizing effect. } 5. Bb3 { Bad at the outset, a piece moved twice. } 5... d4 {[D]} { And White is uncomfortably placed, at any rate from the point of view of the player with little fighting experience. }

4. Game Player <pgn-player>

The pgn-player is a full-featured video-style player.

<pgn-player> [Event "..."] [Site "..."] [Date "..."] [White "..."] [Black "..."] [Result "..."] 1. ... </pgn-player>

Element Sandbox

Experiment with ChessPublica elements in real-time. Input your own data to see how it renders.

FEN Input

Configure a static board diagram.

Setup

Add ChessPublica to any page with two lines. No build step, no bundler, no framework.

1. Drop-in (CDN)

Paste the following into your page's <head> (or before the closing </body>). The all-in-one bundle includes jQuery, Chess.js, and Chessboard.js — no extra <script> tags needed. The URLs below are pinned to release v0.1.0 so the bytes you ship never change underneath you.

<script src="https://cdn.jsdelivr.net/gh/ChessPublica/ChessPublica.github.io@v0.1.0/dist/ChessPublica.all.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ChessPublica/ChessPublica.github.io@v0.1.0/dist/ChessPublica.all.min.css">

2. Write chess in your markdown or HTML

Use the custom elements anywhere in your page. Pass FEN or PGN inline, or point to a file with the src attribute. ChessPublica scans the DOM on load and renders every element automatically.

<fen>rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1</fen> <puzzle src="/puzzles/mate-in-one.pgn"></puzzle> <pgn-player src="https://lichess.org/api/study/97di6JjX/Jzyakrf4.pgn"></pgn-player>

3. Publish

Open the file in your browser — or host it anywhere static files work (GitHub Pages, Netlify, Cloudflare Pages, your own server). No backend required.

Recommended Method — GitHub Pages blog

The fastest way to start a chess blog: a free GitHub Pages site powered by Jekyll. You write in Markdown, commit to main, and your posts go live in seconds.

  1. Sign up and login on GitHub.
  2. Create the repository. On GitHub, create a new public repo named <your-username>.github.io. That exact name turns it into a personal Pages site at https://<your-username>.github.io.
  3. Enable Pages & Jekyll. Under Settings → Pages, set the source to Deploy from a branch and pick main / (root). GitHub builds your Markdown with Jekyll on every push.
  4. Add a minimal config. Create _config.yml in the repo root, e.g.:
    title: My Chess Blog url: "https://<your-username>.github.io"
  5. Wire in ChessPublica. Add the two drop-in lines from above to your layout (usually _includes/head.html or the <head> of your theme) so every post can use the elements.
  6. Write your first post. Create _posts/2026-04-17-first-game.md:
    --- layout: post title: My First Annotated Game --- Hello, world! Here's a mate-in-one from my last blitz game: <pgn> [White "Me"] [Black "Opponent"] [Result "1-0"] 1. e4 e5 2. Qh5 Nc6 3. Bc4 Nf6?? 4. Qxf7# { Scholar's Mate! } </pgn>
  7. Commit and push. GitHub Pages rebuilds automatically. Your post is live at https://<your-username>.github.io/2026/04/17/first-game.html — diagrams, puzzles, and interactive players included.

Tip: you can use the Sandbox above to compose an element, click Copy Code, and paste the snippet straight into your post.