Molecule visualization with Streamlit

Hi everyone, I just want to share with you a project I have started to do Comp Chem+ML related tasks with Streamlit. The first is visualizing molecules. I did a very simple (static) app with 3Dmol.js, but I want to make it bi-directional.
Here is the github repo:

Other things that I’m considering here are:

Any comments are welcome.

Best regards!!

J. M. Nápoles


Hey @napoles3d, glad you were able to get this to work out!

Are you planning on wrapping this into a pip-installable package? For my Folium package, I did something similar to you (i.e. thinking that it can be bi-directional at some point), but to get feedback from the community I made it static for now

I used the component-template React template, but then ended up commenting out all of the bi-directional code:


1 Like

Hey @napoles3d !

That looks amazing ! I have no chem background, but I would absolutely test your static package if you published it like @randyzwitch suggests.

I was pondering the 3D molecule viz question this morning :upside_down_face: did you check out Dash-bio’s React wrapper around 3Dmol.js ? I think it should also integrate really well into the React template of the components-template (though I didn’t check if you could run a callback on atom selection for example…).

But you know, a bi-directional jQuery method like you’re implementing should work really well too so I’ll just watch your progress :wink: feel free to ping for help.


1 Like

Hi @randyzwitch, thanks for your feedback. Turning this like pip-installable would be great, I will follow your example.

1 Like

Hi, @andfanilo, thank you very much. Dash-bio’s React wrapper around 3Dmol.js looks very interesting, I didn’t know it, but I will check. Thanks for keeping watching!!

1 Like

@andfanilo , @randyzwitch, and @tc1 , I have followed the suggestion of @randyzwitch and finally I made a pip installable package. You can try it with

$pip install stmol

There is a simple example in the tests directory:

please let me know if you can run it.

1 Like

The second line should be
from stmol import component_3dmol

Great @napoles3d ! I’ll have a look tomorrow.

If you feel comfortable with sharing your package more publicly, feel free to update the Components Community Tracker and move the 3D Molecule visualization to the Published section :wink:



I have no idea what I’m doing but I’m having fun :smiley:

On a side note :

  • maybe specify the type of file you are expecting to be uploaded on the “Browse” button, or limit it in the form (example : <input type="file" accept=".xls,.xlsx" />)
  • When I click the “box” button multiple times, the purple box gets more and more colored.
    • what does this box represent ?
    • could we make the box disappear with some reset button ?
  • I see the height and width are fixed to 800. I think you could lift those up as parameters of component_3dmol

Otherwise looks great ! I’ll let you track the ideas you like on your repo :slight_smile:


Hey @andfanilo, glad you are having fun with the component!!.
I will take your idea of the Browse button, thanks

By the way, you are playing with the structure of the SARS-COV2 spike protein which is nowadays broadly studied.
It is true that there are some issues with the “box” button, and here I would ask for advise from all of you. I would like to control the box position and size which is controlled by this line here:

 <input type="button" value="box"
		onclick="glviewer.addBox({center:{x:200,y:180,z:160},dimensions: {w:60,h:60,d:80},color:'magenta',opacity: 0.5});glviewer.render();"></input> 

but I have not succeed to pass the values from for example a slider :S. Do you have any suggestion??

Sorry, I forgot to say why the box is important. With the box it is possible to define the region where a drug can act to have an effect on the protein which is used in some software like Autodock Vina. This is something which is done with other software (pymol for example) but here I think the process could be simplified with this component.