Circuit Step

A column representing a single step in a quantum circuit.

The circuit step is a component that represents each computational step of a quantum circuit. Each step has a circuit dropzone equal to the number of qubits, and each circuit dropzone can hold a quantum gate or display. On large screens, the circuit steps are stacked horizontally to the right, and on mobile devices, they are stacked vertically downward.

Step #0

Step #1

Step #2

Step #3

Step #4

<quantum-circuit>
  <!-- STEP #0 -->
  <circuit-step> ... </circuit-step>
  <!-- STEP #1 -->
  <circuit-step> ... </circuit-step>
  <!-- STEP #2 -->
  <circuit-step> ... </circuit-step>
  <!-- STEP #3 -->
  <circuit-step> ... </circuit-step>
  <!-- STEP #4 -->
  <circuit-step> ... </circuit-step>
</quantum-circuit>

JavaScript API

When rendering a circuit with the JavaScript API, you do not need to be aware of the placement of the circuit step component; each call to .write() or .h() etc. in the JavaScript API will automatically insert the necessary <circuit-step> tags. The size of the inserted circuit step (i.e., the number of quantum bits) is also automatically set.

<quantum-circuit id="js-example"></quantum-circuit>

<script>
  window.addEventListener('DOMContentLoaded', () => {
    circuit = document.getElementById("js-example")
    circuit.write(0, 0).write(0, 1).write(0, 2)
  })
</script>

JSON API

In the JSON API, you need to explicitly specify the quantum gate in each circuit step. If no gate is placed, an Identity gate (represented by "1") must be set.

<quantum-circuit data-json="{&quot;cols&quot;:[[&quot;|0>&quot;,1,1],[1,&quot;|0>&quot;,1],[1,1,&quot;|0>&quot;]]}">
</quantum-circuit>

When creating a multi-gate with two or more gates connected, such as CNOT or CPHASE, the connections between the gates are automatically rendered. For example, to create a CNOT gate, just put a single control gate and an X gate in the same step.

<quantum-circuit data-json="{&quot;cols&quot;:[[&quot;|0>&quot;,&quot;|0>&quot;,&quot;|0>&quot;],[&quot;H&quot;,1,1],[&quot;•&quot;,&quot;X&quot;,1],[&quot;•&quot;,&quot;•&quot;,&quot;X&quot;]]}">
</quantum-circuit>

<quantum-circuit data-json="{&quot;cols&quot;:[[&quot;|0>&quot;,&quot;|0>&quot;,1],[1,1,&quot;|1>&quot;],[&quot;H&quot;,&quot;H&quot;,1],[&quot;P(π_4)&quot;,1,&quot;P(π_4)&quot;],[1,&quot;P(π_2)&quot;,&quot;P(π_2)&quot;]]}">
</quantum-circuit>

Raw HTML

To describe a circuit step in raw HTML, sandwich the circuit dropzone containing the gate between <circuit-step> ... </circuit-step>.

<quantum-circuit>
  <!-- STEP #0 -->
  <circuit-step>
    <circuit-dropzone>
      <write-gate></write-gate>
    </circuit-dropzone>
    <circuit-dropzone>
    </circuit-dropzone>
    <circuit-dropzone>
    </circuit-dropzone>
  </circuit-step>

  <!-- STEP #1 -->
  <circuit-step>
    <circuit-dropzone>
    </circuit-dropzone>
    <circuit-dropzone>
      <write-gate></write-gate>
    </circuit-dropzone>
    <circuit-dropzone>
    </circuit-dropzone>
  </circuit-step>

  <!-- STEP #2 -->
  <circuit-step>
    <circuit-dropzone>
    </circuit-dropzone>
    <circuit-dropzone>
    </circuit-dropzone>
    <circuit-dropzone>
      <write-gate></write-gate>
    </circuit-dropzone>
  </circuit-step>
</quantum-circuit>

As with the JSON API, gate-to-gate connections in multi-gates are automatically rendered.

<quantum-circuit>
  <circuit-step>
    <circuit-dropzone>
      <write-gate></write-gate>
    </circuit-dropzone>
    <circuit-dropzone>
      <write-gate></write-gate>
    </circuit-dropzone>
    <circuit-dropzone>
      <write-gate></write-gate>
    </circuit-dropzone>
  </circuit-step>

  <!-- CNOT gate -->
  <circuit-step>
    <circuit-dropzone>
      <control-gate></control-gate>
    </circuit-dropzone>
    <circuit-dropzone>
      <x-gate></x-gate>
    </circuit-dropzone>
    <circuit-dropzone>
    </circuit-dropzone>
  </circuit-step>

  <!-- CCNOT gate -->
  <circuit-step>
    <circuit-dropzone>
      <control-gate></control-gate>
    </circuit-dropzone>
    <circuit-dropzone>
      <control-gate></control-gate>
    </circuit-dropzone>
    <circuit-dropzone>
      <x-gate></x-gate>
    </circuit-dropzone>
  </circuit-step>
</quantum-circuit>