Spectacles for atomistic data.

1M+ atoms at 60fps. Visual pipelines. Jupyter widget, JupyterLab extension, standalone web app, React component, VS Code extension.

Docs · Getting Started · PyPI · npm

Features

• 1M+ Atoms at 60fps — GPU billboard impostor rendering (ray-cast spheres and cylinders) scales from small molecules to massive complexes in real time. Large XTC and LAMMPS dump trajectories are decoded frame by frame on demand.
• Runs Everywhere — Jupyter widget, JupyterLab extension, standalone web app (megane serve), React component (npm), and VS Code extension. Rust-based parsers for 26 formats (PDB, GRO, XYZ, MOL/SDF, MOL2, CIF, mmCIF, CML, LAMMPS data, AMBER topology, GROMACS topology, CHARMM/NAMD PSF, XTC, DCD, ASE .traj, LAMMPS dump, AMBER NetCDF, VASP, Molden, XCrySDen XSF, JCAMP-DX, Chem3D XML, Odyssey, CASTEP magres, GAMESS output, CASTEP phonon) shared between Python (PyO3) and browser (WASM) — parse once, run anywhere.
• Visual Pipeline Editor — Build visualization workflows by wiring nodes or let the AI generator build them from natural language. 24 node types with 10 typed data channels flowing through color-coded edges. Load multiple structures with layer-based rendering to compare systems side by side. Draw atoms, licorice, lines, cartoon, molecular surfaces, or an illustrative style, and restyle a layer from the Quick Style panel without editing the graph.
• Megane Builder — A structure editor next to the viewer (/builder.html in megane serve, the Megane panel in VS Code's activity bar and JupyterLab's left sidebar, and megane.Builder() in notebooks): add, delete, move and re-element atoms, draw bonds, sketch molecules in Ketcher (embedded in 3D by RDKit), and build bulk crystals, supercells and slabs. Save as XYZ / PDB / MOL / CIF / POSCAR — also available from Python as megane.save_structure(). Python structure generators (packmol liquid boxes, polymer chains, solvation) plug into its Tools menu as MCP tool servers, and its Flow mode wires molecules and those tools into a model as blocks, like the viewer's pipeline editor.
• Embed & Integrate — Control the viewer from Plotly via ipywidgets events. Embed in MDX / Next.js docs. React to frame_change, selection_change, and measurement events. Use the framework-agnostic renderer from Vue, Svelte, or vanilla JS.

Scale

Megane renders over 1 million atoms at 60fps in the browser. Atoms and bonds are GPU-accelerated billboard impostors at every atom count — screen-aligned quads ray-cast into spheres and cylinders in the fragment shader. No desktop app, no plugin — just a browser tab.

In the web app, JupyterLab, and VS Code, files are parsed in a Web Worker, and XTC and LAMMPS dump trajectories and multi-frame XYZ / PDB files of 8 MB or more are decoded frame by frame on demand, so you can scrub through thousands of frames without reading everything into memory (DCD and AMBER NetCDF are decoded in full). The megane serve backend also exposes a binary WebSocket protocol (/ws) for trajectory streaming, consumed by the Streaming pipeline node; the bundled page parses in the browser instead.

Anywhere

One codebase, every environment.

For a per-platform breakdown of supported formats and UI features (including known gaps), see Platform Support.

The secret: parsers for 26 formats (PDB, GRO, XYZ, MOL/SDF, MOL2, CIF, mmCIF, CML, LAMMPS data, AMBER topology, GROMACS topology, CHARMM/NAMD PSF, XTC, DCD, ASE .traj, LAMMPS dump, AMBER NetCDF, VASP, Molden, XCrySDen XSF, JCAMP-DX, Chem3D XML, Odyssey, CASTEP magres, GAMESS output, CASTEP phonon) are written in Rust and compiled to both PyO3 (Python) and WASM (browser). Parse once, run anywhere. The volumetric readers (Gaussian CUBE, OpenDX) are TypeScript-side.

Visual Pipelines

Wire nodes to build visualization workflows — no code required.

24 node types across 6 categories: load data (structure, trajectory, streaming, vector, volumetric, spectrum), bonds (distance / file bonds, coordination), filter, modify (modify, color, representation, symmetry expansion, wrap / unwrap, replicate, drawing boundary, boundary completion), overlay (labels, polyhedra, surface meshes, isosurfaces, vectors), and display in a 3D viewport or a 2D spectrum plot.

10 typed data channels — particle, bond, coordination, cell, label, mesh, trajectory, vector, volumetric, spectrum — flow through color-coded edges. Only matching types can connect.

The Representation node switches a layer between atoms, licorice, line, cartoon, molecular surface, and illustrative rendering; Color colors by element, residue, chain, B-factor, or any per-atom property. For quick tweaks without touching the graph, the Quick Style panel in the Inspector tab edits style, color, atom size and opacity, bond width and opacity, labels, perspective, and cell axes, and writes them back into the pipeline.

Pipelines serialize to JSON, so you can save, share, and version-control your visualization recipes.

Integrate

Megane is not a walled garden. It fits into your existing workflow.

Plotly — Click a point on a Plotly FigureWidget to jump to a trajectory frame. Use Megane's on_event("frame_change") callback to update Plotly markers in sync.

MDX / Next.js — Drop <MeganeViewer /> or <Viewport /> into your .mdx documentation. WASM parsing works out of the box with a one-line webpack config.

ipywidgets — React to frame_change, selection_change, and measurement events. Compose Megane with any widget in the Jupyter ecosystem.

Framework-agnostic — MoleculeRenderer is a plain Three.js class. Mount it in Vue, Svelte, or a vanilla <div>.

Installation

Python

pip install megane

npm (for React embedding)

npm install megane-viewer

Works with React 18 and React 19 (peer dependencies: react and react-dom ^18.2.0 || ^19.0.0).

Quick Start

Jupyter widget

import megane

viewer = megane.view("protein.pdb")
viewer  # displays in notebook

With a trajectory:

viewer = megane.view_traj("protein.pdb", xtc="trajectory.xtc")
viewer.frame_index = 50  # jump to frame 50

The widget does not show the pipeline editor, but MolecularViewer(quick_style=True) (or viewer.quick_style = True) adds the Quick Style panel for restyling inside the cell. For advanced usage (filtering, multi-layer rendering, custom pipelines), see the Python Pipeline API.

Standalone web app (megane serve)

docker build -t megane .
docker run --rm -p 8080:8080 megane

Open http://localhost:8080 in your browser. Megane Builder, the structure editor, is at http://localhost:8080/builder.html.

To view your own files, mount them into the container and let the Load nodes browse them:

docker run --rm -p 127.0.0.1:8080:8080 -v ./mydata:/data megane \
  megane serve --files-root /data --files-any-host --port 8080 --no-browser

Then open a file from the Load Structure node's Open from server…. The page does not load a file named on the megane serve command line, so browse to it instead. Docker's port mapping makes your browser a non-local client of the container, which is why --files-any-host is needed; publishing the port on 127.0.0.1 keeps it reachable from your machine only.

Without Docker, megane serve also lets the Load nodes browse files on the machine it runs on (Open from server…), which is handy over an SSH tunnel to a workstation or cluster node. --files-root DIR sets the folder it browses, --no-files turns it off, and --files-any-host serves it to other machines on the network (by default only clients on the server's own machine). See the CLI guide.

Megane Builder tools

The Builder's Tools menu runs Python structure generators — Liquid box, Polymer chain, Solvate — from an MCP tool server. In VS Code (1.90+) and JupyterLab, Tools › Connect to megane-builder-tools starts the reference server for you with uv; JupyterLab reaches it through Megane's Jupyter server extension, which needs the tools extra:

pip install "megane[tools]"

In the browser (megane serve --port 8080, or the Docker image above), start the reference server yourself and connect to it from Tools › Tool server… (URL http://127.0.0.1:8765/mcp). megane serve defaults to port 8765, which the tool server below takes, so run it on another port:

uvx --from git+https://github.com/hodakamori/megane-builder-tools \
    megane-builder-tools --transport http --port 8765 \
    --allow-origin http://localhost:8080

See the Builder guide for setup on each host and for writing your own tool server.

React component (npm)

import { useCallback } from "react";
import "megane-viewer/styles.css";
import { MeganeViewer } from "megane-viewer/lib";

function App() {
  // Called after the viewer has loaded a file opened in its editor.
  const handleUpload = useCallback((file: File) => {
    console.log("opened", file.name);
  }, []);

  return (
    <MeganeViewer
      onUploadStructure={handleUpload}
      width="100%"
      height="600px"
    />
  );
}

Supported File Formats

Structure formats (LoadStructure node)

Topology formats (AddBond node)

These files supply bonds only, so they are loaded on the Add Bond node (bond source file), or from Python with AddBonds(top="topol.top").

Volumetric formats (LoadVolumetric node)

A grid has no atoms of its own, so it is rendered as an isosurface over a separately-loaded structure. .dx is shared with JCAMP-DX spectra, so the loader sniffs the content and says so if the file is really a spectrum.

Spectrum formats (LoadSpectrum node)

A spectrum is a 2D (x, y) trace with no atoms or coordinates, so it is drawn by the terminal SpectrumPlot node instead of reaching the 3D renderer.

Trajectory formats (LoadTrajectory node)

Development

Prerequisites

• Python 3.10+
• Node.js 22+
• Rust (for building the parser)
• wasm-pack (for building WASM bindings)
• uv
• maturin (uv tool install maturin or pip install maturin; uv sync does not install it)

Setup

git clone https://github.com/megane-labs/megane.git
cd megane

# Install wasm-pack (if not already installed)
cargo install wasm-pack

# Python
uv sync --extra dev

# Node.js
npm install
npm run build

Running megane serve

After setup, build and install the package, then start the server:

maturin develop --release
uv run megane serve protein.pdb

Development Mode

# Terminal 1: Vite dev server
npm run dev

# Terminal 2: Python backend
uv run megane serve protein.pdb --dev --no-browser

Tests

uv run pytest              # Python tests
npm test                   # TypeScript unit tests
cargo test -p megane-core  # Rust tests
make test-all              # All tests

Project Structure

src/                     TypeScript frontend
  renderer/              Three.js rendering (impostor, mesh, shaders)
  protocol/              Binary protocol decoder + web workers
  parsers/               WASM-based file parsers for every supported format (see Supported File Formats)
  logic/                 Bond / label / vector source logic
  components/            React UI components
  hooks/                 Custom React hooks
  stores/                Zustand stores (per-viewer playback, view, measurement, theme state)
  pipeline/              Pipeline graph, node executors, serialization
  builder/               Megane Builder (structure editor)
  crystal/               Unit-cell math and bulk crystal prototypes
  export/                Export the on-screen structure through the Rust writers
  hosts/                 File classification shared by the JupyterLab and VS Code hosts
  remote/                Opening files from the server / host ("Open from server...")
  ai/                    LLM pipeline generator
  stream/                WebSocket client
  tour/                  Guided onboarding tour
  types/, utils/         Shared types and helpers
crates/                  Rust workspace
  megane-core/           Core parsers and bond inference
  megane-python/         PyO3 Python extension
  megane-wasm/           WASM bindings (wasm-bindgen)
python/megane/           Python backend
  parsers/               Python readers for every supported format (`dispatch.py` maps every structure extension the web app opens), plus the PSF / GROMACS .top topology sidecars (Gaussian CUBE and OpenDX are browser-side only)
  pipeline.py            Pipeline builder (NetworkX-style DAG)
  builder.py             Megane Builder Jupyter widget
  builder_tools/         Jupyter server extension bridging the Builder to MCP tool servers (`megane[tools]`)
  writers.py             Structure writers (`save_structure`)
  cli.py                 `megane` CLI entry point
  protocol.py            Binary protocol encoder
  server.py              `megane serve` backend (FastAPI + WebSocket)
  widget.py              anywidget Jupyter widget
tests/                   Tests (Python, TypeScript, E2E)

Contributing

Contributions are welcome! See CONTRIBUTING.md for the development setup, test commands, and project design rules. Fork PRs run the full CI and E2E pixel checks automatically — no tokens or setup needed on your side. This project follows the Contributor Covenant Code of Conduct; security issues should be reported privately per SECURITY.md.

License

MIT