crystvis-js

Visualise crystal structures, molecules, and NMR tensors in any web page, using WebGL.

Quick start

1. Install the package from npm.

   npm install @ccp-nc/crystvis-js

2. Add a container with a height, then create a viewer in it.

   <div id="viewer" style="height: 480px"></div>

   import CrystVis from '@ccp-nc/crystvis-js';
   
   const vis = new CrystVis('#viewer');

3. Fetch a structure file, load it, and display it. CIF models are named prefix_datablock, so this one is cha_CHA.

   const cif = await fetch('CHA.cif').then((r) => r.text());
   vis.loadModels(cif, 'cif', 'cha');
   vis.displayModel('cha_CHA');

Guides

• Getting started: install the package, create a viewer, and fix common errors.
• Loading structures: supported formats, supercells, and molecular crystals.
• Selecting atoms: queries, clicks, box selection, and the camera.
• Styling and annotations: colours, sizes, and labels on atoms.
• NMR tensors: ellipsoids, Euler disks, and relative orientations.
• API reference: every class and method, generated from the source.

What it is not

• It has no CDN or script-tag build. Use a bundler such as Vite, esbuild, or webpack.
• It does not draw coordination polyhedra.
• It has no hover events. Use onAtomClick for clicks.