+ 1

Usage of JS Tools to display structural formulae

A little question for all chemists among you: Let's keep it short: I need to display chemical structure formulae on of my projects. What tool or library would you recommend for easily rendering them using SMILES, InChI, jmol applet, LaTeX or a similar notation that integrates well with JavaScript and HTML? I would ask on stackoverflow, if I didn't knew that they would handle any tipps as 'offtopic'. Don't ask me why it is offtopic, but to keep quality, I understand that at least a little. Thanks in advance.

8th Feb 2025, 3:11 AM
Konan
Konan - avatar
22 Answers
+ 5
Thank you Bob_Li - that's really helpful ✌️💫 [Hieroglyphics, really?! - for me it's almost exactly like programming. Just imagine you're programming matter...💁^^] Edit: Wooow, what magic is this [kekule]?! ^^
10th Feb 2025, 11:54 PM
Konan
Konan - avatar
+ 4
https://sololearn.com/compiler-playground/W634pUP9YAI5/?ref=app I did its iframe some time ago, check their website (Not trying to promote myself here)
10th Feb 2025, 11:46 AM
✧Bhavik(Avery)✧
✧Bhavik(Avery)✧ - avatar
+ 3
Konan Did a quick websearch for "how to display chemical structure in webpage". ChemDoodle Web Components (or Jmol) is popular Javascript library for displaying chemical structures in a web page. ChemDoodle looks pretty easy to use. 1- Load the JS library source using <script> in <head> 2- Create <div> container with #id where you want to display the structure 3- Add <script> at end of <body> that creates instance of chem library viewer, describes the chemical, and renders it 3a- JS code can either be internal in <script> or in JS file loaded by <script>. JS file probably better if displaying multiple chemical structures or the HTML page is already long enough. 3b- both libraries mentioned support several chemical data formats (SMILES, MOL, InChl, etc)
8th Feb 2025, 4:50 AM
Shardis Wolfe
+ 3
Konan interesting. Can you post some example code ?
9th Feb 2025, 1:36 AM
Bob_Li
Bob_Li - avatar
+ 3
I feel good that I could be ur help 😁 [Np]
10th Feb 2025, 1:23 PM
✧Bhavik(Avery)✧
✧Bhavik(Avery)✧ - avatar
+ 2
Konan If you say none of them are displaying correctly even for basic stuff, are you sure you completely understand the SMILES (or other formats) used to describe the chemical? Have you tried one of the other data formats? Maybe you missed something in how you typed in the data. In general if all the libraries are equally displaying wrong structure for even basic stuff, it is more likely you missed something in the documentation for how you should type in the chemical formula.
9th Feb 2025, 12:53 AM
Shardis Wolfe
+ 2
U should try reverse engineering Phet simulations
10th Feb 2025, 11:45 AM
✧Bhavik(Avery)✧
✧Bhavik(Avery)✧ - avatar
+ 2
Konan There's this: https://partridgejiang.github.io/Kekule.js/documents/tutorial/examples/composer.html But I have absolutely no idea how it works... Chemistry is a language that will forever be hieroglyphics to me. also https://axial.acs.org/publishing/free-resources-chemistry-figures ChemDraw tutorials. Also chemistry stuff YT channel... https://youtu.be/KDWghUYEO3g?feature=shared
10th Feb 2025, 2:37 PM
Bob_Li
Bob_Li - avatar
+ 2
Konan chemistry people are modern day wizards. yes, perhaps it's like matter programming. But compiling could sometimes end up in an explosion and abort means you have to run for your life...😅
11th Feb 2025, 1:43 AM
Bob_Li
Bob_Li - avatar
+ 2
😅 Well said 👍💫 [I mean't the kekule.js-library in the first place, but O.K. ^^]
11th Feb 2025, 5:53 PM
Konan
Konan - avatar
+ 1
I'm not a chemist, but I've created a tool that display chemical structures of organic compounds and other covalently bonded substances, including the condensed structural formula, skeleton formula and 3d representation of molecular arrangement. It uses opengl3 and you might be interested in seeing the implementation
8th Feb 2025, 6:57 AM
RuntimeTerror
RuntimeTerror - avatar
+ 1
RuntimeTerror Yes, for sure I do, thank you ✌️✨️ Shardis Wolfe I also used these tools (and did much more than a 'quick websearch'), but the problem was, that none of them were really able to display the structural formulae in an (even nearly) correct way. In fact it was displayed very wrong and I didn't even wanted to display huge proteins or something like that, just some quiet basic stuff...
8th Feb 2025, 5:57 PM
Konan
Konan - avatar
+ 1
FATIMA MUHAMMAD Thank you, but... what exactly have those in common with my question?
10th Feb 2025, 11:02 AM
Konan
Konan - avatar
+ 1
Frederico Ie Why what?^^
10th Feb 2025, 11:12 AM
Konan
Konan - avatar
+ 1
✧Bhavik(Avery)✧ That's pretty nice and clean, thanks a lot, my friend! 👍💫 That looks really, like it could become really helpful to me... [I keep the question unsolved, because it didn't answered about the asked JS-examples and I still need to see how well I'm able to implement it, but it looks quiet promising]
10th Feb 2025, 11:58 AM
Konan
Konan - avatar
+ 1
Konan Kekule js seems to work. Unfortunately I barely passed my chemistry class and the best I can do is to cobble together a copy-pasted render from the sample codes in the site. https://partridgejiang.github.io/Kekule.js/ How to actually construct the MDMA model you want is beyond me, though. btw, The MDMA from wiki looks different from your svg... https://en.m.wikipedia.org/wiki/File:MDMA_(simple).svg if it's just this one, maybe just create an svg with Inkscape? https://sololearn.com/compiler-playground/W20f2FSgKC9Q/?ref=app
10th Feb 2025, 1:27 PM
Bob_Li
Bob_Li - avatar
+ 1
Bob_Li Thanks for your contribution ✌️💫. I will look up Kekule js too, when I'm back home on PC or Mac. That it looks totally different is because, it's simply totally wrong^^. For example there is an methyl-group attached to the amine yes, but there is no methyl or bare methoxy group at the phenyl group (the benzene-ring) here. We'd need to display a methylene-dioxy-group as a closed ring, so almost nothing is right here, except for the benzene-ring, but that would even be possible by guessing.. I'm looking for an helping framework, where I don't have to build all the svg-paths by hand, because it's very elaborate (especially if you want to display several ones or synthesis routes). At the current time, I already worked on several scientific works, but didn't had to display structural formulae that much, so that's where I would need the most efficient way in the first place.
10th Feb 2025, 1:59 PM
Konan
Konan - avatar
0
Why
9th Feb 2025, 10:15 PM
Frederico Ie
Frederico Ie - avatar
0
Bob_Li Sure, here's an extract of an project with jmol.js: https://sololearn.com/compiler-playground/WnanlfMmhwbe/?ref=app As you can see there structural formula is quiet far off. I could change it by hand but in that case, using SVG by itself would be already enough.
10th Feb 2025, 11:01 AM
Konan
Konan - avatar