Open tools for molecular engineering

See exactly when a molecule becomes a simulation.

Begin with atoms on a screen. Add topology, energy, force, mass, and time—one understandable layer at a time. The same open scene model carries each example from the browser to native rendering and scientific tooling.

Choose a workflow Open a structure

Start with your goal

What do you want to do with a molecule?

Choose a workflow to see the scientific steps, the libraries involved, and a runnable example. You do not need to learn the entire toolkit before doing useful work.

Workflow 01

Open and inspect a structure

Drop in a molecular file, preserve its cell and chemistry, validate it, and inspect atoms directly in the browser.

Open the file playground

01Parse the source
02Validate the scene
03Fit and inspect the structure

ProducesA checked, interactive molecular scene

molscenemolscene-schemabrowser-renderer

Browser-native interoperability

Open a real molecular file. Keep its meaning.

Drop in XYZ, extended XYZ, CIF/mmCIF, MOL/SDF, or MolScene JSON. Parsing, schema validation, camera fitting, and rendering happen locally in your browser.

benzene.molMOL

Benzene
Molecular Workbench
Open example
 12 12  0  0  0  0            999 V2000
    1.4000    0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    0.7000    1.2124    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -0.7000    1.2124    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -1.4000    0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -0.7000   -1.2124    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    0.7000   -1.2124    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    2.4800    0.0000    0.0000 H   0  0  0  0  0  0  0  0  0  0  0  0
    1.2400    2.1477    0.0000 H   0  0  0  0  0  0  0  0  0  0  0  0
   -1.2400    2.1477    0.0000 H   0  0  0  0  0  0  0  0  0  0  0  0
   -2.4800    0.0000    0.0000 H   0  0  0  0  0  0  0  0  0  0  0  0
   -1.2400   -2.1477    0.0000 H   0  0  0  0  0  0  0  0  0  0  0  0
    1.2400   -2.1477    0.0000 H   0  0  0  0  0  0  0  0  0  0  0  0
  1  2  2  0  0  0  0
  2  3  1  0  0  0  0
  3  4  2  0  0  0  0
  4  5  1  0  0  0  0
  5  6  2  0  0  0  0
  6  1  1  0  0  0  0
  1  7  1  0  0  0  0
  2  8  1  0  0  0  0
  3  9  1  0  0  0  0
  4 10  1  0  0  0  0
  5 11  1  0  0  0  0
  6 12  1  0  0  0  0
M  END

Canonical MolScene · schema valid

Atoms12

Bonds12

Framesstatic

CompositionC6 · H6

Rotate

More than a renderer

Use the libraries. Watch the meaning survive.

These examples execute the real packages in your browser. Change an input and follow the result from molecular identity through geometry, topology, and an explainable scientific output.

Example 02

Is it movement—or a molecular edit?

Compare revisions with stable atom identity, rigid alignment, RMSD, and explicit bond or composition changes.

01 parse MOL02 validate scene03 align geometry04 diff meaning

two valid MolScenes

Same molecule, rigidly transformed coordinates

Every atom was rotated and translated together. Alignment should erase the apparent motion without erasing identity. These controlled MOL fixtures keep corresponding atoms in the same row order, so the parser generates matching IDs; arbitrary MOL revisions do not inherently carry durable IDs.

molscenemoldiff

ReferenceCH₃OH

CandidateCH₃OH

Stable matchatom-1

ElementC

Direct shift2.492 Å

Compared shift<0.001 Å

Matched bystable ID

Example 03

Build a surface, then explain its chemistry.

Create defects and adsorbates as immutable structure edits, then convert topology changes into readable reaction chapters.

Atoms34no change

Bonds38no change

Events1topology changes

Chapters2explainable steps

Try the modelChoose an atom, frame, or construction above

surfacekit → reaction-storyboard

Turn a surface edit into an explainable reaction beat.

surfacekit orients and namespaces the CO fragment, places its carbon over a chosen silicon site, and adds one attachment bond.

OperationplaceAdsorbate(surface, co, { surfaceAtomId: "lesson-adsorption-si-bulk:atom:0:0:0:5", … })

What this chapter means

The adsorbate and surface share one scene and stable atom IDs, but no surface bond exists yet.

See the library calls

const attached = placeAdsorbate(surface, co, {
  surfaceAtomId: site.id,
  anchorAtomId: "c",
  direction: [0, 0, 1], distance: 1.8
});

const story = createStoryboard({
  frames: [approach, attached],
  inferEvents: { mode: "topology" }
});

Scientific boundary

The path is an authored educational narrative, not a calculated adsorption trajectory. Energies, barriers, forces, and competing sites still need simulation.

Example 04

Start watching before the file finishes loading.

Stream trajectory frames through a bounded queue, pause the renderer, and see backpressure stop unnecessary parsing.

frame time = 0.0 source value

Displayed0 / 12frames

Ready ahead0 / 2bounded

Input read0%0 chunks

Ready-frame limit 2Display interval 360 ms

Click an atom to inspect its stable identity and current coordinates.

Streaming trajectory

Render the next frame without holding the whole movie.

A trajectory is a sequence of coordinate snapshots. The incremental parser emits each complete frame as soon as its bytes arrive, so playback and analysis can begin before the file finishes loading.

01 · input0 chunks

02 · parser0 frames

03 · ready queue

04 · canvas0 shown

Start the example to turn one small XYZ string into a live sequence of frames.

What plain XYZ knows: elements and coordinates. This controlled example preserves row order to derive stable IDs, supplies two O–H bonds for display, and treats Time as a unitless source value.

Try it: start the stream, pause playback, and watch the ready queue stop exactly at its limit.

for await (const record of streamTrajectory(chunks, {
  format: "xyz",
  highWaterMark: 2,
})) {
  const scene = {
    atoms: record.frame.positions.map((position, i) => ({
      id: record.atomIds[i],
      element: record.elements[i],
      position,
    })),
  };
  renderScene(context, scene, viewport);
}

Interactive introduction

Complexity should arrive with a reason.

Every step adds one scientific idea and keeps everything you already understand.

Potential16.6kJ/mol

Kinetic—kJ/mol

Temperature—K

Click an atom to inspect its stable identity.

Layer 1 of 4

A visualization is coordinates plus appearance.

Six atoms have element labels and positions. Bonds are drawn because the scene says they exist—not because anything is moving or obeying physics yet.

Added in this layerAtom identity · coordinates · visual radius

Modelscene = { atoms, bonds, camera }

renderer.draw(scene)

Open-source foundation

Eleven focused libraries.
One molecular language.

Small packages compose into a complete workflow without trapping structures in a proprietary application. Use one package or carry the same scene through all of them.

@molecular-renderer/molscene

implemented

One typed scene format with XYZ/extXYZ, CIF/mmCIF, MOL/SDF, cells, trajectories, annotations, and provenance.

Open a file

@molecular-renderer/molscene-schema

implemented

A generated JSON Schema distribution with AJV conformance tests for APIs, editors, databases, and non-TypeScript clients.

See the schema role

@molecular-renderer/mechanics

implemented

Readable force terms and velocity Verlet integration for teaching and rapid browser prototypes.

Run mechanics

@molecular-renderer/browser-renderer

implemented

A dependency-light Canvas renderer with picking, cameras, force vectors, and browser-native interaction.

Inspect a structure

@molecular-renderer/moldiff

implemented

Semantic structure comparison: atom mapping, movement, coordination, topology, and cell changes.

Compare revisions

@molecular-renderer/surfacekit

implemented

Build crystals, slabs, defects, substitutions, passivation sites, and adsorbate placements.

Build a surface

@molecular-renderer/reaction-storyboard

implemented

Turn trajectories into explainable chapters with bond events, energy cues, and camera direction.

Read a reaction

@molecular-renderer/trajectory-stream

implemented

Incremental XYZ, extXYZ, and LAMMPS ingestion with bounded buffering, cancellation, progress, and a Web Worker protocol.

Stream frames

@molecular-renderer/molrender-cli

implemented

Inspect and render molecular scenes reproducibly from scripts, notebooks, and continuous integration.

See where scripts fit

@molecular-renderer/mol-ci

implemented

Validate structures, periodic geometry, overlaps, bonds, valence, and bounds in local or continuous-integration workflows.

See where CI fits

@molecular-renderer/adapters

implemented

Connect ASE, OpenMM-style data, and LAMMPS trajectories to the canonical scene without silently inventing chemistry.

Trace the architecture

Architecture

A scene is the contract.
Everything else is a capability.

XYZCIFASELAMMPSOpenMM

canonical contractmolscene

identity · geometry · topology
trajectory · provenance

browsernativediffCIstoryboard

Portable by default

Human-readable scenes and stable atom identity survive every tool boundary.

Science stays inspectable

Examples expose force terms and integration instead of hiding them behind animation.

Backends stay replaceable

Canvas today, native ray tracing tomorrow—the molecular document does not change.

First runnable slice

From an XYZ file to a checked, explainable scene.

The repository now contains working foundations, tests, examples, and the browser mechanics lab above.

import { parseXyz, validateScene } from
  "@molecular-renderer/molscene";
import { createWaterPair, step } from
  "@molecular-renderer/mechanics";

const scene = parseXyz(waterXyz);
const diagnostics = validateScene(scene);

const system = createWaterPair();
step(system, 0.00025); // ps

See exactly when a molecule becomes a simulation.

What do you want to do with a molecule?

Open and inspect a structure

Open a real molecular file. Keep its meaning.

Use the libraries. Watch the meaning survive.

Same molecule, rigidly transformed coordinates

Complexity should arrive with a reason.

Eleven focused libraries.One molecular language.

@molecular-renderer/molscene

@molecular-renderer/molscene-schema

@molecular-renderer/mechanics

@molecular-renderer/browser-renderer

@molecular-renderer/moldiff

@molecular-renderer/surfacekit

@molecular-renderer/reaction-storyboard

@molecular-renderer/trajectory-stream

@molecular-renderer/molrender-cli

@molecular-renderer/mol-ci

@molecular-renderer/adapters

A scene is the contract.Everything else is a capability.

Portable by default

Science stays inspectable

Backends stay replaceable

From an XYZ file to a checked, explainable scene.

Eleven focused libraries.
One molecular language.

A scene is the contract.
Everything else is a capability.