ASEView.js Live Demo

Interactive molecular visualization in the browser - same UI as Python package

Each viewer below loads the same template used by the Python package via iframe. This ensures consistent UI and features across Python and JavaScript.

1. MolecularViewer

Full-featured molecular viewer with style selector, bond controls, and more.

JavaScript Code 
// Create viewer
const viewer = new ASEView.MolecularViewer('#viewer1');

// Set molecule data (Ethanol)
viewer.setData({
    symbols: ['C', 'C', 'O', 'H', 'H', 'H', 'H', 'H', 'H'],
    positions: [
        [-0.047, 0.666, 0.000],
        [-0.047, -0.866, 0.000],
        [1.204, 1.144, 0.000],
        [1.869, 0.485, 0.000],
        [-0.570, 1.035, 0.889],
        [-0.570, 1.035, -0.889],
        [0.982, -1.162, 0.000],
        [-0.557, -1.222, 0.889],
        [-0.557, -1.222, -0.889]
    ]
});
Result

2. OverlayViewer

Compare multiple structures with opacity controls and alignment algorithms.

JavaScript Code 
// Create overlay viewer
const viewer = new ASEView.OverlayViewer('#viewer2');

// Structure 1: Original water
const water1 = {
    symbols: ['O', 'H', 'H'],
    positions: [
        [0.000, 0.000, 0.117],
        [0.000, 0.757, -0.469],
        [0.000, -0.757, -0.469]
    ]
};

// Structure 2: Stretched water
const water2 = {
    symbols: ['O', 'H', 'H'],
    positions: [
        [0.000, 0.000, 0.050],
        [0.000, 0.900, -0.400],
        [0.000, -0.900, -0.400]
    ]
};

// Set both structures
viewer.setStructures(water1, water2);
Result

3. NormalModeViewer

Visualize molecular vibrations with mode selection and amplitude control.

JavaScript Code 
// Create normal mode viewer
const viewer = new ASEView.NormalModeViewer('#viewer3');

// Equilibrium structure
const atoms = {
    symbols: ['O', 'H', 'H'],
    positions: [
        [0.000, 0.000, 0.117],
        [0.000, 0.757, -0.469],
        [0.000, -0.757, -0.469]
    ]
};

// Vibration data (3 modes for water)
const vibrationData = {
    modeVectors: [
        [[0, 0, -0.07], [0, 0.42, 0.56], [0, -0.42, 0.56]],
        [[0, 0.07, 0], [0, -0.56, 0.42], [0, 0.56, 0.42]],
        [[0.07, 0, 0], [-0.56, 0, 0], [-0.56, 0, 0]]
    ],
    frequencies: ["1595.32", "3657.05", "3755.93"],
    isImaginary: [false, false, false]
};

viewer.setVibrationData(atoms, vibrationData);
Result