The components.html on chessboardjs

Using Streamlit
1

Summary

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

Steps to reproduce

Code snippet:

app.py

import streamlit.components.v1 as components

components.html(
"""
<link rel="stylesheet" href="css/chessboard-1.0.0.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/chessboard-1.0.0.min.js"></script>

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

<script>
    var board = ChessBoard('board', 'start');
</script>
""", height=300)

streamlit run app.py

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

streamlit>=1.16.0

Links

Other reference

https://chessboardjs.com/

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.

2

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!
Fanilo

3

Thanks a lot, I will try it.

It worked.

4

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