To display 3D structural models, we use UglyMol, an open-source web-based macromolecular viewer focused on electron density. It’s embedded within a separate HTML page that is included in posts using an iframe. The document that the iframe inserts is located at /static/posts/uglymol/uglymol.html, which can be viewed here. The structure to show is selected using a query string. For example, the structure for entry 3K0N on the PDB can be inserted into any page on our site by simply including <iframe src="/static/posts/uglymol/uglymol.html#id=3k0n"></iframe>, which would cause it to look for files called 3k0n.pdb and 3k0n.mtz within the /static/posts/uglymol/ directory. Note that the files are stored locally and not loaded from the PDB.

Further parameters can also be added, such as #id=3k0n&xyz=10,5,15&eye=90,-30,60&zoom=50, yielding the following figure:

For a concrete example, the document creating this post can be viewed here. It, like everything else on this site, is released under an MIT license.