ASEView.js - Live Demo

1. MolecularViewer

Full-featured molecular viewer with style selector, bond controls, radius contrast, and structure copy formats.

JavaScript Code

// Create viewer
const viewer = new ASEView.MolecularViewer(mount, { theme });

// 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]
    ]
});

return viewer;
                    

Result

2. OverlayViewer

Compare multiple structures with opacity, visibility, and color controls.

JavaScript Code

// Create overlay viewer
const viewer = new ASEView.OverlayViewer(mount, { theme });

// 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);

return viewer;
                    

Result

3. NormalModeViewer

Visualize molecular vibrations with mode selection, amplitude control, and copy formats. Python examples support ORCA Hessian and VASP OUTCAR input.

JavaScript Code

// Create normal mode viewer
const viewer = new ASEView.NormalModeViewer(mount, { theme });

// 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);

return viewer;
                    

Result

4. FragSelector

Select fragments with synchronized 2D/3D views and copy selected atom groups.

JavaScript Code

// Create fragment selector
const viewer = new ASEView.FragSelector(mount, { theme });

// Acetamide, matching ase.build.molecule('CH3CONH2')
viewer.setData({
    symbols: ['O', 'C', 'N', 'C', 'H', 'H', 'H', 'H', 'H'],
    positions: [
        [ 0.424546,  1.327024,  0.008034],
        [ 0.077158,  0.149789, -0.004249],
        [ 0.985518, -0.878537, -0.048910],
        [-1.371475, -0.288665, -0.000144],
        [ 0.707952, -1.824249,  0.169942],
        [-1.997229,  0.584922, -0.175477],
        [-1.560842, -1.039270, -0.771686],
        [-1.632113, -0.723007,  0.969814],
        [ 1.953133, -0.631574,  0.111866]
    ]
});

viewer.setSelection([1, 2, 4, 8]);

return viewer;
                    

Result

ASEView.js Live Demo

1. MolecularViewer

2. OverlayViewer

3. NormalModeViewer

4. FragSelector