Quantum JavaScript (Q.js)

Q is a quantum circuit simulator, drag-and-drop circuit editor, and powerful JavaScript library that runs right here in your web browser. There’s nothing to install and nothing to configure, so jump right in and experiment. (Q recently celebrated our one-year anniversary. You can read the corresponding post on Medium, the discussion on Hacker News, and the thread on Reddit.)

Here’s your first quantum circuit—a Bell state. It uses superposition and entanglement to calculate. (And here’s how to make one yourself.) Tap and drag the tiles around to get a feel for the Q editor. It’s easy to use on both desktop and mobile devices. Made a mistake? Just tap the Undo button.

Live probability results

Edit the code above and watch the probability results update in realtime.

Free and open-source

Q is free to use, our code is open-source, and our API is heavily documented. Still a quantum novice? Each page of API documentation includes simple explanations of basic quantum concepts to get you up to speed quickly. This makes Q ideal for the classroom as well as autodidacts at home. Q just might be the most accessible quantum circuit suite in the world. Join our project on GitHub at https://github.com/stewdio/q.js and drop a link to Q’s website https://quantumjavascript.app on social media with the hashtag #Qjs. Let’s make quantum computing accessible!

Quantum JavaScript

What does coding a quantum circuit look like? Let’s recreate the above Bell state using three separate circuit authoring styles to demonstrate Q’s flexibility. For each of the three examples we’ll create a circuit that uses 2 qubit registers for 2 moments of time. We’ll place a Hadamard gate at moment 1 on register 1. Then we’ll place a Controlled-Not gate at moment 2, with its control component on register 1 and its target component on register 2.

1. Text as input

Q’s text-as-input feature directly converts your text into a functioning quantum circuit. Just type your operations out as if creating a text-only circuit diagram (using “I” for identity gates in the spots where no operations occur) and enclose your text block in backticks (instead of quotation marks). Note that parentheses are not required to invoke the function call when using backticks.

	H  X#0
	I  X#1
2. Python-inspired

Folks coming to Q from Python-based quantum suites may find this syntax more familiar. Here the Q function expects the number of qubit registers to use, followed by the number of moments to use. Afterward, each single-letter quantum gate label is also a function name. For these functions the first argument is a moment index and the second is a qubit register index or array of qubit register indices.

Q( 2, 2 )
	.h( 1, 1 )
	.x( 2, [ 1, 2 ])
3. Verbose for clarity

Under the hood, Q is making more verbose declarations. You can also make direct declarations like so. (And what are those dollar signs about?)

new Q.Circuit( 2, 2 )
	.set$( Q.Gate.HADAMARD, 1, 1 )
	.set$( Q.Gate.PAULI_X, 2, [ 1, 2 ])
More variations

There are many ways to build a quantum circuit with Q. What feels right for you? To learn more about Q’s text syntax and other convenience tricks, see “Writing quantum circuits.”

Clear, legible output

Whether you use Q’s drag-and-drop circuit editor interface, text syntax, Python-inspired syntax, or prefer to type out every set$ command yourself, Q makes inspecting and evaluating your circuits easy.

Let’s add two commands which could directly follow any of the three examples above. Hey—deciding what to name a circuit can sometimes be difficult, so we’ll let Q choose a random name for us. Then we’ll generate an outcome probabilities report. Just add the following two lines to any of the above examples:

.setName$( Q.getRandomName$ )

And that combination will yield something like the following:

Beginning evaluation for “Example”

         m1    m2   
r1  |0⟩─┤ H ├┤ X#0 │
r2  |0⟩───○──┤ X#1 │

██████████░░░░░░░░░░  50%   1 of 2
████████████████████ 100%   2 of 2

Evaluation completed for “Example”
with these results:

1  |00⟩  ██████████░░░░░░░░░░  50% chance
2  |01⟩  ░░░░░░░░░░░░░░░░░░░░   0% chance
3  |10⟩  ░░░░░░░░░░░░░░░░░░░░   0% chance
4  |11⟩  ██████████░░░░░░░░░░  50% chance

Open your JavaScript console

You don’t have to know a thing about quantum physics or JavaScript to launch your first qubit into superposition. If you’re on a desktop or laptop then everything you need is already right here in front of you. First, you must open your browser’s JavaScript console. (It’s a text window for sending JavaScript commands to your browser and receiving responses from your browser in return. You text your computer, it texts back.)

This handy chart shows you what key commands will open your JavaScript console. Are you on a Mac or a Windows machine? What web browser are you using? (If you’re on Linux, join this project on GitHub.)

  macOS Windows
Firefox K
Option Command K
Control Shift K
Chrome J
Option Command J
Control Shift I
Edge J
Option Command J
Safari C
Option Command C

Now that your JavaScript console is open, copy and paste the following line into it: (Note that those are backticks on either side of the H, rather than single quotation marks.)

Q`H`.try$() ? 'tails' : 'heads'

Did you try it? You just performed a quantum coin flip! Each time you run the above code there’s a 50% chance of landing on heads (0) and a 50% chance of landing on tails (1). Try it a few more times to see how random it feels. (Just tap your “up” arrow key in the JavaScript console to recall the last command you entered without having to type it or paste it again.) When you’re ready for more, give “Writing quantum circuits” a quick read.

Import and export

Q plays well with everyone. Export your circuits as plain text, ASCII diagrams, interactive graphic-user-interfaces, LaTeX code, and more! Visit the Q playground to experiment with converting circuits between various formats. As always, new features are in the works. Join our project on GitHub and help us build bridges to everywhere.