pgn4web board generator

enter your PGN text in the green textbox below
- keep PGN data short: due to a limitation of web browsers and web servers with the URL length, only short PGN texts are allowed, usually up to four games without comments; a warning is issued if the max URL length is exceeded, in case try removing unnecessary header tags and comments/variations or try reducing the number of games per chessboard
- beware of "[" and "]" characters in the game text/comments: if square brackets are present in the comments (or the game text) in a pattern similar to the PGN header pattern [tag "value"] then the game parsing might break; if your PGN file is not displayed properly, please check for characters "[" and "]" in the comments and try removing them

select a predefined settings template and/or modify any of the configuration options, layout, colors and fonts

fine tune configuration options to your liking
- check carefully the frame height/width values: different browsers might render some items slightly bigger or smaller, so leave some empty space at the bottom of the frame by increasing the height

once happy with the preview chessboard, just cut and paste the HTML code from the yellow box into your web page or your blog; when entering the code in your website or blog, please make sure you are using the HTML editing option, otherwise an enhanced editor might alter the code you enter; you can also generate a short url for sharing the board via email or instant messaging

if you plan to reuse similar settings for other chessboards, you can bookmark a custom template into your web browser bookmarks

service note: the pgn4web board generator on this site is intended for chess enthusiasts to easily add chess games with a dynamic chessboard to their personal blogs and websites; if you publish chess games as part of a professional site and need full server availability and high network performance, you are strongly recommended to evaluate the code from and install the tool on your own servers

automatically generated HTML code for your web page or blog

configuration options

enter PGN data

select from preset board generator settings templates

pgn4web board generator custom template link add link into the browser bookmarks, saving current board settings

autoplay games game autoplays the first game once, loop loops through games continiously

autoplay delay

initial game

initial halfmove always settings apply at every game load, once settings only at the first load

initial halfmove number actual halfmove number applied when the setting above is custom number

square size a number; must be larger than the piece size plus the highlight border if any

piece size default selects piece size based on square size

piece font default selects piece font based on piece size

light squares color

dark squares color

board border color

square highlight mode when set to border a larger square size might be required

highlight squares color

how to show control buttons standard uses browser's buttons, custom uses colors below

custom control buttons background color

custom control buttons text color

text margin a number; header/moves margin, nice to have when text overflows with scrollbars

how to show game header

header font size a number or a percentage

header font color

how to show game moves

moves font size a number or a percentage

moves font color

highlight move color when set to background the background color is copied

how to show move comments inline: on same line as moves, newline: on separate lines

comments font size a number or a percentage; when set to moves the moves font size is copied

comments font color

chessboard and header/moves layout

iFrame height

iFrame width

iFrame padding a number; border padding around the iframe, included within the iFrame width value

background color when set to transparent the parent's background color is used