Finally understand quantum computing by running real experiments in your browser.

A browser-based quantum computing concepts IDE for self-taught learners and JavaScript developers. Start with hands-on experiments today and grow toward real JavaScript-to-quantum projects in the future.

Create your free account
No installation · In-browser simulator · No special hardware

The problem with learning quantum on your own

If you’re trying to learn quantum computing by yourself, you’ve probably hit a wall. Videos feel abstract, textbooks stay in the math, and many tools assume you’re already an expert. You don’t just want more theory, you want a place to actually experiment, break things, and see what really happens. Without that kind of playground, quantum computing can stay confusing and distant. Many people can give up before they ever see a single circuit run.

Why I built Qubit IDE

When I first started learning quantum computing, I ran into the same problems. A lot of things were theory-heavy and setup was painful. I wanted to try ideas quickly in a language I already prefer to use, JavaScript, and see circuits run right in the browser. I also wanted to integrate quantum computing into real web based applications using JavaScript in the future. So I built Qubit IDE, a browser-based, JavaScript-friendly quantum playground where you can finally experiment first and let the concepts become intuitive as you interact with them. The JavaScript code runs on an in-browser simulator today, and the circuits you create are hardware-ready for the future.

Get started in three steps

1. Create your free account – no credit card, no special hardware.

2. Build your first circuit using the low-code node editor or JavaScript.

3. Run the experiment in your browser and explore the results.

Learn now, build real JS-to-quantum projects later

Today, Qubit IDE is your lab. You run things in the browser on a simulator, so you can learn and prototype without worrying about hardware, cloud accounts, or configuration. Under the hood, your work compiles to a quantum hardware-ready language called OpenQASM 3. That means the circuits and ideas you develop now can be reused when you’re ready to plug into real quantum devices and production workflows from your JavaScript projects. You can keep quantum computing as something abstract that never quite clicks, or you can start running real experiments, gaining intuition, and preparing for the moment when quantum hardware becomes part of everyday software.

Create your free account
Start experimenting in minutes · Designed for learners and builders

Try the IDE

Verbose Mode

Don’t worry if the code looks intense. You can start with simple node-based experiments and learn as you go.

// --- Auto-generated config (do not edit) ---
const { Std, runLocal, toOpenQASM3, Limits } = q
const MAXCUT_SCHEMA_VERSION = 1;
const PROBLEM = "portfolio";
const NODES = [
 {"label":"Company C","group":"Stocks","include":true,"notes":"","attrs":{"number":{"value":20,"unit":"USD"}}},
 {"label":"Company B","group":"Stocks","include":true,"notes":"","attrs":{"number":{"value":10,"unit":"USD"}}},
 {"label":"Company A","group":"Stocks","include":true,"notes":"","attrs":{"number":{"value":9,"unit":"USD"}}},
 {"label":"Infrastructure Bond B","group":"Bonds","include":true,"notes":"","attrs":{"number":{"value":9,"unit":"USD"}}},
 {"label":"Infrastructure Bond A","group":"Bonds","include":true,"notes":"","attrs":{"number":{"value":20,"unit":"USD"}}},
 {"label":"Soybean Futures","group":"Futures","include":true,"notes":"","attrs":{"number":{"value":1,"unit":"USD"}}},
];
const PORTFOLIO_PARAMS = { K: 4, lambda: 1.000000, A: 5.000000 };
const MU = [1.15777600, -0.20431341, -0.34052235, -0.34052235, 1.15777600, -1.43019388]; // only for included nodes
const SIGMA = [
 [0.00100000, 0.00000000, 0.00000000, 0.00000000, 0.00000000, 0.00000000],
 [0.00000000, 0.00100000, 0.00000000, 0.00000000, 0.00000000, 0.00000000],
 [0.00000000, 0.00000000, 0.00100000, 0.00000000, 0.00000000, 0.00000000],
 [0.00000000, 0.00000000, 0.00000000, 0.00100000, 0.00000000, 0.00000000],
 [0.00000000, 0.00000000, 0.00000000, 0.00000000, 0.00100000, 0.00000000],
 [0.00000000, 0.00000000, 0.00000000, 0.00000000, 0.00000000, 0.00100000],
];
const H_H = [9.42161200, 5.10265671, 0.17076118, -4.82923882, -10.57838800, -14.28440306]; // Ising linear terms (aligned to NODES array; zero for excluded)
const H_J = [
 [1.25025000, 2.50000000, 2.50000000, 2.50000000, 2.50000000, 2.50000000],
 [0.00000000, 1.25025000, 2.50000000, 2.50000000, 2.50000000, 2.50000000],
 [0.00000000, 0.00000000, 1.25025000, 2.50000000, 2.50000000, 2.50000000],
 [0.00000000, 0.00000000, 0.00000000, 1.25025000, 2.50000000, 2.50000000],
 [0.00000000, 0.00000000, 0.00000000, 0.00000000, 1.25025000, 2.50000000],
 [0.00000000, 0.00000000, 0.00000000, 0.00000000, 0.00000000, 1.25025000],
];
// --- End auto-generated ---
// --- Glue: UI (NODES/CORR) -> solver weights (W) ---
const __keep = NODES.map((n, i) => ({i, n})).filter(x => x.n && x.n.include !== false);
const LABELS = __keep.map(x => x.n.label);
const GROUPS = __keep.map(x => (x.n.group || ''));
const __index = __keep.map(x => x.i);
const nQ = __index.length;
let W = Array.from({length:nQ}, ()=>Array(nQ).fill(0));
if (typeof PROBLEM !== 'undefined' && PROBLEM !== 'portfolio') {
 if (Array.isArray(CORR) && CORR.length) {
 for (let ui=0; ui<nQ; ui++) for (let vi=0; vi<nQ; vi++) {
 const u = __index[ui], v = __index[vi];
 const c = (CORR[u] && CORR[u][v] != null) ? CORR[u][v] : 0;
 W[ui][vi] = +c; // keep sign
 }
 // Symmetrize and clear diagonal
 for (let ui = 0; ui < nQ; ui++) {
 for (let vi = ui + 1; vi < nQ; vi++) {
 const s = 0.5 * (W[ui][vi] + W[vi][ui]);
 W[ui][vi] = W[vi][ui] = s;
 }
 W[ui][ui] = 0;
 }
 }
}
// --- End Glue ---

// === Auto Run Block (decoder disabled; includes Executive Summary & QASM annotations) ===
(() => {
  try {
    if (typeof PROBLEM === 'undefined') { console.error('Missing PROBLEM in header.'); return; }

const keep = NODES.map((n,i)=>({n,i})).filter(x => x.n && x.n.include !== false);
 const mapUI = keep.map(x=>x.i);
 const n = keep.length;
 if (n <= 0) { console.error('Run: no included nodes.'); return; }

q.Limits.assertQubitsAllowed(n);

let HH = null;
    let HJ = null;

const p = 4;
    const baseShots = 512;
    const seed  = 42;
    const topK  = 10;

const __OPTIMIZE = {
      enabled: (typeof document!=='undefined' && document.getElementById('opt-angles')?.checked) || false,
      passes:  (typeof document!=='undefined' && parseInt(document.getElementById('opt-budget')?.value||'1',10)) || 1
    };

if (PROBLEM === 'portfolio') {
 HH = Array.from({length:n}, (_,ui)=> H_H[mapUI[ui]] || 0);
 HJ = Array.from({length:n}, ()=>Array(n).fill(0));
 for (let ui=0; ui<n; ui++){
 for (let vi=0; vi<n; vi++){
 HJ[ui][vi] = (H_J[mapUI[ui]] && H_J[mapUI[ui]][mapUI[vi]] != null) ? +H_J[mapUI[ui]][mapUI[vi]] : 0;
 }
 }
 }

function buildCircuit(gammas, betas) {
  let circuit = [];
  circuit = plus(circuit); // H on all qubits

const EPS = 1e-12; // numerical zero threshold

if (PROBLEM !== 'portfolio') {
 // Max-Cut: include edges for which |W| > EPS (signed weights allowed)
 const ZZL = [];
 for (let ui = 0; ui < n; ui++) {
 for (let vi = ui + 1; vi < n; vi++) {
 const w = (W[ui][vi] != null) ? W[ui][vi] : 0;
 if (Math.abs(w) > EPS) {
 // choose w_half = w/2 so the realized angle θ = gamma * W
 ZZL.push({ u: ui, v: vi, w: w / 2 });
 }
 }
 }
 for (let l = 0; l < gammas.length; l++) {
 for (const { u, v, w } of ZZL) {
 circuit = zz(circuit, u, v, w, gammas[l]); // CX → RZ(2*γ*w)@v → CX
 }
 circuit = mixer(circuit, betas[l]); // RX(2*β) on all qubits
 }
 } else {
 // Portfolio: pairwise HJ and single-qubit HH terms
 const ZZL = [];
 for (let u = 0; u < n; u++) {
 for (let v = u + 1; v < n; v++) {
 const w = (HJ[u][v] != null) ? HJ[u][v] : 0;
 if (Math.abs(w) > EPS) ZZL.push({ u, v, w }); // θ_ZZ = 2*γ*w
 }
 }
 for (let l = 0; l < gammas.length; l++) {
 for (const { u, v, w } of ZZL) {
 circuit = zz(circuit, u, v, w, gammas[l]);
 }
 for (let qid = 0; qid < n; qid++) {
 const h = (HH[qid] != null) ? HH[qid] : 0;
 if (Math.abs(h) > EPS) circuit = z(circuit, qid, h, gammas[l]); // θ_Z = 2*γ*h
 }
 circuit = mixer(circuit, betas[l]);
 }
 }

// Measurement
  const t = Array.from({ length: n }, (_, i) => i);
  const into = t.map(i => 'c' + i);
  circuit = q.Std.append(circuit, q.Std.Measure(t, into));
  return circuit;
}

function baseAngles(){
      const gammas = Array.from({length:p}, (_,l)=> 0.7/(1+0.15*l));
      const betas  = Array.from({length:p}, (_,l)=> 0.35/(1+0.10*l));
      return { gammas, betas };
    }

function sampleOnce(gammas, betas, shots=baseShots){
      const circ = buildCircuit(gammas, betas);
      return q.runLocal(circ, { nQubits:n, mode:'sample', shots, prngSeed:seed });
    }

let best = baseAngles();
    if (__OPTIMIZE.enabled) {
      const gScale = [0.6, 1.0, 1.4];
      const bScale = [0.6, 1.0, 1.4];
      const smallShots = Math.max(128, Math.floor(baseShots/4));

const out = sampleOnce(best.gammas, best.betas, baseShots);

console.log('Run['+PROBLEM+']: n='+n+', p='+p+', shots='+baseShots+(__OPTIMIZE.enabled?' (opt)':''));
    for (const r of rows.slice(0, 10)) {
      if (PROBLEM!=='portfolio') console.log('p='+r.p.toFixed(3)+' cut='+r.score.toFixed(3)+' bits='+r.bits);
      else                       console.log('p='+r.p.toFixed(3)+' energy='+r.score.toFixed(6)+' bits='+r.bits);
    }

(function renderExecutiveSummary(){
      const el = document.getElementById('exec-summary');
      if (!el) return;

const mode = (document.getElementById('problem-mode')?.value || 'maxcut');
      const L = (typeof LABELS !== 'undefined') ? LABELS.slice(0, n) : Array.from({length:n}, (_,i)=>'q'+i);
      const G = (typeof GROUPS !== 'undefined') ? GROUPS.slice(0, n) : Array.from({length:n}, ()=>'');

if (!rows.length) { el.textContent = 'No recommendation available.'; return; }
      const best = rows[0];

function fmtListSimple(arr){
        return arr.map(function(x){
          return x.group ? '[' + x.group + '] ' + x.label : x.label;
        }).join(', ') || '(none)';
      }

if (mode === 'portfolio') {
 const selected = [];
 for (let i=0;i<n;i++) if (best.bits[n-1-i]==='1') selected.push({ label: L[i], group: G[i] });
 const K = (typeof PORTFOLIO_PARAMS!=='undefined' && PORTFOLIO_PARAMS.K) ? PORTFOLIO_PARAMS.K : null;
 const lambda = (typeof PORTFOLIO_PARAMS!=='undefined' && PORTFOLIO_PARAMS.lambda) ? PORTFOLIO_PARAMS.lambda : null;

el.innerHTML = 'Recommendation: Consider Investing in ' +
 fmtListSimple(selected) +
 (K ? (' (target K=' + K + ')') : '') +
 (lambda!=null ? ('; risk preference λ=' + Number(lambda).toFixed(2)) : '');
 return;
 }

// Max-Cut style problems: output ONE clear instruction plus compact split
 const A=[],B=[];
 for (let i=0;i<n;i++) { (best.bits[n-1-i]==='1'?B:A).push({ label:L[i], group:G[i] }); }
 const a = fmtListSimple(A), b = fmtListSimple(B);

const headline =
        (mode === 'stationary-obj') ? 'Place nearby/similar locations on opposite routes/zones to minimize overlap.' :
        (mode === 'supply-risk')    ? 'Separate correlated suppliers into distinct lanes to reduce joint outage risk.' :
        (mode === 'demand-div')     ? 'Split products to reduce demand cannibalization and category overlap.' :
                                      'Separate highly related items to reduce overlap/conflict.';

el.innerHTML = 'Recommendation: ' + headline +
 ' Use split: A | ' + a + '   ||   B | ' + b;
 })();

if (rows[0]) {
 if (PROBLEM!=='portfolio') {
 const A=[],B=[];
 for (let i=0;i<n;i++) (rows[0].bits[n-1-i]==='1'?B:A).push(LABELS[i]);
 console.log('Best (max cut): cut='+rows[0].score.toFixed(3)+' | A: '+A.join(', ')+' | B: '+B.join(', '));
 } else {
 const chosen = [];
 for (let i=0;i<n;i++) if (rows[0].bits[n-1-i]==='1') chosen.push(LABELS[i]);
 console.log('Best (min energy): E='+rows[0].score.toFixed(6)+' | Selected: '+chosen.join(', '));
 }
 }

if (typeof QASM !== 'undefined') {
 const raw = q.toOpenQASM3(buildCircuit(best.gammas, best.betas), { nQubits: n });
 const ann = (typeof GROUPS!=='undefined' && typeof LABELS!=='undefined')
 ? (function(qasm){
 try { return (window.__annotateQASM || (()=>qasm))(qasm, LABELS, GROUPS); } catch { return qasm; }
 })(raw)
 : raw;
 QASM.set(ann);
 }
 } catch (err) {
 console.error('[Run] error:', err?.message || err);
 if (typeof window!=='undefined'){ document.getElementById('exec-summary').innerHTML = 'Run error.'; }
 }
})();
// === End Auto Run Block ===

Ready.

Output

Ready.