"Exporting" Streamlit App to Javascript/Typescript App

[jsuser]

Hi Streamlit Community,

So far at my company we’ve really enjoyed using Streamlit to quickly stand up interactive data viz dashboards. Now that we’ve been able to iterate through ideas in order to reach a satisfactory initial dashboard, it’s time to productionize it–the only problem is that our entire front end is in JS/TS, no Python allowed. My team only does Python, and we’ll have limited support from our front end team. (I’ve gone through the React “tic-tac-toe” tutorial, so just enough to generally understand how components work).

I’ve seen plenty of topics related to getting JS/TS into Streamlit (“use custom components”), but nothing about the reverse. Now that I’ve got a Streamlit dashboard, what would be the best way to display it through a javascript front end? Obviously any of my data processing that currently takes place in Python will need to be converted manually, but maybe I can easily extract the components’ React code to place into our JS app?

Thanks in advance for any help

[andfanilo]

Hello @jsuser , welcome to the community!

but maybe I can easily extract the components’ React code to place into our JS app?

My very honest short answer: It is theoretically possible but the cost/benefit ratio is probably too high. But let me dive in a little bit more

---

Answer 1: the JS team probably has its preferred tools: if you’re prototyping in Streamlit then productionizing in JS/TS because you don’t have processes nor resources in your company to monitor/support/allow Python applications in production (which I understand, I am in the same boat), then your frontend team probably has its preferred frontend tooling (like maybe they prefer Vue.js over React which is what Streamlit is built with) to build projects and will use your Streamlit app as a design mockup to build the final product, so I wouldn’t try to extract the React components from Streamlit and let them work on it for replicating your app for 3 months with their favorite tools.

Answer 2: it is possible to read the React components source code: if you really want the same look & feel, you can check out the Streamlit source code and let the JS team try their best extracting the relevant code for each component doable but a bit hard since it’s not a totally separate React component library and there may be a bit of logic you’ll have to unwire from the component. But doable (though I can’t tell how much time they would take)

My personal answer is recreating a TS app out of a Streamlit app is contrary to the Streamlit philosophy: here’s my favorite slide from Adrien Treuille talk introducing Streamlit in 1/4: What is Streamlit - YouTube

If you watch the talk, my personal opinion is Streamlit was created exactly for the purpose of “We have a Python team building a lot of valuable webapps to solve problems and we don’t want to rely on the availability of a JS team to rewrite and support them in small production scopes”, and the reason there’s no doc for Streamlit to JS/TS app is because it goes against this philosophy. You want to be able to use Streamlit/Dash/Panel/Django/any Python web framework in production without having to convert them to a full TS app.

Maybe this is an opportunity for you and Python team to ponder if you want to move more Python apps into production. Perhaps you can use Streamlit as a demo to explain to other JS colleagues how you would work together in producing value, and rethink the “no Python allowed in production” part of your company, so you can experiment deploying Python in production.

As a compromise maybe you can host your Streamlit app in a Docker container/on the Streamlit Cloud for example so the production team don’t have to maintain a Python install, and then maybe you can iframe the Streamlit frontend inside your JS product?

---

There are unfortunately no easy solutions for this one from my point of view, but I do hope you manage to start talking about the “no Python in prod” change at the very least.

Have a nice day
Fanilo

[jsuser]

Thanks for the detailed answer andfanilo! I suspected this might be the case. Some combination of Answer 1 and Answer 2 is likely what we’ll have to do, the balance of which will need to be left to the JS team.

The “no Python in prod” thing unfortunately has more to do with keeping things consistent from the perspective of our users rather than anything explicitly engineering-related. It wouldn’t make sense for them to interact with an app full of custom TS-/React-based pages/dashboards/visualizations, and then to be suddenly confronted with a very different looking Streamlit dashboard with matplotlib or other python-generated graphics. So unfortunately I think that obviates the iframe solution as well, though it is an interesting idea, hopefully someone else will be able to read this thread in the future and use it

Thanks again!