JavaScript¶
Package @xenosite/xpict on npm — WASM paint plus RDKit.js at the layout
edge.
Single molecule¶
import { xpict } from "@xenosite/xpict";
const benzene = xpict.mol("c1ccccc1");
const rendered = await xpict.render(benzene, {
color: "#0b6e4f",
atom_shade: [0, 0, 0.2, 0, 0, 0.9],
star_labels: ["$R_1$"], // when the source has *
});
document.body.innerHTML = xpict.toSvg(rendered.scene);
const aligned = await xpict.render(xpict.mol("Cc1ccccc1"), {
align_to: benzene, // or align_to: rendered
});
render options¶
color, atom_shade, bond_shade, star_labels, weight, scale, align_to
(Mol | Rendered), id.
RDKit + WASM initialize on first render / depict.
Declarative document¶
Nested JSON (type: "mol" or type: "group" + children) — expanding toward
full PictSpec:
const [r] = await xpict.depict({
type: "mol",
smiles: "CCO",
color: "#0b6e4f",
shade: { atoms: [0.0, 0.2, 0.9], vmin: 0, vmax: 1 },
});
document.body.innerHTML = xpict.toSvg(r.scene);
