Quantum Circuit Composer Guide

Based on the IBM Quantum Composer documentation, adapted for the KUQCI Circuit Visualizer.

Open Build ModeImport ExampleLearn Basics

What is Quantum Circuit Composer?

The KUQCI Circuit Visualizer Composer is a graphical quantum programming workspace inspired by IBM Quantum Composer. Drag and drop operations to build quantum circuits, visualize qubit states live, and automatically generate multi-language code.

Tour of the interface

  • Operations catalog — building blocks grouped by color. Search, grid/list view, and hover for gate definitions.
  • Code editor — right panel with live Qiskit code that syncs bidirectionally with the canvas.
  • Graphical circuit editor — drag gates onto qubit wires. Select a gate for the action bar (info, copy, move, delete).
  • Toolbar — undo/redo, alignment modes, inspect mode with step-through controls.
  • Phase disks — optional visualization at each qubit wire end (single-qubit circuits). Toggle via View → Phase disks.
  • Visualizations — Probabilities, Q-sphere, Statevector, and Measurement histogram panels at the bottom. Configure via View → Panels.

Build your circuit

  • Drag gates from the Operations panel onto qubit wires.
  • Right-click the canvas to paste a copied gate.
  • Drag a placed gate to reposition it (or use the move handle on the action bar).
  • Use Edit → Manage registers to set qubit and classical bit counts.
  • Choose alignment: Freeform, Left alignment, or Layers alignment (View → Alignment).
  • Name your circuit by editing the title in the top toolbar.
  • Save via File → Save file (stored locally in your browser).

Inspect mode

Toggle Inspect in the canvas toolbar to step through circuit layers one at a time. Use the forward/back buttons to see how the quantum state evolves. While inspect mode is active, you cannot add new gates. Visualizations update to show the state after each layer.

Visualizations

  • Probabilities — bar chart of measurement outcome percentages (up to 8 qubits in IBM; we simulate up to 6).
  • Q-sphere — global view of the quantum state on a sphere (ignores measurements during simulation).
  • Statevector — table view with real/imaginary amplitudes, phase, and probability; toggle to bar chart.
  • Measurement histogram — shot counts after running the circuit on the local simulator.
  • Live visualizations (Probabilities, Q-sphere, Statevector) use a client-side statevector simulator and ignore measurement operations, matching IBM Composer behavior.

Supported gates

H, X, Y, Z, I, √X, √X†, S, S†, T, T†, P, RX, RY, RZ, U, CX, CZ, SWAP, RXX, RZZ, CCX, RCCX, RC3X, Measure, Reset, and Barrier. Hover any gate in the catalog for its Qiskit example and description.

Run on simulator

Click Run circuit in the toolbar to open the run dialog. Pick Simulator, set the number of shots (1–8192) and a noise level, and press Run. The most common results and a histogram appear in the dialog and in the Measurement Results panel. Pick IBM Quantum to export Qiskit Runtime code and run it with your IBM Quantum account.

Quick start

1. Open the Composer editor.

2. Drag an H gate onto q[0], then a CX from q[0] to q[1].

3. Watch the Probabilities and Q-sphere panels update live.

4. Edit the Qiskit code on the right — changes sync to the canvas.

5. Save your project or export Qiskit code via Run circuit.