JS / Qiskit projects

The JS / Qiskit framework is Qollab's path for interactive, visual quantum projects. You write JavaScript that calls the Qiskit API, and you render the results into your own HTML and CSS. It runs entirely in the browser, in a sandboxed iframe. This is the framework to choose when you want a widget, an animation, or a custom chart rather than plain text output. For standard, textual quantum work, use Python / Qiskit instead.

The editor

A JS / Qiskit project has four panes: JS, HTML, and CSS, plus a live Preview. Your HTML and CSS define the surface your results are drawn onto; your JavaScript runs the circuit and updates that surface.

The API

Under the hood this is the Python Qiskit 2.x API made available to JavaScript, so it looks close to Python with a few conventions worth knowing.

• Import from qiskit. For example import { QuantumCircuit } from 'qiskit', or import { JobStatus } from 'qiskit.providers.jobstatus'.
• No new. Create objects by calling the constructor directly, just like Python: const circuit = QuantumCircuit(2, 2). Methods match Qiskit too, such as circuit.h(0) and circuit.measure([0, 1], [0, 1]).
• Named arguments use .callKwargs. Where Python takes keyword arguments, pass them as a trailing object through callKwargs: circuit.draw.callKwargs({ output: 'mpl' }).
• Unpack Python values with .toJs(). Return values arrive as proxies to Python objects. Call .toJs() to use one as plain JavaScript data, for example result.get_counts().toJs().
• backend is pre-created, and running is async. Submit with const job = await backend.run(circuit, { shots: 100 }). The code runs in an async context, so top-level await works, and the injected setTimeout returns a promise you can await while polling job.status() against JobStatus.DONE and JobStatus.ERROR.

A minimal example

import { QuantumCircuit } from 'qiskit';

// No `new`: call the constructor like the Python API
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();

// Render into the HTML you defined
document.getElementById('legend').textContent = JSON.stringify(counts);

Drawing circuits

circuit.draw.callKwargs({ output: 'mpl' }) returns an image blob, but it needs the Qiskit Visualizations extra feature turned on first, from the Extra runtime features / libraries control. From there, URL.createObjectURL(blob) gives you a URL you can drop into an <img>.

Related

• Python / Qiskit projects
• The runtime environment
• Running your code