Bench

The Bench is QuantumJS's interactive live IDE, available at quantumjs.netlify.app.

It lets you write, visualize, and simulate quantum circuits in real time directly in your browser — no installation required.

What You Can Do

• Write QuantumJS DSL code in an in-browser editor
• See the compiled OpenQASM output update in real time
• Visualize the circuit diagram
• Run statevector simulation and inspect results
• Load and modify the built-in example circuits

The Editor

The left panel is the QuantumJS Editor — a code editor where you write QuantumJS DSL code. Above the editor you'll find three icons:

Icon	Action
FilePlus	New file — clears the editor to start fresh
Copy	Copy source code to clipboard
Download	Download source code as circuit.js

Samples Explorer

Click the Samples button (next to the logo in the header) to open the file tree explorer. The panel switches the editor area for a hierarchical file browser:

samples/
├── qft_simple.js
├── qft_sugar.js
└── stairs_sample.js

• Click a file to load it into the editor
• The currently active file is highlighted with a cyan background
• The Open file... button at the bottom lets you load a .js file from your local machine
• Close the explorer with the ✕ button to return to the editor

Samples are registered in src/sampleRegistry.ts. To add a new one, create a .js file in src/samples/ and add an import + entry to the registry.

Writing Code in the Bench

The Bench exposes the full QuantumJS API via a global Quantum object. Your script should return a circuit or pipeline:

// Available globals: Quantum
const c = Quantum.circuit({ qubits: 3 }, Q => {
  Q.input("101");
  Q.barrier();
  Q.bit(0).h();
  Q.bit(0).cx(Q.bit(1));
  Q.all().measure();
});

return c;

The returned circuit is compiled and visualized automatically.

QASM Panel

The QASM panel shows the compiled OpenQASM 3.0 output. Above the panel:

Icon	Action
Copy	Copy QASM text to clipboard
Download	Download QASM as circuit.qasm

Probabilities Panel

The probabilities panel shows the simulation results. When hovering over a moment in the circuit diagram, it switches to show the intermediate state with a "Moment N / M" badge. Above the panel:

Icon	Action
Copy	Copy results as CSV to clipboard
Download	Download results as results.csv

The CSV format has two columns: state and probability_pct.

Circuit Visualizer Panel

The circuit diagram supports interactive features. Above the visualizer:

Icon	Action
Copy	Copy SVG markup to clipboard
Download	Download circuit diagram as circuit.svg

Zoom and fit controls are also available in the header.

Interactive Circuit Visualization

The circuit diagram is interactive. Hover over any gate, barrier, or measurement column to:

• Highlight the SVG element — gates brighten, moment columns tint
• Highlight the corresponding QASM line — the matching line in the generated QASM panel gets a cyan background and left border accent, and the panel scrolls to bring it into view

This makes it easy to trace which line of QASM code produced which element in the circuit diagram.

Progressive Probability Evolution

After the main simulation completes, the Bench pre-computes the probability distribution at every moment of the circuit (up to 8 qubits and 30 moments). Hover over any moment to see the intermediate state:

Moments:  0        1        2        3        4
        [ H ]──[●]──[ H ]──[●]──[ H ]──[●]──[ H ]
        q₀: 0%   q₀: 0%   q₀:50%  q₀:50%  q₀:50%
        q₁: 0%   q₁: 0%   q₁: 0%   q₁:50%  q₁:50%
        q₂:100%  q₂:100%  q₂:100%  q₂:100%  q₂:50%
        q₃:100%  q₃:100%  q₃:100%  q₃:100%  q₃:50%

The results panel will show a badge like "Moment 3 / 17" when viewing intermediate results. Move the mouse away to return to the final distribution.

This feature is automatically disabled for large circuits (>8 qubits or >30 moments) to keep the simulation responsive.

Default Sample

When you first open the Bench, it loads a staircase comparison sample that demonstrates all four scoped layout loops side by side:

// 3-bit Quantum Scoped Stairs Comparison
const c = Quantum.circuit({ qubits: 3 }, Q => {
  Q.comment("Staircase Visualizer with CNOTs");
  Q.input("101");
  Q.barrier().brk();

  Q.comment("growUp (bottom-aligned growing)");
  Q.growUp(q => { q.first().cx(q.last()); });
  Q.barrier();

  Q.comment("growDown (top-aligned growing)");
  Q.growDown(q => { q.first().cx(q.last()); });
  Q.barrier();

  Q.comment("shrinkUp (top-aligned shrinking)");
  Q.shrinkUp(q => { q.first().cx(q.last()); });
  Q.barrier();

  Q.comment("shrinkDown (bottom-aligned shrinking)");
  Q.shrinkDown(q => { q.first().cx(q.last()); });

  Q.barrier();
  Q.all().measure();
});

return c;

Running Locally

The Bench lives at apps/bench in the monorepo. To run it locally:

bun install
cd apps/bench
bun dev