✨ Streamlit Elements - Build draggable and resizable dashboards with Material UI, Nivo charts, and more!

Thanks! I seem to have gotten it to work using lazy and sync. It does however have a 2-3 second load time per response but that’s not too bad for this prototype.

Hello, I’m working on creating a dashboard using Plotly diagrams. I’ve been exploring how to integrate a line chart into the dashboard, but I haven’t found a solution yet. If anyone has experience with this, I’d greatly appreciate any assistance. Specifically, I’d like to include a line chart using st.line_chart(chart_data, height=500) within a mui.Paper("First item", key="first_item") component in the dashboard. please

onChange is not working anymore for Streamlit 1.34 or above.
Seems like the creator is not maintaining this library any more.

Please refer to the solution👇
Solution to invalid custom component callback

In the demo the editor box does not show the pie chart code. I click on pie chart tab but does not change. How can I get the pie chart code? Thank you for your help.

Hi everyone! I’m interested in building a dashboard builder with Streamlit, where users can drag and drop widgets into a grid layout. I’d like to know if this is possible with Streamlit and the streamlit-elements library. From what I’ve seen so far, I haven’t found any examples of this functionality. Has anyone tried something similar, or know if it’s achievable? Thanks!

Of course, here is a minimalist example. If you want more feature support, please delve into streamlit-elements. Thank you.

from streamlit_elements import elements, mui, dashboard

layout = [
    dashboard.Item("item1", 0, 0, 2, 2),
    dashboard.Item("item2", 2, 0, 2, 2)
]

with elements("drag_demo"):
    with dashboard.Grid(layout):
        mui.Paper("This is item 1", key="item1")
        mui.Paper("This is item 2", key="item2")
1 Like

Hi Lkdd-ao thanks for your response, I took a look at Streamlit Elements and tested the dashboard example—it provides some of the functionality I’m aiming for. What I have in mind, though, is similar to the behavior in the CSS Grid Generator(https://cssgridgenerator.io/). Not in terms of generating HTML and CSS, but rather the way pressing a button on a grid spawns a widget that then scales according to the nearest grid cells. I like that feature and plan to incorporate something similar!

1 Like

This idea is fantastic, it reminds me of Power BI, which allows for the free generation and construction of visual components, facilitating developers to focus on in-depth research of data, which Streamlit Elements currently cannot achieve. Of course, I believe the use case for cssgridgenerator is not limited to that. :cowboy_hat_face:

Hi :slight_smile: ,
I’m trying to retrieve the coordinates of elements inside the dashboard as they are dragged around.
The code in the github readme doesn;t seem to work.
Namely, it’s not printing anything (there’s a print statement in the handle_layout_change).
Does anyone know how one can retrieve updated layout values?
Thanks :slight_smile:

code:


from streamlit_elements import elements, mui, html
from streamlit_elements import dashboard


with elements("dashboard"):

    # You can create a draggable and resizable dashboard using
    # any element available in Streamlit Elements.


    # First, build a default layout for every element you want to include in your dashboard

    layout = [
        # Parameters: element_identifier, x_pos, y_pos, width, height, [item properties...]
        dashboard.Item("first_item", 0, 0, 2, 2),
        dashboard.Item("second_item", 2, 0, 2, 2, isDraggable=False, moved=False),
        dashboard.Item("third_item", 0, 2, 1, 1, isResizable=False),
    ]

    # Next, create a dashboard layout using the 'with' syntax. It takes the layout
    # as first parameter, plus additional properties you can find in the GitHub links below.

    with dashboard.Grid(layout):
        mui.Paper("First item", key="first_item")
        mui.Paper("Second item (cannot drag)", key="second_item")
        mui.Paper("Third item (cannot resize)", key="third_item")

    # If you want to retrieve updated layout values as the user move or resize dashboard items,
    # you can pass a callback to the onLayoutChange event parameter.

    def handle_layout_change(updated_layout):
        # You can save the layout in a file, or do anything you want with it.
        # You can pass it back to dashboard.Grid() if you want to restore a saved layout.
        print(updated_layout)

    with dashboard.Grid(layout, onLayoutChange=handle_layout_change):
        mui.Paper("First item", key="first_item")
        mui.Paper("Second item (cannot drag)", key="second_item")
        mui.Paper("Third item (cannot resize)", key="third_item")

I encountered the same issue as you when using the latest version of streamlit. You can try downgrading streamlit 1.38.0.