The athanor-editor element

Steps

<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 (dark or light), label, stereo and src. They mean what the options of the same names mean. Changing readonly or smiles on a live element changes the editor.

Methods and events

• The element has the same methods as the editor object, such as getSmiles() and setStructure(), each returning a promise, and a ready promise.
• It fires ready and change DOM events. event.detail is the protocol event.
• editor.setTheme('dark'), or setting its theme attribute, switches the theme in place.

Its default height is 420 px; set your own with CSS. Types for both the element and the script are in athanor-embed.d.ts, next to the script.