Any Future Plans for Easier CSS/JavaScript Use?

[Anders]

Are there any plans to increase the ability to easily use CSS and Javascript in Streamlit apps? I didn’t see any in the roadmap.

Why I’m asking: I love Streamlit, but some of the main projects I’m working on involve interactive data animations and/or creatively manipulating data that require CSS & JS. I know it’s possible to hack Streamlit to do this — eg, Fanilo’s terrific CSS video. But I was curious if this will get easier over time; the goal of these projects are to make it easier for non-geeks to build creative dataviz. Thanks!

[Anders]

Just saw the terrific list of components on the community components tracker. And there are a bunch of great examples that make coming up with a component that acts as a flexible framework for css/JS seem a lot less intimidating than I thought.

[andfanilo]

Hey @Anders

I hope the tracker motivated you to try building some quick JS components! When you get the hang of it, you can pretty much quickly integrate any interactive JS Viz library in Streamlit

I’d like to do a video on this to empower more people to try building components and not be intimidated by the JS ecosystem. I do think a lot of people sleep on it…but I realize it’s a daunting task to transform people to do a small bit of JS when Streamlit sells itself as a “non JS Python framework”

My 3 favorite tutorials:

• Mine XD https://streamlit-components-tutorial.netlify.app/ and Streamlit components - Scatterplot with selection using Plotly.js - DEV Community
• A video version by James Briggs Streamlit for ML #5.1 - Custom React Components in Streamlit Setup - YouTube
• You don’t have to use npm if you don’t want to with Code snippet: create Components without any frontend tooling (no React, Babel, Webpack, etc)

PS: well thanks to you I just added a tutorials section to the tracker

Good luck!
Fanilo

[Anders]

Thanks so much, @andfanilo! Lots of great stuff there.

And for the components tutorial you’re thinking about, if I can be of any help, such as trying out a rough script and giving feedback, I’d be happy to. I write small amounts of stuff in JS about 1-2 times a year, so I know just enough to know where it’s easy to get stuck. And I’ve taught some JS library workshops to nongeeks at nonprofits where I worked — eg, A Taste of D3.

[randyzwitch]

@Anders

Are there any plans to increase the ability to easily use CSS and Javascript in Streamlit apps?

Besides @andfanilo 's fantastic answer, yes, this is something we’re trying to figure out the best way to approach. The tradeoff we’re working through is how to make it easy vs. make it powerful to keep the “Streamlit way”

Best,
Randy

[Anders]

Thanks, @randyzwitch! And yes, keeping the “Streamlit way” is critical to Streamlit’s success.

[Shawn_Pereira]

Hi @Anders , you may find this package interesting:

streamlit-javascript

Cheers