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?
In this tutorial, I will show you how I add interactive Javascript libraries into Streamlit as a Streamlit Component. I will then use a library called Parcel, with node.js to manage and bundle multiple Javascript libraries into a single JS file that can be manipulated as a Streamlit Component. After this introduction, I clone the React Component template and give some tips I learned from building 3 popular Components (streamlit-echarts, streamlit-drawable-canvas and streamlit-lottie) to build a React version of our Clickable Plotly Chart.
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!
☕ Want to support me? www.buymeacoffee.com/andfanilo
🐦Follow my daily updates on Twitter: / andfanilo
🗣️ My other links: linktr.ee/andfanilo
👉 Links
- Code: github.com/andfanilo/streamli...
- Blackary’s original tutorial with the streamlit-component-lib.js file: blog.streamlit.io/how-to-buil...
- The official React template: github.com/streamlit/componen...
- My Twitter thread for more Streamlit Components Resources: / 1552233660207828993
- My long blog post about creating Streamlit Components: streamlit-components-tutorial...
- Installing Node.js/NPM: docs.npmjs.com/downloading-an...
My tools (Affiliate links to support me!)
- 📷 Main Camera - amzn.to/3QvTosB
- 📷 Main Lens - amzn.to/3svYCwq
- 🎙️ Microphone - amzn.to/47l5ewA
- 🎵 Music & Sound Effects - www.epidemicsound.com/referra...
- 📕 Streamlit Official Book - amzn.to/3QuRPwl
📑 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
Пікірлер: 65
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!
@andfanilo
Жыл бұрын
Thank you for the kind words :) it means a lot! I hope my videos will keep inspiring you to push through the limits of Python webapp libraries and go past what everyone is writing on the Internet :D
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!!! 👏👏
@andfanilo
11 ай бұрын
Thank you very much for the feedback, I'm very grateful :) wishing you all the best for doing Javascript in Streamlit and in your YT channel!
Great video! Packed a lot of info in under 20 minutes.
@andfanilo
Жыл бұрын
Thanks for the support! Yeah I realized after watching the video again that it may be too much for a single 20mn video 😆
Just knew your channel I loved your work 👍👍👍 You provide great content
@andfanilo
Жыл бұрын
Thanks for the support 😃 Hope to see you around! Any Streamlit thing you want to see? Have a nice day!
Awesome video. Thank you so much for doing this!
@andfanilo
Жыл бұрын
My pleasure :) thanks for the coffee, it will keep me awake to build the next one!
*Awesome video!* 💪 Thanks for sharing. Guess I need to learn some JS/TS now. npm star this video
@andfanilo
Жыл бұрын
I'll never thank you enough for your support 😀eagerly waiting for your first JS component!
Wonderful. Again. Thank you
@andfanilo
Жыл бұрын
Thanks for the support, looking forward to your next component 😁
nice content and nice editing bro, loving your videos , greetings from Brazil!!
@andfanilo
Жыл бұрын
Thank you for the feedback 😊 it means a lot! Have you tried building a component? How was the experience?
🤯 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
@andfanilo
Жыл бұрын
That would be so cool! You should definitely try this one when you have time TBH I think I've missed some component announcements on the forum so I'm not sure if the tracker has all of the contributions :( ... I'm currently building a new uni course + building KZread videos, so I'm not really present right now anywhere else, I hope to be back soon!
@jeffaw5546
Ай бұрын
Amazing work bro! If anyone wants to extend streamlit functionality this is 100% the video to go to🎉
Ouch, my head hurts... this is dense, and fast packed. Got to write it down, but thanks, that's super valuable information 👍👍
@andfanilo
Жыл бұрын
🙂 yeah I realize now that some people want a very long version...I'll try a very slow 2h version one day (that's what I should sell as a digital product ahah), but in the meantime most of the info is in streamlit-components-tutorial.netlify.app/ !
@nlight8769
Жыл бұрын
@@andfanilo Nice ! Thanks 😊
@darkcss1054
Жыл бұрын
@@andfanilo the sidebar on that app looks awesome! I would love a tutorial teaching us how to make it 🙂
Excellent !
@andfanilo
Жыл бұрын
Merci pour le soutien :) I'll be waiting for your Streamlit component now!
wow, Python and React coming together. I love it 💜
@andfanilo
Жыл бұрын
😃 Come build Streamlit Components in React with us, it's fun!
Great one Fanilo!
@andfanilo
Жыл бұрын
Thanks for the support Afiz :) will be waiting for your Streamlit component
AMAZING
@andfanilo
Жыл бұрын
Thanks for the support 😁 looking forward to seeing your Streamlit component, which one would you build?
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.
@andfanilo
6 ай бұрын
I've yet to try Poetry but I've always heard good things about it :) Hatch is another one I'm looking to try. Well I'm putting this as a video idea for when I'm bored of doing Streamlit videos! Thanks for sharing
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 :)
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.
@andfanilo
Жыл бұрын
components.html doesn't return results back to Streamlit 😞 so you'd need to either build your own component like in this tutorial or implement using discuss.streamlit.io/t/code-snippet-create-components-without-any-frontend-tooling-no-react-babel-webpack-etc/13064 for the vanilla version I think streamlit pydeck widget does some conversions under the hood that could slow it down, so if you need only a very specific subset of pydeck capabilities, sure you can rebuild it yourself so it's lighter than the native widget like in this tutorial 👌 didn't try it myself though so don't know how optimized you can get it to be
@darkcss1054
Жыл бұрын
@@andfanilo I'm stuck at 5:22. What would be the deck gl (the javascript the pydeck package is wrapped around) equivalent of Plotly newPlot?
@andfanilo
Жыл бұрын
deck.gl/docs/get-started/using-standalone new Deck? (Not tested 😇 currently enjoying a little holiday 🕶️)
@darkcss1054
Жыл бұрын
@@andfanilo I'm getting "Uncaught ReferenceError: Deck is not defined". Feels bad to be a total newb on javascript 😓
@andfanilo
Жыл бұрын
@@darkcss1054 ouch! even with the import line `import {Deck} from '@deck.gl/core` at the start of the script and the `npm install @deck.gl/core @deck.gl/layers` ? Sorry I can't try right now but I do hope you manage to make it :o
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?
@andfanilo
3 ай бұрын
Hey! Have you read this one: docs.streamlit.io/deploy/tutorials/docker ? Can provide a good starting block
@SHEKHARKHADKA-vb1zg
3 ай бұрын
@@andfanilo hi Fanilo, yes I did, this docs is only for the docker build with streamlit only, but my application contains the streamlit +streamlit component API i.e. react which need npm install and npm run start. Do you have any docker build template/docs for this, I'm really really struggling here for last couple of weeks?
Question: hi Fanilo...what would you do to accomplish "mousedown event" with streamlit?
@andfanilo
Жыл бұрын
Hey! What do you mean? You want to send back an event to Python from a JS mouseevent down event? You can attach the event `object.addEventListener("mousedown", callback);` on any div. But you'll be sending way too much events back to Python this way, you'll need to make sure you debounce the event so it is not sent too many times www.freecodecamp.org/news/debounce-and-throttle-in-react-with-hooks/ Yeah JS can be a bit of a new world..
@wgalloPT
Жыл бұрын
something like that.. def mousePoints(event, x, y, flags, params): if event == cv2.EVENT_LBUTTONDOWN: size = len(pointsList) if size != 0 and size % 3 != 0: cv2.line(img, tuple(pointsList[round((size - 1) / 3) * 3]), (x, y)@@andfanilo
@andfanilo
Жыл бұрын
Ah but that looks like an OpenCV event, not a javascript one, so it’s a different story 🤔 sorry I’ve never tried OpenCV in Streamlit, your code looks fine though, what kind of error is it throwing?
@wgalloPT
Жыл бұрын
@@andfanilo actually I am trying to get that opencv code to work with streamlit. So far I havent being able to and I wonder if its because of the mouse down...thank you so much for replying fanilo..
@wgalloPT
Жыл бұрын
if you dont mind im going to email the code. All I need from you is to tell me if I can accomplish it or not in streamlit. It would greatly help me !!!
Hey. I am doing the openai with streamlit. I have problem with the secrets.toml file. Hope you can help
@andfanilo
Жыл бұрын
Hey Jacky! I'm in holidays so I'm not 100% into Streamlit right now :) Though...what is happening? Did you put your secrets.toml file in .streamlit folder at the root of your project, then using st.secrets? Is your toml file correctly formatted? While I'm in holidays, you may have better luck on discuss.streamlit.io/ Also I think @Avra_b has a video about it on kzread.info/dash/bejne/dHyruLSCabGecpM.html, if you follow what it does it may help you Have a nice day!
@jackychan4640
Жыл бұрын
@@andfanilo thanks a lot. Sorry for the interrupt your holiday. Wishing you happy holidays and Happy New Year 2023
How to deploy this app in snowflake? Is it possible to?
@andfanilo
7 ай бұрын
It is possible but I've personally never tried as I'm not using Snowflake. You should ask this question on the forum discuss.streamlit.io/ :)
08:27 actually you can store automatically the python requirements using `pip freeze > requirements.txt` ^^
@andfanilo
Жыл бұрын
Eheh thanks for pointing this out! Yep you could (I actually am a fan of pip-tools github.com/jazzband/pip-tools to manage requirements from a draft file), but I'm sad there's no easy Python way to add/remove a package from the requirements.txt file and the virtual environment with a single command, I don't think poetry does it :/
Excellent solution, but I would like to perform the same in pie chart
@andfanilo
Жыл бұрын
Hey Victor! A Pie Chart from which JS library would you like to integrate?
@VictorDlocalhost
Жыл бұрын
@@andfanilo Plotly
@andfanilo
Жыл бұрын
I haven't tried but replacing `type: 'bar'` with `type: 'pie'` in the input specification should do the trick You should be able to use github.com/null-jones/streamlit-plotly-events for this btw
@VictorDlocalhost
Жыл бұрын
@@andfanilo Yes, I decide to use the second alternative. Thank you.
the speed so fast, I can't understand it!
@andfanilo
Жыл бұрын
This is meant to be an overview of the implementation process, for a slow tutorial you'd be reading a blog tutorial like streamlit-components-tutorial.netlify.app/ Have a nice day!
"The truth is Python is only a front end for javascript"
@andfanilo
10 ай бұрын
Lol I forgot I said that 😂 too many reading source code from Streamlit, Dash and Ipywidgets !