+ 2

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
35 Antworten
+ 5
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
𝒜𝓋𝑒𝓇𝓎🪽
𝒜𝓋𝑒𝓇𝓎🪽 - avatar
+ 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
I feel good that I could be ur help 😁 [Np]
10th Feb 2025, 1:23 PM
𝒜𝓋𝑒𝓇𝓎🪽
𝒜𝓋𝑒𝓇𝓎🪽 - 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
U should try reverse engineering Phet simulations
10th Feb 2025, 11:45 AM
𝒜𝓋𝑒𝓇𝓎🪽
𝒜𝓋𝑒𝓇𝓎🪽 - avatar
+ 3
Konan I found another good JS framework 3Dmol.js and it's kinda good ✌️ 3Dmol.js: It is a dedicated, object-oriented library specifically designed for molecular visualization. It leverages WebGL for hardware-accelerated 3D rendering, allowing for smooth and interactive manipulation of complex molecules.
12th Feb 2025, 3:17 PM
𝒜𝓋𝑒𝓇𝓎🪽
𝒜𝓋𝑒𝓇𝓎🪽 - 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
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
+ 2
Konan chemistry is my weakness. Perhaps more knowledgeable members can give you more ideas. Have you tried looking for tutorials and videos on how to use them? Might be some hidden tricks that are not obvious. That's how I taught myself 3d modelling with Blender. Documentations, tutorials and videos. Now I can easily model and render donuts...😁 There are 3d chemical molecule tutorials for Blender, btw. https://youtu.be/zXJKYvuCPYY?feature=shared this is good, detailed and introduces more useful apps like Avogadro and Open Babel. Or maybe really easy to use apps for these things are commercial ones that costs $$. Chemistry is big business after all. If it were me, i'd just google the molecular structure, or get someone to make a paper sketch of it, create an svg version of it and call it done. 😅
12th Feb 2025, 2:53 PM
Bob_Li
Bob_Li - avatar
+ 2
✧Bhavik(Avery)✧ Thanks a lot - I'll look it up immediately ;~|D ✌️💫
12th Feb 2025, 3:21 PM
Konan
Konan - avatar
+ 2
✧Bhavik(Avery)✧ Bob_Li Shardis Wolfe So, I also looked up 3Dmol.js and it looks quiet promising 💫. But meanwhile, I also explored another way to display the molecules - KingDraw. It's got a very similar template-structure to the Kekule.js-Composer, but it's a little more convenient to use and especially you can format the whole structure to .png, .jpg and a lot of other formats too. A little annoying is that you can only work on one template at a time, but you can load up your work in a cloud which is very easy accessible. As conclusion I still need to learn a lot about formats and formatting of chemical structures but there are several good ways, so I think I will work that out. Thanks to you and all the others, you all had been very helpful 🫶💫 [If it's ready I got a little thank-you-project for all of you, but everything at it's time... ;<|》] The tryout-project now looks way better: https://sololearn.com/compiler-playground/WnanlfMmhwbe/?ref=app
12th Feb 2025, 9:53 PM
Konan
Konan - avatar
+ 2
Konan nice code and design. one nitpick is you have to scroll down to see the details when you click on an event. I am using the android app to browse this. I would probably turn that to a section reveal near the topic or probably a popup.
13th Feb 2025, 1:35 AM
Bob_Li
Bob_Li - avatar
+ 2
Bob_Li Yes, that's true, I'll work it out. Just got the info's sorted, filtered and arranged. It was planned a little different in the first place, but I collected a lot of data but wanted to keep it on point. Thanks for looking it up ✌️✨️ It's a vague topic in some way, but I really believe in psychedelic therapy and even if MDMA isn't that high of interest for myself, it's well documented over the last 113 years and the structural formula for the compound itself and it's precoursors is not too hard but also not just like: ^^^^^ (a vague display of an propyl chain ^^(<- an ethyl chain 😅)), if you know what I mean. And thanks again for the good advices in this Q&A 💫
13th Feb 2025, 4:19 AM
Konan
Konan - avatar
+ 2
Konan your frontend skills are excellent.
13th Feb 2025, 7:50 AM
Bob_Li
Bob_Li - avatar
+ 2
Konan So clean 🤩
13th Feb 2025, 9:51 AM
𝒜𝓋𝑒𝓇𝓎🪽
𝒜𝓋𝑒𝓇𝓎🪽 - avatar
+ 2
Bob_Li ╭╣Avery🪽 Thank you, this means a lot to me. 🫶 But there is still so much to learn - for example I almost blew up my Terminal yesterday after this project, because I pretty wrongly integrated gits from VSCode and was caught in an infinite WSL-loop on my Linuxcore... 😬... 😅
13th Feb 2025, 9:30 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