CrystalView

Crystal structure visualization library for the browser. Renders 3D molecular and crystal structures on an HTML5 canvas.

Installation

npm install @chemistry/crystalview

Usage

import { Mol3DView } from '@chemistry/crystalview';
import '@chemistry/crystalview/crystalview.css';

const container = document.getElementById('viewer')!;

const viewer = new Mol3DView({ bgcolor: '#2b303b' });
viewer.append(container);
viewer.onInit();
viewer.load(structureData);

Tech Stack

• TypeScript 5.9, ES2024 target, ESM
• Vitest for testing, 70%+ coverage
• ESLint 10 (flat config) + Prettier
• Native tsc build (no bundler)
• Node.js 22+

Commands

| Command | Description | | ---------------------- | ------------------------------------------------------------- | | npm run build | Build the library | | npm run test | Run unit tests | | npm run lint | Run ESLint | | npm run format:check | Check Prettier formatting | | npm run type-check | Run TypeScript type checking | | npm run verify | Full verification (type-check + lint + format + test + build) |

Showcase App

A Vite-based demo is available in showcase/:

cd showcase
npm install
npm run dev

Release

git tag v3.0.1
git push --tags

The release.yml GitHub Action will publish to npm and create a GitHub Release automatically.

License

This project is licensed under the MIT license, Copyright (c) 2026 Volodymyr Vreshch. For more information see LICENSE.