Custom component with full bidirectional communication

🧩 Custom Components
1

Hi,

We’ve been wondering whether the following is possible using streamlit. We would like to create a custom component using html + javascript only (no React, simplistic example in this blogpost) that implements full bidirectional communication as we describe below.

We want the component to react to changes in other components (e.g. having a slider controlling the component behavior) and to react when the user interacts with the component frontend (e.g. making a click in a canvas). The component has a state comprised of multiple values (e.g. {“img1”, “mask1”, “dict1”}). We have two cases:

A. when the value of another component changes we want to:

  1. update only one of the values of the custom component (e.g. only the mask but not the image)
  2. do some processing on the Python side
  3. send data to frontend (only the updated value)
  4. do some processing on the frontend side

B. when the user interacts with the frontend (e.g. clicks on a canvas):

  1. do some processing on the frontend side
  2. send single value (e.g. only a dict, but not the image or the mask) to the backend
  3. do some processing on the Python side
  4. send data to frontend
  5. do some processing on the frontend side

Is this possible with Streamlit today? If yes, what is the blogpost missing?

Best regards