{"id":15063769,"url":"https://github.com/thunderbug1/streamlit-javascript","last_synced_at":"2025-04-09T21:19:10.152Z","repository":{"id":45707870,"uuid":"459076675","full_name":"thunderbug1/streamlit-javascript","owner":"thunderbug1","description":"Streamlit component to execute javascript code on the client side and get back the result","archived":false,"fork":false,"pushed_at":"2025-04-05T10:43:28.000Z","size":105,"stargazers_count":121,"open_issues_count":13,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-09T21:19:03.827Z","etag":null,"topics":["javascript","python","streamlit","streamlit-component"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thunderbug1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-14T08:31:22.000Z","updated_at":"2025-04-07T19:12:35.000Z","dependencies_parsed_at":"2024-06-19T01:35:20.754Z","dependency_job_id":"66b46814-b25b-4ada-919c-a12e2c44cfc7","html_url":"https://github.com/thunderbug1/streamlit-javascript","commit_stats":{"total_commits":6,"total_committers":2,"mean_commits":3.0,"dds":"0.33333333333333337","last_synced_commit":"c0dfc7d98c415fc5ebcd88d13eca7f032e92be8b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thunderbug1%2Fstreamlit-javascript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thunderbug1%2Fstreamlit-javascript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thunderbug1%2Fstreamlit-javascript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thunderbug1%2Fstreamlit-javascript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thunderbug1","download_url":"https://codeload.github.com/thunderbug1/streamlit-javascript/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248111973,"owners_count":21049578,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","python","streamlit","streamlit-component"],"created_at":"2024-09-25T00:07:02.331Z","updated_at":"2025-04-09T21:19:10.145Z","avatar_url":"https://github.com/thunderbug1.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# *Streamlit javascript execution extension*\n\n[![GitHub][github_badge]][github_link] [![PyPI][pypi_badge]][pypi_link] \n\n## Installation using pypi\nActivate your python virtual environment\n```sh\npip install streamlit-javascript\u003e=1.42.0\n```\n## Installation using github source\nActivate your python virtual environment\n```sh\npip install git+https://github.com/thunderbug1/streamlit-javascript.git@1.42.0\n```\n## Installation using local source\nActivate your python virtual environment\n```sh\ngit clone https://github.com/thunderbug1/streamlit-javascript.git\ncd streamlit-javascript\npip install .\n```\n## Installing tools required for build\nYou may need to install some packages to build the source\n```sh\n# APT\nsudo apt install python-pip protobuf-compiler libgconf-2-4\n# HOMEBREW\n/usr/bin/ruby -e \"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)\"\nbrew install protobuf graphviz gawk\n# YARN v4 - if you set PACKAGE_MGR=\"yarn\" in setup.py\nsudo npm uninstall --global yarn\ncorepack enable || sudo npm install --global corepack \u0026\u0026 corepack enable\n```\n\n## Running a local development environment (hot source update)\nActivate your python virtual environment\n```sh\ngit clone https://github.com/thunderbug1/streamlit-javascript.git\ncd streamlit-javascript\npip install -e .\n\n# NPM option - if you set PACKAGE_MGR=\"npm\" in setup.py\n(cd streamlit_javascript/frontend \u0026\u0026 npm install -D)\n(cd streamlit_javascript/frontend \u0026\u0026 npm run start)\n# YARN alternate - if you set PACKAGE_MGR=\"yarn\" in setup.py\n(cd streamlit_javascript/frontend \u0026\u0026 yarn install --production=false)\n(cd streamlit_javascript/frontend \u0026\u0026 yarn start)\n```\n### which will run this streamlit site concurrently with the following command\n```sh\nstreamlit run dev.py --browser.serverAddress localhost --browser.gatherUsageStats false\n```\nThis allows hot reloading of both the streamlit python and ReAct typescript\n\n## Debugging python in a local development environment (hot source update)\nActivate your python virtual environment\n```sh\ngit clone https://github.com/thunderbug1/streamlit-javascript.git\ncd streamlit-javascript\npip install -e .\n\n# NPM option - if you set PACKAGE_MGR=\"npm\" in setup.py\n(cd streamlit_javascript/frontend \u0026\u0026 npm run hottsx)\n# YARN alternate - if you set PACKAGE_MGR=\"yarn\" in setup.py\n(cd streamlit_javascript/frontend \u0026\u0026 yarn hottsx)\n```\n### Now run this in your debugging tool\nRemembering to match your python virtual environment in the debugger\n```sh\nstreamlit run dev.py --browser.serverAddress localhost --browser.gatherUsageStats false\n```\nThis sill allows hot reloading of both the streamlit python and ReAct typescript\n\n## Using st_javascript in your code\nYou can look at dev.py for working examples by getting the github source\n### Simple expression\n```py\nimport streamlit as st\nfrom streamlit_javascript import st_javascript\n\nst.subheader(\"Javascript API call\")\nreturn_value = st_javascript(\"1+1\")\nst.markdown(f\"Return value was: {return_value}\")\n```\n### An in place function (notice the brace positions)\n```py\nreturn_value = st_javascript(\"(function(){ return window.parent.document.body.clientWidth; })()\")\n```\n### An async place function (notice the brace positions)\n```py\nreturn_value = st_javascript(\"\"\"\n    (async function(){\n    return await fetch(\"https://reqres.in/api/products/3\")\n        .then(function(response) {return response.json();});\n    })()\n\"\"\",\"Waiting for response\")\n```\n### A muplitple setComponentValue\n```py\nst.markdown(\"Browser Time: \"+st_javascript(\"today.toUTCString()\",\"...\",\"TODAY\",1000))\n```\n### An on_change muplitple setComponentValue (with a block while we wait for the first return value)\n```py\ndef width_changed() -\u003e None:\n    st.toast(st.session_state['WIDTH'])\nreturn_value = st_javascript(\"window.parent.document.body.clientWidth\",None,\"WIDTH\",1000,width_changed)\nif return_value is None:\n    st.stop()\n```\n### You can also this code at the top of your page to hide the code frames\n```py\nst.markdown(\"\"\"\u003cstyle\u003e .stElementContainer:has(IFrame) { display: none;} \u003c/style\u003e\"\"\", unsafe_allow_html=True)\n```\n\n[github_badge]: https://badgen.net/badge/icon/GitHub?icon=github\u0026color=black\u0026label\n[github_link]: https://github.com/thunderbug1/streamlit-javascript\n\n[pypi_badge]: https://badge.fury.io/py/streamlit-javascript.svg\n[pypi_link]: https://pypi.org/project/streamlit-javascript/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthunderbug1%2Fstreamlit-javascript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthunderbug1%2Fstreamlit-javascript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthunderbug1%2Fstreamlit-javascript/lists"}