CifVis Docs

Appearance

Introduction ​

CifVis is a JavaScript library and web component for visualizing crystal structures from crystallographic information files (CIF), powered by Three.js. Atoms, bonds and hydrogen bonds are displayed as entered in the CIF. Everything — from CIF parsing, to structure construction, to display — runs locally in your browser; there is no server component.

Features ​

  • Interactive 3D visualization of crystal structures
  • Support for anisotropic displacement parameters (ADPs)
  • Display of bonds and hydrogen bonds
  • Disorder group handling
  • Crystal symmetry growing of structures
  • Progressive difference-density maps from FCF data or observed reflections plus an IAM calculation
  • Custom complex coefficients for deformation-density maps, with symmetry-aware surface reuse
  • Multi-block CIF selection in the playground and widget API
  • Collision-free, opt-in atom labels
  • Touch and mouse controls
  • Widget for a complete packaged solution

Two ways to use CifVis ​

The widget. <cifview-widget> is a browser custom element: include one script, add one HTML tag, and you have an interactive structure viewer with toggle buttons, captions, and selection feedback. If you want a structure on a web page with minimal code, start with Widget → Getting started.

The library. Underneath the widget sits a layered JavaScript library: a CIF parser, a crystallographic structure model with filters, a density-map pipeline, and a Three.js rendering layer orchestrated by CrystalViewer. If you are building your own GUI, batch tooling, or embedding structures in an existing Three.js scene, start with JS Library → Getting started.

Both share one options schema — see the Options Reference — and the Gallery shows the kinds of applications you can build with either.

Try it ​

The interactive playground lets you load your own CIF file (plus FCF or Gaussian Cube files) and explore it directly. The cogwheel button opens a searchable settings overlay covering the full options schema; your choices are stored in the browser and can be copied as a JSON object ready for <cifview-widget options='…'> or the CrystalViewer constructor. The same overlay can export a high-resolution PNG of the current view (with atom labels and an optional transparent background) for figures — backed by viewer.captureImage() in the library.

License and citation ​

CifVis is written by Paul Niklas Ruth and released under the Mozilla Public License 2.0. The source is on GitHub; the package is published on npm as cifvis.