Gallery
Where the General, Widget, and JS Library sections explain how CifVis works, the gallery shows what you can build with it — potential applications and how CifVis plugs into a larger page. Every entry is a live demo plus the code to reproduce it, both as widget markup and as library JavaScript.
| Entry | Shows |
|---|---|
| Comparison views | Two synchronized viewers for comparing refinements or render styles. |
| Difference density | A progressive Fo−Fc map calculated in the browser from embedded reflection data. |
| Publication-style 2D | A print-ready ORTEP-style figure with the cutout-2d renderer. |
| Contour section | Line-only density contours in a molecular plane. |
| Custom theming | CSS custom properties plus element recolouring for a branded viewer. |
| Disorder handling | Cycling disorder groups on a disordered structure. |
| Labeled figures | Maximum-coverage atom labels for an annotated figure. |
| Embedding with other JS | A viewer coexisting with your own JavaScript — selection driving a chart. |
| Geometry measurements | Click atoms into a list and measure distances, angles, torsions, and distances to a plane. |
| Extended solids | An ionic structure grown through symmetry with the unit cell displayed. |
All demos use the sample CIF files that ship with the playground.