Calling JavaScript from Streamlit/Python

Streamlit is Python framework, it helps to build UI with low code approach. Code runs on server and there is no functionality, which would allow to inject client side events with JavaScript. Luckily there is a 3rd-party Streamlit component, it allows to make JavaScript calls from server side Python code. Response from such JavaScript call is received within the same Streamlit execution, this makes it possible to use values returned from JavaScript in Python logic. In this example, I show one liner JavaScript call to get UI screen width, to be able to calculate layout structure adjustments in Python, based on the screen size.

Streamlit JavaScript component GitHub:

0:00 Introduction
1:02 Streamlit JavaScript Component
1:36 Example
3:30 Code
5:47 Summary

CONNECT:
- Subscribe to this YouTube channel

#javascript #webdevelopment #python

[NoDebut]

Hi! Thank you for putting this video out there, it helped me debug an issue I've encountered with JS and streamlit. However, what I found was that the method you're using here will no longer work as of 2024 (as far as I'm guessing!). Now the streamlit / Javascript module you are using instead inserts itself as an iframe into the page with 704px width and 0px height. It also has very little access to any other useful window variables. I guess it can still run fetch scripts tho, I'm just testing some stuff out. Anyways, thanks and peace!

[kisho]

Interesting, thank you. Using same method, how could MathJax be integrated into Python by using streamlit to display LaTex as mathematical expressions in a web application?

[abelembaye]

Andrej, Thank you for sharing this. is it possible to change value of a variable in my typescript from my streamlit python backend code? I was able to create a tool in sreamlit-drawable canvas that depicts the coordinates of the canvas on mouse click. However, I want the coordinates to be scaled up or down based on the coordinates of uploaded background image. When I manually define the scale factors into the typescript file in development, it works; but I want to enter this dynamically from my python code since I won't have a direct access to my typescript file when I package the component. Please help when you get time.

[baba]

thanks for the video. great library. can i also do sth like
cannot make it work