[{"data":1,"prerenderedAt":351},["ShallowReactive",2],{"blog-post-docs\u002Fjs-qiskit-projects":3,"sibling-dives-docs\u002Fjs-qiskit-projects":349,"learn-track-docs\u002Fjs-qiskit-projects":350},{"id":4,"title":5,"authors":6,"body":7,"breadcrumb":6,"builders":6,"byline":6,"category":333,"categoryName":334,"challenge":6,"courseAuthor":6,"courseLead":6,"dek":6,"description":335,"draft":336,"extension":337,"eyebrow":6,"featured":336,"finish":6,"fork":6,"hero":6,"heroAlt":6,"heroCta":6,"heroImage":6,"homepageFeatured":336,"kind":338,"lessonCount":6,"meta":339,"navigation":192,"newsItems":6,"next":6,"ogImage":6,"order":208,"outcomes":6,"path":340,"publishDate":341,"readingTime":6,"related":342,"relatedProjects":6,"seo":343,"stem":346,"tags":347,"track":6,"trackName":6,"__hash__":348},"blog\u002Fblog\u002Flearn\u002Fdocs\u002Fjs-qiskit-projects.md","JS \u002F Qiskit projects",null,{"type":8,"value":9,"toc":326},"minimark",[10,25,30,49,56,60,63,167,171,275,279,300,304,322],[11,12,13,14,18,19,24],"p",{},"The ",[15,16,17],"strong",{},"JS \u002F Qiskit"," framework is Qollab's path for interactive, visual quantum projects. You write JavaScript that calls the Qiskit API, and you render the results into your own HTML and CSS. It runs entirely in the browser, in a sandboxed iframe. This is the framework to choose when you want a widget, an animation, or a custom chart rather than plain text output. For standard, textual quantum work, use ",[20,21,23],"a",{"href":22},"\u002Flearn\u002Fdocs\u002Fpython-qiskit-projects","Python \u002F Qiskit"," instead.",[26,27,29],"h2",{"id":28},"the-editor","The editor",[11,31,32,33,36,37,40,41,44,45,48],{},"A JS \u002F Qiskit project has four panes: ",[15,34,35],{},"JS",", ",[15,38,39],{},"HTML",", and ",[15,42,43],{},"CSS",", plus a live ",[15,46,47],{},"Preview",". Your HTML and CSS define the surface your results are drawn onto; your JavaScript runs the circuit and updates that surface.",[50,51],"blog-figure",{"alt":52,"caption":53,"no":54,"src":55},"A JS\u002FQiskit project with four panes: JavaScript, HTML, CSS, and a live preview.","A JS\u002FQiskit project: JavaScript, HTML, CSS, and a live preview.","","\u002F_content\u002Fimages\u002Fdocs\u002Fjs-qiskit.webp",[26,57,59],{"id":58},"the-api","The API",[11,61,62],{},"Under the hood this is the Python Qiskit 2.x API made available to JavaScript, so it looks close to Python with a few conventions worth knowing.",[64,65,66,85,105,121,136],"ul",{},[67,68,69,77,78,81,82,76],"li",{},[15,70,71,72,76],{},"Import from ",[73,74,75],"code",{},"qiskit","."," For example ",[73,79,80],{},"import { QuantumCircuit } from 'qiskit'",", or ",[73,83,84],{},"import { JobStatus } from 'qiskit.providers.jobstatus'",[67,86,87,93,94,97,98,101,102,76],{},[15,88,89,90,76],{},"No ",[73,91,92],{},"new"," Create objects by calling the constructor directly, just like Python: ",[73,95,96],{},"const circuit = QuantumCircuit(2, 2)",". Methods match Qiskit too, such as ",[73,99,100],{},"circuit.h(0)"," and ",[73,103,104],{},"circuit.measure([0, 1], [0, 1])",[67,106,107,113,114,117,118,76],{},[15,108,109,110,76],{},"Named arguments use ",[73,111,112],{},".callKwargs"," Where Python takes keyword arguments, pass them as a trailing object through ",[73,115,116],{},"callKwargs",": ",[73,119,120],{},"circuit.draw.callKwargs({ output: 'mpl' })",[67,122,123,129,130,132,133,76],{},[15,124,125,126,76],{},"Unpack Python values with ",[73,127,128],{},".toJs()"," Return values arrive as proxies to Python objects. Call ",[73,131,128],{}," to use one as plain JavaScript data, for example ",[73,134,135],{},"result.get_counts().toJs()",[67,137,138,144,145,148,149,152,153,156,157,160,161,101,164,76],{},[15,139,140,143],{},[73,141,142],{},"backend"," is pre-created, and running is async."," Submit with ",[73,146,147],{},"const job = await backend.run(circuit, { shots: 100 })",". The code runs in an async context, so top-level ",[73,150,151],{},"await"," works, and the injected ",[73,154,155],{},"setTimeout"," returns a promise you can await while polling ",[73,158,159],{},"job.status()"," against ",[73,162,163],{},"JobStatus.DONE",[73,165,166],{},"JobStatus.ERROR",[26,168,170],{"id":169},"a-minimal-example","A minimal example",[172,173,177],"pre",{"className":174,"code":175,"language":176,"meta":54,"style":54},"language-js shiki shiki-themes one-dark-pro","import { QuantumCircuit } from 'qiskit';\n\n\u002F\u002F No `new`: call the constructor like the Python API\nconst circuit = QuantumCircuit(2, 2);\ncircuit.h(0);\ncircuit.cx(0, 1);\ncircuit.measure([0, 1], [0, 1]);\n\n\u002F\u002F `backend` is pre-created; run() is async and returns a job\nconst job = await backend.run(circuit, { shots: 100 });\n\n\u002F\u002F Python objects come back as proxies; .toJs() unpacks them\nconst counts = (await job.result()).get_counts().toJs();\n\n\u002F\u002F Render into the HTML you defined\ndocument.getElementById('legend').textContent = JSON.stringify(counts);\n","js",[73,178,179,187,194,200,206,212,218,224,229,235,241,246,252,258,263,269],{"__ignoreMap":54},[180,181,184],"span",{"class":182,"line":183},"line",1,[180,185,186],{},"import { QuantumCircuit } from 'qiskit';\n",[180,188,190],{"class":182,"line":189},2,[180,191,193],{"emptyLinePlaceholder":192},true,"\n",[180,195,197],{"class":182,"line":196},3,[180,198,199],{},"\u002F\u002F No `new`: call the constructor like the Python API\n",[180,201,203],{"class":182,"line":202},4,[180,204,205],{},"const circuit = QuantumCircuit(2, 2);\n",[180,207,209],{"class":182,"line":208},5,[180,210,211],{},"circuit.h(0);\n",[180,213,215],{"class":182,"line":214},6,[180,216,217],{},"circuit.cx(0, 1);\n",[180,219,221],{"class":182,"line":220},7,[180,222,223],{},"circuit.measure([0, 1], [0, 1]);\n",[180,225,227],{"class":182,"line":226},8,[180,228,193],{"emptyLinePlaceholder":192},[180,230,232],{"class":182,"line":231},9,[180,233,234],{},"\u002F\u002F `backend` is pre-created; run() is async and returns a job\n",[180,236,238],{"class":182,"line":237},10,[180,239,240],{},"const job = await backend.run(circuit, { shots: 100 });\n",[180,242,244],{"class":182,"line":243},11,[180,245,193],{"emptyLinePlaceholder":192},[180,247,249],{"class":182,"line":248},12,[180,250,251],{},"\u002F\u002F Python objects come back as proxies; .toJs() unpacks them\n",[180,253,255],{"class":182,"line":254},13,[180,256,257],{},"const counts = (await job.result()).get_counts().toJs();\n",[180,259,261],{"class":182,"line":260},14,[180,262,193],{"emptyLinePlaceholder":192},[180,264,266],{"class":182,"line":265},15,[180,267,268],{},"\u002F\u002F Render into the HTML you defined\n",[180,270,272],{"class":182,"line":271},16,[180,273,274],{},"document.getElementById('legend').textContent = JSON.stringify(counts);\n",[26,276,278],{"id":277},"drawing-circuits","Drawing circuits",[11,280,281,283,284,287,288,292,293,296,297,76],{},[73,282,120],{}," returns an image blob, but it needs the ",[15,285,286],{},"Qiskit Visualizations"," extra feature turned on first, from the ",[20,289,291],{"href":290},"\u002Flearn\u002Fdocs\u002Fruntime-environment","Extra runtime features \u002F libraries"," control. From there, ",[73,294,295],{},"URL.createObjectURL(blob)"," gives you a URL you can drop into an ",[73,298,299],{},"\u003Cimg>",[26,301,303],{"id":302},"related","Related",[64,305,306,311,316],{},[67,307,308],{},[20,309,310],{"href":22},"Python \u002F Qiskit projects",[67,312,313],{},[20,314,315],{"href":290},"The runtime environment",[67,317,318],{},[20,319,321],{"href":320},"\u002Flearn\u002Fdocs\u002Frun-your-code","Running your code",[323,324,325],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":54,"searchDepth":189,"depth":189,"links":327},[328,329,330,331,332],{"id":28,"depth":189,"text":29},{"id":58,"depth":189,"text":59},{"id":169,"depth":189,"text":170},{"id":277,"depth":189,"text":278},{"id":302,"depth":189,"text":303},"running-code","Running code","Build interactive, visual quantum projects in JavaScript: the Qiskit API in the browser, with your own HTML and CSS for output.",false,"md","doc",{},"\u002Fblog\u002Flearn\u002Fdocs\u002Fjs-qiskit-projects","2026-09-05",[],{"title":344,"description":345},"JS \u002F Qiskit projects · Qollab docs","How the JS\u002FQiskit framework works on Qollab: the Qiskit API in JavaScript, calling conventions, the pre-created backend, and rendering results to the DOM.","blog\u002Flearn\u002Fdocs\u002Fjs-qiskit-projects",[],"xG70TXI7xYcNr2VQ68Df14Y3MqcPi14qHCK-sZ9YwRg",[],[],1788731751604]