Where to find streamlit-components-lib.js?

[Sarnath_K]

Hi Friends!

I am trying to develop a new custom component, where my frontend will just be a HTML+Javascript file whose location will be passed using the “path” argument of the “declare_component” API.

I am not a react developer. Just a simple HTML+Javascript solution.

Now, I want to develop a bi-directional component and want to use the “Streamlit.setComponentValue()” function to return value from Javascript to Python.

The “Streamlit” object is no where to be seen (I run : streamlit run app.py). The console log shows this as undefined reference.

I understand that this comes from “streamlit-components-lib.js” file. I read @blackary 's blog where he recommends a cookie-cutter which installs this js file.

Does this “js” file not come automatically with the streamlit installation?

I’ve been trying hard for 2 days to get this done. I am close to running down the street, with ruffled hair, baffling everyone with what is a good way to develop a streamlit component?.. Please tell me dear… Please… Why is the documentation and videos not helping simple developers like me… Tell me dear…

[Sarnath_K]

I created a component to construct and/or edit networkx graphs. I just copied the streamlit-component-lib.js from Blackary’s project and used it. Not sure if thats the right way to do this.
I am afraid to contribute this as a component because I am not sure if I am developing in a right way that is “streamlit” compliant.
So, any help most welcome!

[blackary]

Hi @Sarnath_K,

Just copying that file is totally fine. It doesn’t come with streamlit out of the box, so you’ll either need that file, or one of the ones from the official templates GitHub - streamlit/component-template: Templates and example code for creating Streamlit Components. I am biased, but I prefer my simple no-build .js file that I include with the cookiecutter.

If you come up with something that seems useful, and works, feel free to post it here on the forum to get feedback – there are lots of different ways people develop components, and not just one right way, so if it works, it will be a great contribution to the community!

[Sarnath_K]

Thanks for your response. The official link does not have the JS file… I think they assume that the HTML will be served from “node.js”.
But not all environments are conducive for this.
Integrating a simple JS file and serving the file statically through the “path” argument of “declare_component” is the easiest method for many developers.
But, I could not find any example of this in the documentation.
I struggled to figure my way out. Your cookiecutter thing was straightforward and very useful. The official videos could include a link to that and make it easier for developers to develop components.
As far as the work I am doing, it is an interactive graph editor – just blooming. I need to solidify it a bit before posting here. Will do once it is in a shareable state. Thanks for your encouragement!