Build your first quantum circuit with Q’s simple drag-and-drop interface, write your circuit as a text diagram, or code it directly using Q’s flexible API. For advanced users, drop Q into your Jupyter Notebook and use it to drive real quantum hardware.
I didn’t know a thing about quantum computing. I’d heard bad pop-science metaphors about spooky cats and pizza bagels, but without a physics degree I was lost. And then I saw Andrew Helwer’s lecture, “Quantum computing for computer scientists”—titled after the book that inspired his approach. I began to wrap my head around the math of quantum circuits—what superposition and entanglement actually mean in terms of values and relationships, rather than hand-wavy metaphors. While the concepts were difficult, the math was simple enough that I was certain I could craft my own simulator with nothing more than some JavaScript and a web browser. In the spring of 2019, I published the first commit to the Q.js open-source code repository. Within a year I’d designed and coded Q’s drag-and-drop circuit composer interface, crafted the concept primers, and made a lot of new friends along the way.
The Quantum JavaScript (Q.js) website homepage, featuring the drag-and-drop circuit composer as well as the interactive JavaScript console feature.
For the love of learning
From the beginning, Q has been my personal passion project; a means of teaching myself what quantum computing is and how it works. That I taught myself some basics of quantum computing isn’t entirely notable—college students a fraction of my age can do that in a single semester. But I do take pride in having achieved a feat of strength; having laid each brick of Q on nights and weekends while working a day job and also being a parent. Not only did I learn the math, I coded the library and website, designed the interfaces, crafted the concept primers, documented the API, and so on. Q is a testament to how much I enjoy learning, creating, and sharing with others.
Sharing that desire to learn with the world has lead me to new friends and exciting collaborations. The Amazon Braket team granted me early access to an alpha version of their API. With that API in hand, I was able to add new features for injecting Q’s drag-and-drop interface into an Amazon Braket Jupyter Notebook, have Q’s interface output Braket commands in Python on the fly, and ultimately drive real quantum hardware through Amazon’s Cloud. I’ve also been fortunate to meet folks from Strangeworks, the Unitary Fund, and, of course, IBM—who recently partnered with Parsons School of Design on a quantum-inspired art exhibition in New York.
Yale quantum artwork
The most exciting collaboration to emerge from my interest in quantum computing has been my one-year artist residency at Yale University’s Quantum Institute (YQI). I still cannot fully comprehend how I was allowed into the building; able to ask naive questions of the world-renowned faculty, students, and researchers who would without fail, patiently attempt to translate their answers into concepts I could digest. Over the course of the 2022–2023 academic year, I would travel from New York to New Haven, meet with YQI folks, tour their labs, and use our conversations as inspiration for visual interventions—such as a cover for the latest YQI annual report, or a typeface inspired by the planning sessions for our outdoor exhibition with the International Festival of Arts & Ideas.
Our grand finale took the form of an outdoor installation on the New Haven Green in June of 2023, titled “Beneath the Green, the Quantum.” Our small forest of light beacons reacted to the movement of Green visitors traversing the space and utilized Yale’s latest research in quantum error correction (QEC)—a technology that is imperative in this current era of “noisy”, error-prone quantum computers. (Visit the “Beneath the Green” project entry here to learn more and to find a list of collaborators for this piece.)
Get started with Q.js
Whether you’re new to quantum computing, or an expert looking to kick the tires on a mobile-friendly drag-and-drop interface, it’s easy to dive into Q.
Web-powered
Because Q runs on the Web, there’s nothing to install and nothing to configure. (And nothing to sign up for.) Just by visiting the website, you’re already up and running. The drag-and-drop circuit editor makes creating quantum circuits a snap—even on touch screens. And on a desktop you can also pop open your browser’s JavaScript console to dig in further. Are you ready to try it out Q?
Learn as you go
Perhaps you’ve heard the term “quantum bit”—or “qubit” for short. But what is a qubit? Q’s website bakes basic concept primers right into the API documentation. For example, see the Qubit documentation page to learn how qubits are really just a pair of numbers that have a special relationship to each other. You don’t need a PhD degree to start having fun with quantum circuits.
Who doesn’t love representing qubits states on a Bloch Sphere? Play with the real interface here where you can also click and drag the sphere around to inspect from all angles.
Drag-and-drop
What does composing a quantum circuit look like? This screen capture demonstrates the creation of a Bell state using Q’s drag-and-drop interface. First we drop a Hadamard gate onto our circuit composer. (Its exact location doesn’t really matter as it’s trivial to subsequently drag it elsewhere.) In this recording I happened to drop our “H” tile onto Moment 3, Register 2 of our circuit.
Next we’re going to construct a “controlled gate”—a quantum logic gate that spans multiple registers (and thus requires multiple tiles). Specifically, we’re creating a “Controlled Not” gate by combining an “Identity cursor” (an abstraction invented specifically for the Q editor) with a Pauli X gate. We drag an Identity cursor (the blank dot) onto our circuit and place it on the same register as our Hadamard gate, but one moment further into the future (ie. one cell to the right of it). We then drag a Pauli X gate (the “X” tile) onto our board and place it on the same moment as our Identity cursor, but one register below. Now we select both the Identity cursor and Pauli X gates (you can do this by tapping on each on individually, or by tapping on the label for the Moment that contains both of them), then tap the “C” button to create the controlled gate. You’ll see that the Identity cursor and Pauli X gate are now connected together.
Finally, we select the entire circuit content and drag it to Moment 1, Register 1. (If so inclined, we could then trim the circuit board for tidiness such that it only spans 2 moments and 2 registers.) We now have our complete Bell State right at the starting corner of our board. Starting over is easy enough: Select the entire circuit content again and simply drag it off the board to remove it.
Code as you like
Now we can construct the same circuit as above 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. This will mirror the final state of our drag-and-drop circuit above.
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.
Q`
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.”
Mix code with clicks
One last (but important!) note on circuit creation: with Q it’s trivial to jump back and forth between a circuit’s code and its drag-and-drop interface. If a circuit has an interface in your web browser, then it’s also accessible from within your browser’s JavaScript console. Each time you edit your circuit using the graphic interface, those edits become immediately accessible from the console. And perhaps more exciting, any direct edits to the circuit’s code made in the console are immediately reflected in the graphic interface. You can fluidly switch back and forth to whatever medium has least cognitive overhead for you in that moment. Perhaps creating complex loops within algorithms will be easier to construct directly in code. But if you need to shift everything on register over, that’s so dead simple in the graphic interface. The choice is yours.
A good graphic user interface is never about “dumbing something down.” It’s about making tasks easier and more efficient for us and our strange primate mammal brains that have evolved with spacial awareness and sensitivity to visual patterns. See the section in the above video that begins at 4:02 and ends at 6:12 for a demonstration of Q’s interface fluidity between circuit composer, console, and back again.
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$ )
.evaluate$()
And that combination will yield something like the following:
Beginning evaluation for “Red Albatross”
m1 m2
┌───┐╭─────╮
r1 |0⟩─┤ H ├┤ X#0 │
└───┘╰──┬──╯
╭──┴──╮
r2 |0⟩───○──┤ X#1 │
╰─────╯
██████████░░░░░░░░░░ 50% Eval step 1 of 2
████████████████████ 100% Eval step 2 of 2
Evaluation completed for “Red Albatross”
with these results:
1 |00⟩ ██████████░░░░░░░░░░ 50% chance
2 |01⟩ ░░░░░░░░░░░░░░░░░░░░ 0% chance
3 |10⟩ ░░░░░░░░░░░░░░░░░░░░ 0% chance
4 |11⟩ ██████████░░░░░░░░░░ 50% chance
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. 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.
Addendum
It’s been four years and counting since Q’s first public code commit. When the pandemic hit, there was a lot of talk about healthy quarantiners now having time to pursue their passion projects; something about Newton upending physics—or at least people making sourdough starters. But if you had already been a remote worker like myself, and had children that were suddenly schooling from home during those work hours… Day life became dodging meetings to cook kid lunches and later manufacture some kind of school recess in our tiny strip of Brooklyn side yard. Night life became making up for what productivity had been lost during the day. Passion projects? Q hit a pandemic-sized brick wall right around its first birthday.
In these situations the best solution is to turn your hobby into your day job. (Funding!) I certainly got close. As an AWS employee my proximity to the Amazon Braket team enabled me to be in direct contact with various product leaders as well as Amazon’s Director of Quantum Technologies—who was very enthusiastic about (and repeatedly insisted on) integrating Q’s interface into Braket. And yet AWS can’t help but get in its own way; some internal rules against “certain teams providing labor for other teams” prevented me from officially working with Braket. I’d have to actually join the Braket team. (Which sounded just fine to me.)
My second quantum brick wall was constructed from Amazon’s absolute inability to think creatively or laterally. I advocated for myself as a potential Chief Experience Officer for Braket, but the very idea of such a role was incomputable to the business and engineering folks who didn’t understand why headcount that could be used for another physicist, engineer, or sales person would ever be allocated to someone concerned with … “experience.” In the next life, perhaps.
In the years since, Amazon has indeed continued to poke at Q. The above augmented interface represents an advanced branch of Q created by AWS and specifically geared for running within an Amazon Braket Jupyter Notebook. (They’ve had a blog post about this in the can for quite some time, but I’m starting to suspect it will never see the light of day.) In the meantime, should you wish to follow along you can download that JavaScript bundle here and the CSS bundle here. Load those into your Notebook and you’re off to the races. Aside from adding explicit support for more complex gates, a nice feature of this branch is that it reverses Q’s bit order so that the state vector results are consistent with other simulators and solves this particular issue with circuit editing.
Who knows what the future holds. But to me, it looks like the end of the road for Q.