Embed mols2grid to web page #mols2grid #RDKit #webapp

I often use flask for my web app development because the package is light weight web framework and easy to write.

BTW rendering molecules as grid image is easy in jupyter notebook by using RDKit’s Draw.MolsToGridImage function. And also recently developed package named mols2grid is really cool for rendering molecules on jupyter notebook. mols2grid generaetes image data as HTML. So it means that we can embed these grid image to webpage.

So I tried to it ;)

Following code uses Flask, Flask-bootsrap, mols2grid. All packages are installed from conda-forge.

Directory structure is below.


And app.py

from flask import Flask
from flask import render_template
from flask_bootstrap import Bootstrap
from rdkit import Chem
import mols2grid

app = Flask(__name__)

def top():
    im = mols2grid.display('./cdk2.sdf',
    #tooltip=["id", "r_mmffld_Potential_Energy-OPLS_2005"]
    return render_template('/top.html', data=im.data)

if __name__=="__main__":

And top.html is below.

{% extends "bootstrap/base.html" %}
{% block title %}This is an example page{% endblock %}

{% block navbar %}
  <div class="navbar navbar-inverse" role="navigation">
    <div class="container">
      <a class="navbar-brand" href="#">Navbar</a>
{% endblock %}

{% block content %}
<div class="container">
{% endblock %}

That’s all. It is really simple isn’t it ;)

Let’s run the web app.

$ python app.py

Then access localhost:5000. I could get molecules as grid image.

The data has pagenation and check box. It can dowonload selected molecules. I think it is one of the convenient way to implement rendering molecules function in my web applications.


Published by iwatobipen

I'm medicinal chemist in mid size of pharmaceutical company. I love chemoinfo, cording, organic synthesis, my family.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: