New Component: streamlit-islands, a way to separate static content from dynamic/interactive content

[bouzidanas]

Hi everyone!

With the arrival of Streamlit fragments, the idea of parts of a Streamlit app rerunning and updating independently of the rest of the script really motivated me to turn an idea I had brewing in my mind for a while into an actual project.

Over my 2 years working with Streamlit, I occasionally ran into a specific pain point in building content heavy apps. Development was a pain whenever there were a ton of lines containing text that doesnt change or involve any execution logic besides just being passed to st.write or st.markdown. At first, it was fine because streamlit scripts tend to be linear, but as I advanced, I ended up putting things in functions more and these content heavy scripts would become a mess.

There is obviously a benefit to having everything in one file, and there is nothing preventing me from putting parts of the app in multiple files, but without constant conscious effort to manage and keep things organized/structured/straighforward, scripts would inevitably end up messier than Id like.

Building custom Streamlit components got me into React and my interest grew over the last year dramatically. I ended up getting into React frameworks such as Next.js and Astro. Astro is really good for building content heavy websites/webapps and what I love about Astro is the separation of concerns that it achieves as a byproduct of its ‘islands’ architecture. Data dependent, dynamic, or interactive components are seen as islands in a sea of static content and their code is separated out. The static stuff is in markdown files and the react components are in JSX files. The markdown contains placeholders where the react components are inserted.

This kind of separation is what inspired this new project of mine called streamlit-islands that I want to share with you all!

streamlit-islands

Separate static content from dynamic content in Streamlit!

GitHub - bouzidanas/streamlit-islands: Separate static content from dynamic...

(installation and usage instructions can be found on the github page)

It is still early in development and I would very much appreciate any feedback or input you can offer.

[bouzidanas]

Hey again,
I just want to share a real example to give a better idea of use cases and benefits.

I took an old Streamlit script and rewrote it using this package. The script now looks like this:

and the markdown file (which can be displayed on its own) looks like this.

And finally, the rewritten Streamlit script gives the same result when executed.