How I build Streamlit Components (a small Javascript / React tutorial)

Do you want to take your Streamlit apps to the next stage by integrating your own web components?

This is a tutorial for beginners and advanced developers alike. No HTML/CSS/JS prerequisites are required, though it will be much easier if you have a general idea of how to employ them. I suggest you watch the full tutorial once before actually attempting to implement it by yourself. After this tutorial, you should be able to embed almost any NPM package as a bidirectional Streamlit Component - especially if it takes JSON as input!

👉 Links

My tools (Affiliate links to support me!)

📑 Chapters
00:00 Integrate any NPM package into Streamlit?
00:26 Vanilla Javascript
06:18 Managing and Bundling Javascript libraries
12:03 Using the React Component Template
15:45 Build Components to help Data Scientists!
16:29 Outro

🪶 29th video, out of the 35 videos for 2022 goal. Longest video tutorial of the year (not counting the Epic Tutorial that I split in 2). I crunched 3 years of developing Streamlit Components in 17 minutes. Honestly the video is jam-packed with information, I hope you’ll have to rewatch it multiple times 😄 I need to do shorter videos now to catch up on the lost time..

👍 On this channel, we love building a lot of small yet smart Streamlit apps to improve our Python chops, and recall our stories around Data Science and Content Creation. Like & Subscribe if you would like to see more videos!

⚠️ Disclaimer: This video is not sponsored. Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. Thank you for supporting my channel so I can continue to provide you with free content!

#streamlit #python #datascience #dataapps

[ratchetrod]

I recently found out about Streamlit and decided to do some research. I felt discouraged because I read some forums that said Streamlit is limited in its customizability. You single-handedly debunked those atteststions 🙌🏾

Thank you for the informational video, Fanilo!

[PrarthitShah-rc]

Awsome video @andfanilo
you explained the hardest concept very easily this is very very very useful
please post more videos like this on regular basis

[oscargalvez]

Wooow, I'm very impressed by the amount of work you put into this tutorial. While watching I didn't stop thinking how much time and effort you put into it. I have my own channel myself (different topic) so I know how much it takes to edit a video. And I really liked the sense of humour, I think it's something very few people dare to do and don't even talk about taking out the bongos, LOL. Great work, oh yes, and great useful information, as wel!!! 👏👏

[nlight]

Ouch, my head hurts... this is dense, and fast packed. Got to write it down, but thanks, that's super valuable information 👍👍

[CodingIsFun]

*Awesome video!* 💪 Thanks for sharing. Guess I need to learn some JS/TS now.
npm star this video

[rockNbrain]

nice content and nice editing bro, loving your videos, greetings from Brazil!!

[mohammedalbatati]

Just knew your channel
I loved your work 👍👍👍
You provide great content

[cyberhard]

Great video! Packed a lot of info in under 20 minutes.

[flight]

🤯 Nice one!! .. It would be fun to create a GLTF loader for streamlit, and use sliders to experiment with lights and colors. I am sure this will help create a lot of new and fun little components, hope you can keep the community tracker up to date

[plouf]

Awesome video. Thank you so much for doing this!

[timetocode_with_ali]

wow, Python and React coming together. I love it 💜

[wallacypasqualini]

Hello! Regarding the problem with requirements.txt, have you seen the Python Dependencies Manager options? There are good options. My favorite is Poetry because it's similar to the way node.js manages dependencies in JavaScript.

[onhyzqf]

Hey, your video seems really good but you have not showed the component rendering with the build file, I am trying but it is showing me component error even though the same component is working when I try to do the embedding with port (I am trying to embed react app into streamlit), if possible could you please give explanation for this would be helpful, thanks :)

[SHEKHARKHADKA-vbzg]

Hi Fanilo Andrianasolo, I'm really struggling to containerize this node js and streamlit together in docker container, do you have any docker template for this?

[balachandar]

How to deploy this app in snowflake? Is it possible to?

[darkcss]

From your understanding, would it be possible to get React to return attributes from a column that is clicked on a Pydeck chart loaded in Streamlit through components.html? Currently the Pydeck component of Streamlit has performance issues so using it through components.html is a must.

[wgalloPT]

Question: hi Fanilo...what would you do to accomplish "mousedown event" with streamlit?

[louis_korczowski]

08:27 actually you can store automatically the python requirements using `pip freeze > requirements.txt` ^^

[jackychan]

Hey. I am doing the openai with streamlit. I have problem with the secrets.toml file. Hope you can help

[VictorDlocalhost]

Excellent solution, but I would like to perform the same in pie chart