Skip to main contentIBM Quantum Learning

Using the Circuit Composer widget

The Circuit Composer widget is equivalent to the IBM Quantum graphical editor and can be used to create and display circuits within Quantum Lab. You can also use it to view a circuit with the IBM Quantum Composer look and feel but without interactivity.

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:

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

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:

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

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:

visualizer
Was this page helpful?