Run a circuit in JavaScript

Most of this course runs on Python and Qiskit, the default framework. Qollab has a second one: JavaScript and Qiskit. Use it when you want a circuit's results to drive something visual, like a widget, an animation, or a custom chart, rather than plain text.

If you are on the Python track, you already ran your first circuit in the previous lesson, so you can continue to forking a project. This lesson is the JavaScript version of that same step.

Prerequisites

You need a free Qollab account (you can sign up here in seconds) and to be signed in. You also need a JavaScript project to work in. When you create a project, choose the JavaScript / Qiskit framework in the create dialog. Each framework card has an ⓘ tooltip explaining the difference.

The four panes

A JavaScript project splits the editor into four panes: JS, HTML, and CSS, plus a live Preview. Your HTML and CSS lay out the surface your results are drawn onto, and your JavaScript runs the circuit and draws onto that surface. The Preview is where the finished piece appears, the way a visitor to your project will see it.

That is the difference from the Python playground, where output lands as text and charts in a console. Here, you decide what the output looks like.

Write a circuit

You write ordinary Qiskit, with a few conventions that come from running the Python API inside JavaScript. The three you meet first:

• No new. Call the constructor directly, like Python: QuantumCircuit(2, 2).
• backend is already there. Qollab creates it for you from the QPU you pick, so you go straight to backend.run(...).
• Unpack results with .toJs(). Values come back as proxies to Python objects, and .toJs() turns one into plain JavaScript data.

Here is a Bell state, start to finish:

import { QuantumCircuit } from 'qiskit';

const circuit = QuantumCircuit(2, 2);
circuit.h(0);
circuit.cx(0, 1);
circuit.measure([0, 1], [0, 1]);

// backend is pre-created; run() is async and returns a job
const job = await backend.run(circuit, { shots: 100 });

// Python objects come back as proxies; .toJs() unpacks them
const counts = (await job.result()).get_counts().toJs();

// Draw the result into the HTML you defined
document.getElementById('out').textContent = JSON.stringify(counts);

Give the HTML pane something to draw into, such as <pre id="out"></pre>, and the Preview shows your counts the moment the run finishes.

The JS / Qiskit projects doc covers the rest: named arguments with .callKwargs, polling a job's status, and drawing the circuit itself as an image.

Run it and choose where

Running works the same as the Python playground. Open the runner, set your shots, and press Run to open the Select QPU dialog:

• Simulators are free and run right away. Start here while you get the visuals right.
• Hardware runs your circuit on a real IonQ quantum computer and consumes credits.

Browser compatibility

Like the Python playground, this needs a browser with WebAssembly JSPI support, such as Chrome, Edge, or Opera. If you see a compatibility warning, switch to one of those. Firefox users can enable it from about:config by setting javascript.options.wasm_js_promise_integration to true.