I originally tried to build a chess opening visualizer in Streamlit using a custom 8×8 board made from HTML and st.columns(), where I manually placed each square, piece, and highlight. However, the layout kept breaking in weird ways, such as only parts of the board showing, gaps appearing between columns, and sometimes only a single square showing. After a lot of debugging (Thanks ChatGPT!), I switched to using the python-chess library and its built-in SVG board renderer. This completely fixed the problem because the board is now generated as a real chess position using an actual chess engine instead of a manually built grid. Moves are applied using proper chess rules, and the visual output is a clean, perfectly aligned SVG board with no spacing issues or rendering bugs. Here is what it looks like –>