{"id":7767,"library":"streamlit-js-eval","title":"Streamlit JavaScript Evaluator Component","description":"streamlit-js-eval is a custom Streamlit component that enables developers to execute arbitrary JavaScript expressions directly within a Streamlit application. It facilitates interactions with the browser DOM, local storage, window properties, and more, returning results back to Python. The current version is 1.0.0, and it follows an infrequent release cadence, with stability being a primary focus.","status":"active","version":"1.0.0","language":"en","source_language":"en","source_url":"https://github.com/aghasemi/streamlit_js_eval","tags":["streamlit","javascript","frontend","custom-component","browser-api"],"install":[{"cmd":"pip install streamlit-js-eval","lang":"bash","label":"Install `streamlit-js-eval`"}],"dependencies":[{"reason":"This library is a custom Streamlit component and requires Streamlit to function.","package":"streamlit","optional":false}],"imports":[{"symbol":"streamlit_js_eval","correct":"from streamlit_js_eval import streamlit_js_eval"}],"quickstart":{"code":"import streamlit as st\nfrom streamlit_js_eval import streamlit_js_eval\n\nst.set_page_config(layout=\"wide\")\nst.title(\"Streamlit JS Eval Demo\")\n\nst.header(\"1. Get Browser URL\")\ncurrent_url = streamlit_js_eval(js_expressions=\"window.location.href\", key=\"get_url\")\nst.write(f\"**Current URL:** `{current_url}`\")\n\nst.header(\"2. Set Local Storage Value\")\nif st.button(\"Set 'myKey' to 'myValue' in Local Storage\"):\n    streamlit_js_eval(js_expressions=\"localStorage.setItem('myKey', 'myValue');\", key=\"set_ls_value\", want_result=False)\n    st.success(\"Value set! Refresh the page to see it in browser dev tools.\")\n\nst.header(\"3. Get Local Storage Value\")\nlocal_storage_val = streamlit_js_eval(js_expressions=\"localStorage.getItem('myKey');\", key=\"get_ls_value\")\nst.write(f\"**Local Storage 'myKey':** `{local_storage_val}`\")\n\nst.header(\"4. Get Screen Width\")\nscreen_width = streamlit_js_eval(js_expressions=\"screen.width\", key=\"get_screen_width\")\nst.write(f\"**Screen Width:** `{screen_width}px`\")\n\nst.header(\"5. Redirect Page (example)\")\nif st.button(\"Go to Streamlit.io\"):\n    streamlit_js_eval(js_expressions=\"window.location.href='https://streamlit.io';\", key=\"redirect_streamlit\", want_result=False)\n","lang":"python","description":"This quickstart demonstrates how to use `streamlit_js_eval` to interact with browser-side JavaScript, including retrieving the current URL, setting and getting local storage values, getting screen dimensions, and performing a page redirect. Each `streamlit_js_eval` call requires a unique `key`."},"warnings":[{"fix":"Ensure a unique `key` is used for each distinct evaluation call. If results aren't updating as expected, consider triggering a Streamlit rerun or ensuring the JS expression itself produces a new value. For fire-and-forget actions that don't require a return value, set `want_result=False`.","message":"JavaScript expressions are evaluated client-side on each Streamlit rerun. Results are cached and only updated if the `js_expressions` or `key` changes, or if `streamlit_js_eval` is explicitly rerun. Be mindful of when and how results are updated in a reactive Streamlit application.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Sanitize or strictly validate any `js_expressions` derived from user input. Limit the scope of executable JavaScript to only what is absolutely necessary and safe.","message":"Evaluating arbitrary JavaScript from user input or untrusted sources can lead to Cross-Site Scripting (XSS) vulnerabilities. Treat all `js_expressions` inputs as potentially malicious.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Always provide a unique `key` string (e.g., `key=\"my_unique_eval_1\"`) to every `streamlit_js_eval` call in your application.","message":"Like all Streamlit components, `streamlit_js_eval` requires a unique `key` parameter for each instance to maintain state across reruns. Failing to provide a unique key can lead to unexpected behavior or `StreamlitAPIException` errors.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-16T00:00:00.000Z","next_check":"2026-07-15T00:00:00.000Z","problems":[{"fix":"Ensure the library is installed by running `pip install streamlit-js-eval`. Verify your import statement is `from streamlit_js_eval import streamlit_js_eval`.","cause":"The `streamlit-js-eval` package is either not installed, or there's a typo in the import statement.","error":"ImportError: cannot import name 'streamlit_js_eval' from 'streamlit_js_eval'"},{"fix":"Ensure each `streamlit_js_eval` call has a unique `key`. If you expect a result, make sure `want_result` is not set to `False`. For fire-and-forget operations, setting `want_result=False` is efficient. If you need re-evaluation on every run, consider using a dynamic `key` or updating `js_expressions` to force a change.","cause":"The component might not have executed the JavaScript, or Streamlit did not capture its return value, often due to a missing/duplicate `key`, or `want_result` being `False`.","error":"JavaScript expression results in None or doesn't update as expected."},{"fix":"Assign a unique `key` string to every instance of `streamlit_js_eval` in your application (e.g., `key='eval_id_1'`, `key='eval_id_2'`).","cause":"Multiple `streamlit_js_eval` calls in the same Streamlit app instance share the same `key` value, which is not allowed by Streamlit's component API.","error":"streamlit.errors.StreamlitAPIException: Every Streamlit component must have a unique key. If you are seeing this error, it means that you have streamlit_js_eval defined multiple times with the same key."}]}