# \#javascript

**URL:** https://discuss.streamlit.io/tag/javascript/262.md

[Latest](https://discuss.streamlit.io/latest.md) · [Categories](https://discuss.streamlit.io/categories.md) · [Tags](https://discuss.streamlit.io/tags.md)

---

## [Table of contents generator](https://discuss.streamlit.io/t/table-of-contents-generator/120992)

<div class="topic-metadata">

**Author:** [@zakaria3](https://discuss.streamlit.io/u/zakaria3)\
**Replies:** 0\
**Last updated:** [March 9, 2026, 7:34pm UTC](https://discuss.streamlit.io/t/table-of-contents-generator/120992 "2026-03-09T19:34:03Z")

</div>

Zikojs based Interactive Table of Contents component for Streamlit. Showcase Visit : https://ziko-st-toc-demo.streamlit.app/ Installation instructions pip install ziko-st-toc Usage instructions import streamlit a…

---

## [Streamlit app for weather data analysis](https://discuss.streamlit.io/t/streamlit-app-for-weather-data-analysis/120814)

<div class="topic-metadata">

**Author:** [@andrea.botti](https://discuss.streamlit.io/u/andrea.botti)\
**Replies:** 1\
**Last updated:** [February 16, 2026, 4:03pm UTC](https://discuss.streamlit.io/t/streamlit-app-for-weather-data-analysis/120814 "2026-02-16T16:03:32Z")

</div>

Hi all, I’m working on a Streamlit app that compares baseline weather files (TMYx) with future morphed climate scenarios (RCP 2050 / 2080) for building performance analysis. https://eetra-future-weather-app.streamlit.a…

---

## [A Streamlit app to run Python scripts, Streamlit apps, HTML/CSS/Javascript and even React!](https://discuss.streamlit.io/t/a-streamlit-app-to-run-python-scripts-streamlit-apps-html-css-javascript-and-even-react/120099)

<div class="topic-metadata">

**Author:** [@szelee](https://discuss.streamlit.io/u/szelee)\
**Replies:** 0\
**Last updated:** [November 16, 2025, 8:44pm UTC](https://discuss.streamlit.io/t/a-streamlit-app-to-run-python-scripts-streamlit-apps-html-css-javascript-and-even-react/120099 "2025-11-16T20:44:13Z")

</div>

---

## [Javascript return value in streamlit component](https://discuss.streamlit.io/t/javascript-return-value-in-streamlit-component/119834)

<div class="topic-metadata">

**Author:** [@Valentina3](https://discuss.streamlit.io/u/Valentina3)\
**Replies:** 0\
**Last updated:** [October 21, 2025, 4:42am UTC](https://discuss.streamlit.io/t/javascript-return-value-in-streamlit-component/119834 "2025-10-21T04:42:26Z")

</div>

Got it! You want to create a well-structured discussion post for a forum (like the Streamlit Community forum or Stack Overflow) to get help with your PyVis + Streamlit integration. Here’s a template you can use. I’ve tai…

---

## [streamlit.components.v1 is not working docker](https://discuss.streamlit.io/t/streamlit-components-v1-is-not-working-docker/118050)

<div class="topic-metadata">

**Author:** [@Mounica](https://discuss.streamlit.io/u/Mounica)\
**Replies:** 0\
**Last updated:** [July 30, 2025, 3:33pm UTC](https://discuss.streamlit.io/t/streamlit-components-v1-is-not-working-docker/118050 "2025-07-30T15:33:00Z")

</div>

streamlit.components.v1 is working local but streamlit.components.v1 is not working docker

---

## [Versatility using st.tabs](https://discuss.streamlit.io/t/versatility-using-st-tabs/116567)

<div class="topic-metadata">

**Author:** [@Anonymous\_Kangaroo](https://discuss.streamlit.io/u/Anonymous_Kangaroo)\
**Replies:** 0\
**Last updated:** [July 2, 2025, 4:57am UTC](https://discuss.streamlit.io/t/versatility-using-st-tabs/116567 "2025-07-02T04:57:10Z")

</div>

I want to be able to dynamically change the tab order on my page. I made two buttons to move tab left and right respectively. i implemented this by swapping a copy of the data of the tab on the left with the tab on the …

---

## [Streamlit input box value update from js but when i click submit at that time it is not display the value](https://discuss.streamlit.io/t/streamlit-input-box-value-update-from-js-but-when-i-click-submit-at-that-time-it-is-not-display-the-value/116445)

<div class="topic-metadata">

**Author:** [@parth.bhadiyadra](https://discuss.streamlit.io/u/parth.bhadiyadra)\
**Replies:** 0\
**Last updated:** [June 30, 2025, 10:54am UTC](https://discuss.streamlit.io/t/streamlit-input-box-value-update-from-js-but-when-i-click-submit-at-that-time-it-is-not-display-the-value/116445 "2025-06-30T10:54:46Z")

</div>

Please take a moment to search the forum and documentation before posting a new topic. If you’re creating a debugging post, please include the following info: Are you running your app locally or is it deployed? local…

---

## [Cannot access javascript variables, even using streamlit\_javascript](https://discuss.streamlit.io/t/cannot-access-javascript-variables-even-using-streamlit-javascript/116401)

<div class="topic-metadata">

**Author:** [@b112](https://discuss.streamlit.io/u/b112)\
**Replies:** 0\
**Last updated:** [June 29, 2025, 4:26pm UTC](https://discuss.streamlit.io/t/cannot-access-javascript-variables-even-using-streamlit-javascript/116401 "2025-06-29T16:26:45Z")

</div>

I am trying to access a global javascript variable. But nothing seems to allow me to get access, even using ‘streamlit\_javascript’. See a simple example below: mport streamlit as st from streamlit\_javascript import st…

---

## [Why this java script failing to rerun the script  ?](https://discuss.streamlit.io/t/why-this-java-script-failing-to-rerun-the-script/115989)

<div class="topic-metadata">

**Author:** [@ashish.pal](https://discuss.streamlit.io/u/ashish.pal)\
**Replies:** 0\
**Last updated:** [June 23, 2025, 3:37pm UTC](https://discuss.streamlit.io/t/why-this-java-script-failing-to-rerun-the-script/115989 "2025-06-23T15:37:56Z")

</div>

I am rendering three buttons, when user clicking any of the buttons, It will send that buttons text to URL, where I am reading it using st.qeury\_param, but it not working as I script has to rerun once java send the butto…

---

## [How to inject Javascript into a streamlit dashboard element? Having difficulties](https://discuss.streamlit.io/t/how-to-inject-javascript-into-a-streamlit-dashboard-element-having-difficulties/112290)

<div class="topic-metadata">

**Author:** [@ausar850](https://discuss.streamlit.io/u/ausar850)\
**Replies:** 2\
**Last updated:** [May 22, 2025, 10:00pm UTC](https://discuss.streamlit.io/t/how-to-inject-javascript-into-a-streamlit-dashboard-element-having-difficulties/112290 "2025-05-22T22:00:46Z")

</div>

Hi! My Streamlit app generates a nice, interactive stock chart. The only issue is that the time axis gets slightly cut off at the bottom (see attached images). However, when I enter the following in the Chrome DevTools c…

---

## [Unable to inject simple Javascript into a chart element with st.markdown or st.components](https://discuss.streamlit.io/t/unable-to-inject-simple-javascript-into-a-chart-element-with-st-markdown-or-st-components/111724)

<div class="topic-metadata">

**Author:** [@ausar850](https://discuss.streamlit.io/u/ausar850)\
**Replies:** 0\
**Last updated:** [May 6, 2025, 3:20am UTC](https://discuss.streamlit.io/t/unable-to-inject-simple-javascript-into-a-chart-element-with-st-markdown-or-st-components/111724 "2025-05-06T03:20:31Z")

</div>

Hi! My streamlit app generates this nice, interactive stock chart. The only problem is that the time axis is cut off a little in the bottom (see attached images). However, if I type in document.querySelector('iframe').c…

---

## [DOM manipulation using js script in streamlit does not works](https://discuss.streamlit.io/t/dom-manipulation-using-js-script-in-streamlit-does-not-works/94632)

<div class="topic-metadata">

**Author:** [@ishaq](https://discuss.streamlit.io/u/ishaq)\
**Replies:** 1\
**Last updated:** [April 8, 2025, 5:02am UTC](https://discuss.streamlit.io/t/dom-manipulation-using-js-script-in-streamlit-does-not-works/94632 "2025-04-08T05:02:45Z")

</div>

Task: changing image icon on assistant bubble chat. I am using st.chat\_message → for chat conversation. In this function we can change the icon with emoji, but I can not to change the icon with my own custom image. Wh…

---

## [Real-Time Speech-to-Text Using Browser Microphone and Azure Web App in Streamlit](https://discuss.streamlit.io/t/real-time-speech-to-text-using-browser-microphone-and-azure-web-app-in-streamlit/84397)

<div class="topic-metadata">

**Author:** [@fschopper](https://discuss.streamlit.io/u/fschopper)\
**Replies:** 1\
**Last updated:** [March 26, 2025, 12:03pm UTC](https://discuss.streamlit.io/t/real-time-speech-to-text-using-browser-microphone-and-azure-web-app-in-streamlit/84397 "2025-03-26T12:03:23Z")

</div>

Hi everyone, I’m working on a project to implement real-time speech transcription in Streamlit, hosted on an Azure Web App (Linux). While everything works smoothly on my local machine—where Python can access the system …

---

## [Scroll browser to your code snippet](https://discuss.streamlit.io/t/scroll-browser-to-your-code-snippet/93483)

<div class="topic-metadata">

**Author:** [@Sarnath\_K](https://discuss.streamlit.io/u/Sarnath_K)\
**Replies:** 0\
**Last updated:** [February 23, 2025, 3:31pm UTC](https://discuss.streamlit.io/t/scroll-browser-to-your-code-snippet/93483 "2025-02-23T15:31:31Z")

</div>

Folks, Do you have a scenario where a user clicks a button but the response comes down the screen and is not visible unless the user scrolls manually? Then, you can use this very simple snippet to auto-scroll the brows…

---

## [Issue with postMessage: JavaScript event is not receiving in Python Streamlit Application](https://discuss.streamlit.io/t/issue-with-postmessage-javascript-event-is-not-receiving-in-python-streamlit-application/82588)

<div class="topic-metadata">

**Author:** [@Ajay1](https://discuss.streamlit.io/u/Ajay1)\
**Replies:** 3\
**Last updated:** [February 3, 2025, 5:18am UTC](https://discuss.streamlit.io/t/issue-with-postmessage-javascript-event-is-not-receiving-in-python-streamlit-application/82588 "2025-02-03T05:18:30Z")

</div>

I’m trying to set up a communication between JavaScript and Python in my Streamlit application to handle an acknowledgment when a button is clicked in the alert. While the JavaScript function executes correctly, the ackn…

---

## [Detecting Event when User Refreshes the Websie / Closes Browser Tab](https://discuss.streamlit.io/t/detecting-event-when-user-refreshes-the-websie-closes-browser-tab/76775)

<div class="topic-metadata">

**Author:** [@mayar.alzerki](https://discuss.streamlit.io/u/mayar.alzerki)\
**Replies:** 0\
**Last updated:** [August 5, 2024, 1:35pm UTC](https://discuss.streamlit.io/t/detecting-event-when-user-refreshes-the-websie-closes-browser-tab/76775 "2024-08-05T13:35:11Z")

</div>

Hello Everyone, I’m using Streamlit and trying to catch the event when the user refreshes the tab or close it in order to delete some files created. I checked the JavaScript injection into Streamlit, but apparently it …

---

## [Getting the screen dimensions and changing the layout depending on the orientation](https://discuss.streamlit.io/t/getting-the-screen-dimensions-and-changing-the-layout-depending-on-the-orientation/75154)

<div class="topic-metadata">

**Author:** [@mGolos](https://discuss.streamlit.io/u/mGolos)\
**Replies:** 0\
**Last updated:** [July 18, 2024, 6:03am UTC](https://discuss.streamlit.io/t/getting-the-screen-dimensions-and-changing-the-layout-depending-on-the-orientation/75154 "2024-07-18T06:03:38Z")

</div>

I wanted to set a wide layout for portrait and centered layout for landscape using Streamlit-JS-Eval. I post below my solution with a little spinner, sleep and toast. Implemented for my profile page. from streamlit\_js…

---

## [Javascript-Python communication with hls.js via streamlit\_javascript](https://discuss.streamlit.io/t/javascript-python-communication-with-hls-js-via-streamlit-javascript/74262)

<div class="topic-metadata">

**Author:** [@KCpremo](https://discuss.streamlit.io/u/KCpremo)\
**Replies:** 3\
**Last updated:** [July 16, 2024, 5:11pm UTC](https://discuss.streamlit.io/t/javascript-python-communication-with-hls-js-via-streamlit-javascript/74262 "2024-07-16T17:11:42Z")

</div>

Hello, I am trying to follow in the steps of some others who have managed to achieve Javascript-Python communication, but I am getting stuck. https://github.com/cpremoshis/livestream-dvr/tree/main My goal is to get hl…

---

## [Scrolling via Javascript not possible](https://discuss.streamlit.io/t/scrolling-via-javascript-not-possible/73819)

<div class="topic-metadata">

**Author:** [@Paul](https://discuss.streamlit.io/u/Paul)\
**Replies:** 2\
**Last updated:** [July 1, 2024, 1:17pm UTC](https://discuss.streamlit.io/t/scrolling-via-javascript-not-possible/73819 "2024-07-01T13:17:07Z")

</div>

Hi everyone, i am looking for a way to scroll through my application. From my understanding you need to use markdown with javascript. I have this function that I thought would do the job def auto\_scroll\_down(amount\_px:…

---

## [How to make a pop-up window display image through Javascript](https://discuss.streamlit.io/t/how-to-make-a-pop-up-window-display-image-through-javascript/73780)

<div class="topic-metadata">

**Author:** [@phes11434](https://discuss.streamlit.io/u/phes11434)\
**Replies:** 0\
**Last updated:** [July 1, 2024, 3:27am UTC](https://discuss.streamlit.io/t/how-to-make-a-pop-up-window-display-image-through-javascript/73780 "2024-07-01T03:27:43Z")

</div>

I made a chatbot through streamlit. I use HTML scrollview to display my pictures and using JavaScript tobe able to display a large picture by clicking on the picture to pop up a window.This is my code: def get\_image\_ta…

---

## [How to make sure that js and html button call js runing in streamlit](https://discuss.streamlit.io/t/how-to-make-sure-that-js-and-html-button-call-js-runing-in-streamlit/73052)

<div class="topic-metadata">

**Author:** [@Gabriel2](https://discuss.streamlit.io/u/Gabriel2)\
**Replies:** 0\
**Last updated:** [June 21, 2024, 7:59am UTC](https://discuss.streamlit.io/t/how-to-make-sure-that-js-and-html-button-call-js-runing-in-streamlit/73052 "2024-06-21T07:59:08Z")

</div>

I waana run the js under code in stramlit, but the button and modal is not valid I using st.write(''' \<style\> body {font-family: Arial, Helvetica, sans-serif;} /\* The Modal (background) \*/ .modal { display: none; /\*…

---

## [How to pass streamlit variable to javascript](https://discuss.streamlit.io/t/how-to-pass-streamlit-variable-to-javascript/70082)

<div class="topic-metadata">

**Author:** [@freeboy](https://discuss.streamlit.io/u/freeboy)\
**Replies:** 2\
**Last updated:** [May 19, 2024, 10:28am UTC](https://discuss.streamlit.io/t/how-to-pass-streamlit-variable-to-javascript/70082 "2024-05-19T10:28:48Z")

</div>

How can I pass Streamlit variable saco to javascript saco ="test" html\_string = ''' \<div id="res" \>\</div\> \<script language="javascript"\> let str = = '{{saco}}'; document.querySele…

---

## [Integrating Paddle with Streamlit](https://discuss.streamlit.io/t/integrating-paddle-with-streamlit/69091)

<div class="topic-metadata">

**Author:** [@ManishAradwad](https://discuss.streamlit.io/u/ManishAradwad)\
**Replies:** 3\
**Last updated:** [May 12, 2024, 1:03pm UTC](https://discuss.streamlit.io/t/integrating-paddle-with-streamlit/69091 "2024-05-12T13:03:51Z")

</div>

I’m trying to integrate paddle(https://www.paddle.com/) with streamlit for my app for adding payment functionality. Paddle uses paddle.js(Build an overlay checkout - Paddle Developer) for communication between the app an…

---

## [St.markdown() doesn't work for html table expand/collapse rows](https://discuss.streamlit.io/t/st-markdown-doesnt-work-for-html-table-expand-collapse-rows/67914)

<div class="topic-metadata">

**Author:** [@thomvatho](https://discuss.streamlit.io/u/thomvatho)\
**Replies:** 4\
**Last updated:** [April 26, 2024, 3:55am UTC](https://discuss.streamlit.io/t/st-markdown-doesnt-work-for-html-table-expand-collapse-rows/67914 "2024-04-26T03:55:19Z")

</div>

I have an HTML table that can expand/collapse rows, but it doesn’t work when I import to st.markdown() component. Can you help me to fix this? \<!DOCTYPE html\> \<html lang="en"\> \<head\> \<meta charset="UTF-8" /\> \<…

---

## [Streamlit cloud can't read integer variable](https://discuss.streamlit.io/t/streamlit-cloud-cant-read-integer-variable/67533)

<div class="topic-metadata">

**Author:** [@hyun\_kyu\_Cho](https://discuss.streamlit.io/u/hyun_kyu_Cho)\
**Replies:** 7\
**Last updated:** [April 24, 2024, 7:09am UTC](https://discuss.streamlit.io/t/streamlit-cloud-cant-read-integer-variable/67533 "2024-04-24T07:09:51Z")

</div>

Okay this is my code. from streamlit\_js\_eval import streamlit\_js\_eval if 'screen\_setting' not in st.session\_state: x = streamlit\_js\_eval(js\_expressions='window.innerWidth', key='WIDTH', want\_output = True) …

---

## [Ipysigma graph not loading](https://discuss.streamlit.io/t/ipysigma-graph-not-loading/67409)

<div class="topic-metadata">

**Author:** [@jynsf](https://discuss.streamlit.io/u/jynsf)\
**Replies:** 3\
**Last updated:** [April 22, 2024, 7:40pm UTC](https://discuss.streamlit.io/t/ipysigma-graph-not-loading/67409 "2024-04-22T19:40:11Z")

</div>

I want to visualize a graph with ipysigma. It seems the best way to do this is to write it to an html javascript. The resulting html displays properly in the browser but not in streamlit. There are no errors either. …

---

## [St.Input\_text values entered and submitted using javascript](https://discuss.streamlit.io/t/st-input-text-values-entered-and-submitted-using-javascript/66823)

<div class="topic-metadata">

**Author:** [@Tharshan\_Bala](https://discuss.streamlit.io/u/Tharshan_Bala)\
**Replies:** 1\
**Last updated:** [April 12, 2024, 5:36pm UTC](https://discuss.streamlit.io/t/st-input-text-values-entered-and-submitted-using-javascript/66823 "2024-04-12T17:36:05Z")

</div>

Is possible to enter and submit a value to st.input\_text using Javascript? Ideally, the input\_text box will be created in Streamlit and hidden somewhere in the the page, but the javascript will enter a value and click t…

---

## [Looking for code to focus on text area and restart app](https://discuss.streamlit.io/t/looking-for-code-to-focus-on-text-area-and-restart-app/66433)

<div class="topic-metadata">

**Author:** [@shawngiese](https://discuss.streamlit.io/u/shawngiese)\
**Replies:** 0\
**Last updated:** [April 7, 2024, 7:52am UTC](https://discuss.streamlit.io/t/looking-for-code-to-focus-on-text-area-and-restart-app/66433 "2024-04-07T07:52:58Z")

</div>

Hi, I am currently using the streamlit\_js\_eval component to run a couple JavaScript tasks: Move web focus to the text area (chat app) Clean restart of the application (reload the web page) Anyone have a non-component …