Streamlit Communication with postMessage: Can’t receive data from iframe

Custom Components
1

Hi everyone! :waving_hand: I’ve been working on building an interactive parts diagram (exploded view) inside a Streamlit app, where users can click on a number in a custom HTML/JS iframe and have that number automatically sent to a Streamlit search bar (like a st.text_input). The goal is to make the app usable via an interactive despiece (spare parts selector).

:white_check_mark: What works so far:

  • A basic iframe with HTML buttons is embedded using components.html(...).
  • JavaScript sends data using window.parent.postMessage(...).
  • From the browser console, I can see the messages arriving correctly:

yaml

CopiarEditar

✅ Enviado ID: 7
✅ Enviado ID: 18
✅ Enviado ID: 27

:cross_mark: What is failing:

  • On the Python side, Streamlit shows this repeatedly in the browser console:

bash

CopiarEditar

⚠️ Received component message for unregistered ComponentInstance!
{isStreamlitMessage: true, type: 'codigo_seleccionado', value: '18'}
  • In the Streamlit app, instead of getting the number inside a variable or callback, I get something like:

python

CopiarEditar

DeltaGenerator(_provided_cursor=LockedCursor(...), _props={'delta_type': 'iframe', ...})

:test_tube: Things I tried:

  1. postMessage with plain iframe (components.html(...)) — HTML sends fine, Python doesn’t receive.
  2. Direct DOM injection (modifying Streamlit’s input with JS) — Works, but it feels like a hack and not reliable long term.
  3. Installed streamlit-javascript component:
  • pip install streamlit-javascript gives outdated version (0.1.5)
  • Tried installing latest from GitHub:

bash

CopiarEditar

pip install --upgrade git+https://github.com/thunderbug1/streamlit-javascript.git
  • But it fails due to missing frontend build:

pgsql

CopiarEditar

error: [WinError 2] The system cannot find the file specified
Package 'streamlit_javascript.frontend' is absent from the `packages` configuration

:puzzle_piece: My system setup:

  • Windows 11 Pro
  • Python 3.13
  • Streamlit 1.46.1
  • Node.js 22.17.1 + npm installed
  • Git installed and working

:red_question_mark: My questions:

  1. How can I reliably receive postMessage events from an iframe in Streamlit without using unsupported hacks?
  2. Is there any internal listener or official pattern for receiving window.postMessage inside a Streamlit app?
  3. Is streamlit-javascript a viable option? Can the maintainers provide a working release or clarify if it’s actively maintained?

Any help from the dev team or others who made this work would be greatly appreciated. I think this use case (interactive diagrams sending data into Streamlit) could be valuable to many in the community!

Thanks :folded_hands:
— From Argentina :argentina: