Skip to content

@xenosite/xpict for xenosite.org

Molecule depiction for publication-quality vector graphics on the web. Install from npmjs.org (scope @xenosite).

Install

npm install @xenosite/xpict

{ "dependencies": { "@xenosite/xpict": "^0.1.0" } }

No GitHub Packages .npmrc is required.

Public API

Both surfaces are first-class (same paint).

Single molecule

import { xpict } from "@xenosite/xpict";

const mol = xpict.mol("c1ccccc1");
const rendered = await xpict.render(mol, {
  color: "#0b6e4f",
  atom_shade: [0, 0, 0.2, 0, 0, 0.9],
});
const svg = xpict.toSvg(rendered.scene);
const aligned = await xpict.render(xpict.mol("Cc1ccccc1"), {
  align_to: mol, // or align_to: rendered
});

render options: color, atom_shade, bond_shade, star_labels, weight, id, align_to (Mol | Rendered).

Declarative document

Nested JSON that is still expanding toward full PictSpec:

const [r] = await xpict.depict({
  type: "mol",
  smiles: "c1ccccc1",
  color: "#0b6e4f",
  shade: { atoms: [0, 0, 0.2, 0, 0, 0.9], vmin: 0, vmax: 1 },
});
const svg = xpict.toSvg(r.scene);

RDKit + wasm init on first render / depict. Works in Node and the browser.

Full walkthrough + images: API overview ยท JavaScript.