For developers

Embed the Athanor structure editor

Put Athanor’s editor on your own page (a course in an LMS, an ELN, a compound database) and talk to it from your code: set a structure, read it back as SMILES, a molfile, SVG or PNG, hear when it changes, and switch it to view only. It is a drop-in path for pages that embed Marvin JS, which reaches end of sale in December 2026.

The editor above is the real one, embedded exactly as your page would embed it.

Quick start

The editor runs in an iframe from the Athanor site; a small script talks to it with postMessage.

<div id="editor" style="height: 420px"></div>
<script src="https://athanor.arbastro.com/app/embed/athanor-embed.js"></script>
<script>
  AthanorEmbed.create('#editor', { smiles: 'CCO' }).then(async (editor) => {
    editor.on('change', (e) => console.log('now', e.smiles));
    await editor.setStructure('CC(=O)Oc1ccccc1C(=O)O');   // aspirin
    const molfile = await editor.getMolfile();
  });
</script>

create resolves once the editor has answered the handshake, usually within a second or two of the iframe loading.

As an element

<script src="https://athanor.arbastro.com/app/embed/athanor-embed.js"></script>
<athanor-editor smiles="c1ccccc1" tools="select,bond,ring,erase" style="height: 360px"></athanor-editor>
<athanor-editor smiles="CN1C=NC2=C1C(=O)N(C(=O)N2C)C" readonly label="Caffeine"></athanor-editor>

Attributes: smiles, tools, readonly, theme, label, stereo, src. The element has the editor’s methods, a ready promise, and fires ready and change events. Types are in athanor-embed.d.ts.

Options

The protocol, version 1

You do not need it with the script; it is here so the editor can be driven from anything that can post a message. Every message is a plain object with protocol: "athanor-embed" and v: 1. Requests carry an id and get exactly one reply; the editor sends ready after the handshake and change when the SMILES actually differs, debounced by 300 ms.

hello

Must come first. Resolves to { version: 1, readOnly }.

getSmiles / getMolfile

The structure as SMILES or a molfile.

getStructure

The page as smiles, molfile, molV3000, sdf, mrv, cml, cdxml, inchi or inchikey.

getSvg / getPng

The page as an SVG document, or a PNG data URL at a scale from 0.25 to 8.

setStructure

Replaces the page from smiles, molfile, mrv, cdxml or auto; resolves to its SMILES, or refuses with the reason.

clear / setReadOnly / setTheme

Empty the page, switch view-only, or switch light, dark or system in place.

Who may talk to the editor

• Only the page that embeds it, and only an allowed origin. The first hello from an allowed origin pins it, and every reply and event goes to that origin, never to "*".
• Nothing is answered before the handshake, and a stranger gets no answer at all, so a page cannot find out that an editor is there.
• The embedded editor saves nothing on the reader’s device, shows no account, sign-in or assistant, and never navigates your page away.

Live demos

• Every call, wired to a button
• An ELN form field that submits a molfile
• An LMS question graded by InChIKey
• Compound registration filled from the editor

Coming from Marvin JS or Ketcher

athanor-marvin.js gives a Marvin JS page the calls it already makes (MarvinJSUtil.getEditor, exportStructure, importStructure, molchange, ImageExporter) and a Ketcher page a Ketcher-shaped object. See Marvin JS alternative.

For ELN, LMS and database vendors

An npm package with React and Vue components is on the way. Self-hosting the editor on your own domain, and embedding it in a commercial product, are arranged with us directly.