Streamlit Image Coordinates

0.4.0 · active · verified Wed Apr 15

Streamlit-image-coordinates is a Streamlit component that displays an image and returns the coordinates when a user clicks on it. It also provides the click event time in Unix format. The current stable version is `0.4.0`, and the library is actively maintained with regular updates.

Warnings

gotcha The library is listed with a 'Development Status :: 3 - Alpha' on PyPI. While actively maintained, this implies that breaking changes could occur in future releases as the project matures.
Fix: Refer to the official GitHub repository and PyPI release notes for updates and potential breaking changes when upgrading.
gotcha Using `streamlit_image_coordinates` for dynamic updates (e.g., drawing points on an image after a click) inside `st.form` might not work as expected and can be challenging to implement without `st.rerun()` or `st.experimental_fragment` which might break form submission logic.
Fix: Consider structuring your app so that coordinate capture happens outside of a `st.form` context if dynamic updates are required, or manage state carefully within fragments. Refer to Streamlit community discussions for potential workarounds.
gotcha For older versions (prior to 0.1.3), updating an image dynamically after a click often required explicit use of `st.experimental_rerun()` to reflect changes. Newer versions (0.1.3 onwards) improved this behavior, reducing the need for manual reruns in many cases.
Fix: Upgrade to version 0.1.3 or higher for improved dynamic update behavior. If still encountering issues, ensure state is managed with `st.session_state` and consider setting the `key` parameter to allow the component to update correctly.

Install

pip install streamlit-image-coordinates PyPI

Imports

streamlit_image_coordinates

from streamlit_image_coordinates import streamlit_image_coordinates

Quickstart

This example demonstrates how to display an image and capture click coordinates using `streamlit_image_coordinates`. The returned `value` is a dictionary containing 'x', 'y', and optionally 'time'.

import streamlit as st
from streamlit_image_coordinates import streamlit_image_coordinates

st.title("Streamlit Image Coordinates Demo")

st.write("Click on the image to get its coordinates:")
value = streamlit_image_coordinates("https://placekitten.com/200/300")

if value:
    st.write(f"Clicked at: x={value['x']}, y={value['y']}")
    if 'time' in value:
        st.write(f"Click time (Unix): {value['time']}")
else:
    st.write("No click detected yet.")

view raw JSON →