The components.html on chessboardjs


components.html() does not work when using chessboardjs.

Steps to reproduce

Code snippet:

import streamlit.components.v1 as components

<link rel="stylesheet" href="css/chessboard-1.0.0.min.css">
<script src=""></script>
<script src="js/chessboard-1.0.0.min.js"></script>

<div id="board" style="width: 300px"></div>

    var board = ChessBoard('board', 'start');
""", height=300)

streamlit run

Expected behavior:

Should render the board.

Actual behavior:

No board is shown.

Debug info

  • Streamlit version: 1.16.0
  • Python version: 3.10
  • Using venv from python -m venv venv
  • OS version: windows 10
  • Browser version: Google Chrome Version 108.0.5359.125 (Official Build) (64-bit)

Requirements file



Other reference

Additional information

It did not work locally and cloud.

An example board.html works. This file is in the repository

There are also css, js and img folders in the repository.

Hey @ferdy,

You can refer to Restrict Download of Images & Videos on Streamlit App - #2 by andfanilo

Unfortunately, until Streamlit designs a new way to load static assets, Streamlit doesnโ€™t actually load your js/chessboard-1.0.0.min.js from the root of your project, it loads them from its own installation folder so this is where youโ€™ll need to copy your html/css/js assets.

Have a nice day!

Thanks a lot, I will try it.

It worked.

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.