General question: where should I start if I want to learn more about the internals of streamlit?

[wangdong2023]

Streamlit is great, but once I started using it, I feel the need to extend it. For example, I want to add image upload with pure frontend preview, streaming output back to image gallery and so on. I would like to learn more about streamlit internals, I wonder if there are documents on this topic, so I can get started easier (without reading the source code :D).

Any suggestion is much appreciated.

[Charly_Wargnier]

Hey @wangdong2023!

If you’re looking to dive deeper into the internals of Streamlit, here’s a roadmap to help you get started:

1. Official Docs: Start with the official Streamlit documentation! It provides a comprehensive overview of Streamlit’s features, components, and best practices.

2. Streamlit Components: Streamlit Components allow you to integrate custom JavaScript code and other web tech into your Streamlit app. The Streamlit Components documentation is a great place to start. Btw, Streamlit has a components gallery where developers showcase custom components they’ve built!

3. Streamlit Forum: The Streamlit forum is a great resource too! Many users share their experiences, challenges, and solutions here. You can ask questions, share your projects, and get feedback from the community.

4. Streamlit’s GitHub Repo: While you mentioned you’d prefer not to dive into the source code, the Streamlit GitHub repository can still be a valuable resource. It contains examples, discussions on issues, and more. Even if you don’t read the code, the discussions can provide insights into the internals of Streamlit!

Good luck on your journey!

Charly

[wangdong2023]

thank you

[wangdong2023]

I re-thought about my reply, I think I need to be honest here to say your answer to me means there’s no in depth document on the internals of streamlit. And it’s rather disappointing. I have read the introductory documentations. And the last two means I need to spend a lot of effort to collect scattered information.

[mathcuber]

The above replies are perfect but I would like to add this gfg article - https://www.geeksforgeeks.org/a-beginners-guide-to-streamlit/

[gSayak]

You can also check out the solution to this thread

How about creating a GPT for StreamLit Docs

How about a GPT for the Streamlit Documentation which not only helps u find out where the related topics are and highlights them when u try searching something in the documentation but also helps you step by step in fixing that issue? ik ChatGPT tends to overestimate the capabilites of StreamLit but what if it had its own GPT?

by blackary… which is basically a GPT for the streamlit docs

Here is the link for the app… it was really useful for me so you can check it out as well

[andfanilo]

You could try my own tutorials too to integrate your own React component into Streamlit to integrate something like react-images-uploading - npm (npmjs.com)

• :: Streamlit Components Tutorial (streamlit-components-tutorial.netlify.app)
• Streamlit components - Scatterplot with selection using Plotly.js - DEV Community
• How I build Streamlit Components (a small Javascript / React tutorial) - YouTube

[Charly_Wargnier]

Thanks for adding your tutorials, @andfanilo!

@wangdong2023 you may be interested in these.

Best,
Charly

[wangdong2023]

Thanks for all the replies, will check them out