CifVisCrystal structures in the browser

Interactive 3D visualization of crystal structures from CIF files, powered by Three.js. Everything — CIF parsing, structure construction, density maps, display — runs locally in your browser.

I want the drop-in widget

I'm building with the library

Show me examples

General

What CifVis is and the concepts shared by widget and library — the CIF model, the structure model and its filters, and how density maps work.

Widget

The <cifview-widget> web component — one HTML tag for an interactive structure on your page, with attributes for modes, density, filtering, and styling.

JS Library

Parse CIF files, drive CrystalViewer to build a custom GUI, calculate density maps, run Filters standalone, or feed geometry into your own Three.js scene.

Atom Labels

Opt-in screen-space atom labels with collision-free placement — how to activate them and how the placement algorithms work.

Options Reference

The full options schema shared by CrystalViewer and the widget, with tables generated directly from the source defaults.

Gallery

Live examples of what you can build — comparison views, density maps, publication figures, theming, and integrating CifVis with other JavaScript.

More resources

Interactive playground — load your own CIF file and explore it in the browser.
Developing CifVis — contributor guide: the lay of the land and how the layers depend on each other.
Generated API reference — every exported class and function has a JSDoc comment; run npm run docs from the repo root to build the full browsable reference at jsdoc-out/index.html.
GitHub — source, issues, and releases. Released under the Mozilla Public License 2.0.