Using the Circuit Composer and Visualizer widgets

The Circuit Composer widget is equivalent to the IBM Quantum Experience graphical editor and can be used to create and display circuits within Quantum Lab. The Circuit Visualizer widget lets you view a circuit with the Circuit Composer look and feel but without interactivity.

Overview

Just like in Quantum Experience, you can drag and drop operations onto the qubit wires to build a circuit. When used to display an existing circuit, it is a powerful, interactive viewer. It allows for unlimited side scrolling of longer circuits, clicking and viewing internals of composite gates, and so on.

Note: The following gates in Qiskit do not belong to qelib1.inc (the Quantum Experience standard library of operations) and are not supported by these widgets:

  • ms (theta, qubits)

  • r (theta, phi, qubit)

  • rcccx (control_qubit1, control_qubit2, control_qubit3, target_qubit)

  • ryy (theta, qubit1, qubit2)

  • rzx (self, theta, qubit1, qubit2)

  • iswap (self, qubit1, qubit2)

  • mcu1 (self, lam, control_qubits, target_qubit)

  • dcx (self, qubit1, qubit2)

If you create a circuit using one of these gates and then try to use the Composer or Viewer widget, you will get an error message and a circuit with no gates will be displayed.

Create a circuit in the Circuit Composer widget

To use the composer widget, enter the following code in a Jupyter notebook cell:

from iqx import CircuitComposer
editor = CircuitComposer()
editor

An empty circuit composer opens:

empty-widget

To view the Qiskit code as you edit your circuit, check the box below the composer. The Qiskit code for your circuit is shown in a new cell and is updated as you work with your circuit:

three-gates qiskit-output

Use the Circuit Composer widget to work with an existing circuit

You can import a circuit from Quantum Experience or code a Qiskit circuit and then view it in the widget. For example, assume you used the following Qiskit code to create a circuit:

from qiskit.circuit import QuantumCircuit
qc = QuantumCircuit(2, 2)

# build your circuit here:
qc.h(0)
qc.cx(0, 1)

To open the circuit in the widget, use the following code:

from iqx import CircuitComposer
editor2 = CircuitComposer(circuit=qc) #qc is the QuantumCircuit created above
editor2

Result:

open-existing

Work with a circuit created or opened in the Circuit Composer widget

After creating or opening a circuit in the widget, you can continue to work with it like any other circuit – adding operations directly from Qiskit code, running the circuit on a quantum device, and so on. Example:

qc2 = editor2.circuit

qc2.x(0)
qc2.measure((0,1), (0,1))

qc2.draw()

result

Circuit Visualizer widget

If you want to visualize a circuit with the Circuit Composer look and feel but do not need interactivity, use the Circuit Visualizer instead.

To use the Circuit Visualizer, enter this code in your notebook:

from iqx import CircuitVisualizer
visualizer = CircuitVisualizer(circuit=qc)
visualizer

Result:

visualizer