Grok the Bloch Sphere (Instructions Below | View Javascript)

|ψ> = i |0> + i |1> * Normalized

|ψ> = i |0> + i |1> * Normalized


* π /

Q# ( Show All )
LittleEndian BigEndian Bitstring

This is a basic two qubit Bloch diagram visualization and manipulation tool written entirely in Javascript. It will generate Q# code (shown above) that can be directly compiled and ran in Microsoft's suite of Q# tools. The general idea is to select one of the two qubits and apply either single bit gates (the first two rows of gates) or two bit gates (the third row of gates). Note that as soon as you use a two bit gate, the qubits become entangled and the Bloch visualization no longer applies (nor do the individual qubit vectors).

It is certainly not the purpose of this demo to explain all (or any) of the intricacies of quantum programming. However, a list of references that were used to build it are listed below. In addition, Q# is not actually being run on the server (or client) as the mathematics is all implemented in Javascript (which can be viewed via the link above) so there may be some discrepancies that have not been caught. Please send a note on the contact page if you find one, it would be greatly appreciated.

Sample Walkthrough:

  • Select the first qubit (i.e. click on the first sphere)
  • Click the X gate
  • Select the second qubit
  • Click the X gate
  • Select the first qubit again
  • Click the H gate (placing the first qubit into a superposition of |0> and |1>)
  • Click the CNOT gate (entangling the two qubits via the Controlled Not gate)
  • View the generated Q#, check "Show All" to view the boilerplate.

Implementation notes:

  • By default, the Q# DumpMachine function produces labels in LittleEndian format. This is a little strange because intuitively (and the way all the standard matrices work) you would expect "01" to be labeled state |1>. To verify results against DumpMachine, you can switch to LittleEndian but it makes more logical sense (and follows textbooks more accurately) if you use BigEndian or Bitstring.
  • The next step for this little demo is to add measurement functionality, but this is just designed to be an educational tool for learning the complex concepts behind quantum computing. If there's something particularly interesting you'd like to see, please use the contact page to reach out.


  • Bernhardt, C. (2019). Quantum Computing for Everyone. Cambridge, MA: The MIT Press.
  • Hidary, J.D. (2019). Quantum Computing: An Applied Approach. Zurich, Switzerland: Springer Nature Switzerland AG.
  • Lipton, R.J., & Regan, K.W. (2014). Quantum Algorithms via Linear Algebra. Cambridge, MA: The MIT Press.
  • Rieffel, E., & Polak, W. (2011). Quantum Computing: A Gentle Introduction. Cambridge, MA: The MIT Press.
  • Wojcieszyn, F. (2022). Introduction to Quantum Computing with Q# and QDK. Zurich, Switzerland: Springer Nature Switzerland AG.
  • Yanofsky, N.S., & Mannucci, M.A. (2021). Quantum Computing for Computer Scientists. Cambridge, UK: Cambridge University Press.