Using the Circuit Composer widget¶

Overview¶

Just like in the IBM Quantum Composer, 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 more.

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

• 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 Circuit Composer 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 ibm_quantum_widgets import CircuitComposer
editor = CircuitComposer()
editor

An empty circuit composer opens:

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:

Use the Circuit Composer widget to work with an existing circuit¶

You can import a circuit from Quantum Composer 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 ibm_quantum_widgets import CircuitComposer
editor2 = CircuitComposer(circuit=qc) #qc is the QuantumCircuit created above
editor2

Result:

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()

Use the Circuit Composer widget to visualize a circuit¶

If you want to visualize a circuit with the Quantum Composer look and feel but do not need interactivity, use the draw_circuit(circuit) function, or pass editable=False to the ComposerEditor class.

Example:

from qiskit.circuit import QuantumCircuit
from ibm_quantum_widgets import draw_circuit

qc = QuantumCircuit(2, 2)
qc.h(0)
qc.cx(0, 1)
qc.x(0)
qc.measure((0,1), (0,1))

draw_circuit(qc)

Result: