This section discusses how Streamlit connects the worlds of Python and React. The concepts here should prove useful when building components but, if you’re only interested in the hands-on tutorial, feel free to jump right into the Project Setup!
Each Streamlit call on the Python side loads up a React component from the running Streamlit server, which is then rendered onto your web browser. If we go under the hood of a
The Streamlit call
st.markdown is mapped to a
Markdown React component. This
Markdown.tsx file and accessed from a running browser via a path to the filesystem. For this example, it defines a functional component which returns a single
<h1> block for React to render in the browser.
One of the main benefits of Streamlit is that it enables you to assign each call to an independent React component with its own state and logic, all rendered in your web browser. We could actually say Streamlit is a bridge between React and Python.
Each rendered React component instance is independent and tied to a Streamlit call with its own encapsulated logic and internal state. For example, a
st.slider call is mapped to a
Slider component and any Python arguments are passed as properties — conveniently named “props” — to the component for a custom render.
On script reruns, the current values of all widgets are gathered from the React side and propagated into the corresponding Python variables.
Streamlit components follow the same model:
So the following questions arise for a component creator :
For this tutorial, we will use React to build a
st_custom_slider call and will retrieve the frontend code from the
CustomSlider React component.