Learning quantum computing usually means jumping between a textbook, a Jupyter notebook, and a separate simulator just to see what a circuit actually does. QisLearn puts all three in one place: a lesson, a code editor, and a live visualization, running entirely in the browser.
What is QisLearn
QisLearn is a browser-based, interactive course for learning quantum computing with Qiskit. It walks through the subject from “what is a qubit” up through entanglement, phase kickback, oracles, and algorithms like Deutsch-Jozsa, Grover’s, quantum phase estimation, and Shor’s algorithm. There is no backend and no server-side Python: lessons, your progress, and the code you write all live in your browser.
Try it at qislearn.nepcodex.com, or read the source on GitHub at github.com/kriss-u/QisLearn.
How a lesson works
Each lesson mixes reading (with proper LaTeX rendering for the math) with three interactive pieces:
- Code exercises in a real editor, CodeMirror 6 with Python syntax highlighting, where you write Qiskit-style code to build a circuit
- Visualizations driven by a small in-browser statevector simulator: circuit diagrams, a scrubber to step through gate-by-gate state evolution, a 3D Bloch sphere, state amplitude charts, and measurement probability bars
- Quizzes with explanations, to check understanding along the way
Your code and progress are saved locally via Dexie/IndexedDB as you go, so closing the tab and coming back later picks up right where you left off.
Checking circuits without running Python
The interesting engineering problem in QisLearn is grading a learner’s code without a Python runtime. Rather than shipping Pyodide or shelling out to a server, QisLearn parses the Qiskit-style code you write with py-ast, a TypeScript Python parser, and statically extracts the circuit you built: which gates, on which qubits, in what order.
That extraction handles the same patterns real Qiskit code does: building a
circuit directly with QuantumCircuit(n) or through explicit
QuantumRegister/ClassicalRegister objects, both qc.h(0) and
qc.append(HGate(), [0]) gate styles, broadcast application like
qc.h([0, 1, 2]), and .measure() in its various forms. It also catches the
mistakes real Qiskit would refuse to run, like an out-of-range qubit index or
a circuit referenced before it’s defined, and reports them the way Python
itself would.
The extracted circuit is then compared against what the exercise expects, so feedback is based on what your code actually does, not a brittle string match against sample solutions.
Visualizing the quantum state
Once a circuit is built, whether from a finished exercise or a fixed example embedded in the lesson, QisLearn runs it through a hand-rolled statevector simulator and shows the result several ways: a Bloch sphere for single-qubit intuition, amplitude bar charts for the full state, and probability bars for measurement outcomes. A gate-by-gate scrubber lets you step through the circuit’s evolution one gate at a time instead of only seeing the final state.
All of this respects Qiskit’s own little-endian qubit ordering, so what you see in QisLearn matches what you’d get running the same circuit in real Qiskit.
Tech stack
TypeScript · React 19 · Vite · Chakra UI v3 · Dexie (IndexedDB) · CodeMirror 6
· py-ast for static Python parsing · three.js / react-three-fiber for the
Bloch sphere · Plotly for amplitude charts · zustand · zod
Try it yourself
Head to qislearn.nepcodex.com and start with the first lesson on qubits. If you want to look under the hood or contribute a lesson, the source is on GitHub.
