[{"data":1,"prerenderedAt":1886},["ShallowReactive",2],{"blog-post-building-your-first-qollab-project\u002Frun-in-javascript":3,"sibling-dives-building-your-first-qollab-project\u002Frun-in-javascript":558,"learn-track-building-your-first-qollab-project\u002Frun-in-javascript":559},{"id":4,"title":5,"authors":6,"body":8,"breadcrumb":527,"builders":531,"byline":532,"category":534,"categoryName":534,"challenge":534,"courseAuthor":534,"courseLead":534,"dek":535,"description":536,"draft":537,"extension":538,"eyebrow":534,"featured":537,"finish":534,"fork":534,"hero":539,"heroAlt":534,"heroCta":534,"heroImage":534,"homepageFeatured":537,"kind":542,"lessonCount":232,"meta":543,"navigation":178,"newsItems":534,"next":544,"ogImage":534,"order":182,"outcomes":534,"path":548,"publishDate":549,"readingTime":550,"related":551,"relatedProjects":534,"seo":552,"stem":554,"tags":555,"track":556,"trackName":530,"__hash__":557},"blog\u002Fblog\u002Flearn\u002Fbuilding-your-first-qollab-project\u002Frun-in-javascript.md","Run a circuit in JavaScript",[7],"qollab",{"type":9,"value":10,"toc":520},"minimark",[11,26,34,39,56,60,79,82,86,89,131,134,433,440,452,456,470,489,498,502,516],[12,13,14,15,20,21,25],"p",{},"Most of this course runs on ",[16,17,19],"a",{"href":18},"\u002Flearn\u002Fbuilding-your-first-qollab-project\u002Fcode-playground","Python and Qiskit",", the default framework. Qollab has a second one: ",[22,23,24],"strong",{},"JavaScript and Qiskit",". Use it when you want a circuit's results to drive something visual, like a widget, an animation, or a custom chart, rather than plain text.",[12,27,28,29,33],{},"If you are on the Python track, you already ran your first circuit in the previous lesson, so you can ",[16,30,32],{"href":31},"\u002Flearn\u002Fbuilding-your-first-qollab-project\u002Ffork-a-project","continue to forking a project",". This lesson is the JavaScript version of that same step.",[35,36,38],"h2",{"id":37},"prerequisites","Prerequisites",[12,40,41,42,46,47,51,52,55],{},"You need a free Qollab account (you can ",[16,43,45],{"href":44},"\u002Flogin","sign up here"," in seconds) and to be signed in. You also need a JavaScript project to work in. When you ",[16,48,50],{"href":49},"\u002Flearn\u002Fbuilding-your-first-qollab-project\u002Fcreate-project","create a project",", choose the ",[22,53,54],{},"JavaScript \u002F Qiskit"," framework in the create dialog. Each framework card has an ⓘ tooltip explaining the difference.",[35,57,59],{"id":58},"the-four-panes","The four panes",[12,61,62,63,66,67,70,71,74,75,78],{},"A JavaScript project splits the editor into four panes: ",[22,64,65],{},"JS",", ",[22,68,69],{},"HTML",", and ",[22,72,73],{},"CSS",", plus a live ",[22,76,77],{},"Preview",". Your HTML and CSS lay out the surface your results are drawn onto, and your JavaScript runs the circuit and draws onto that surface. The Preview is where the finished piece appears, the way a visitor to your project will see it.",[12,80,81],{},"That is the difference from the Python playground, where output lands as text and charts in a console. Here, you decide what the output looks like.",[35,83,85],{"id":84},"write-a-circuit","Write a circuit",[12,87,88],{},"You write ordinary Qiskit, with a few conventions that come from running the Python API inside JavaScript. The three you meet first:",[90,91,92,107,119],"ul",{},[93,94,95,103,104,102],"li",{},[22,96,97,98,102],{},"No ",[99,100,101],"code",{},"new","."," Call the constructor directly, like Python: ",[99,105,106],{},"QuantumCircuit(2, 2)",[93,108,109,115,116,102],{},[22,110,111,114],{},[99,112,113],{},"backend"," is already there."," Qollab creates it for you from the QPU you pick, so you go straight to ",[99,117,118],{},"backend.run(...)",[93,120,121,127,128,130],{},[22,122,123,124,102],{},"Unpack results with ",[99,125,126],{},".toJs()"," Values come back as proxies to Python objects, and ",[99,129,126],{}," turns one into plain JavaScript data.",[12,132,133],{},"Here is a Bell state, start to finish:",[135,136,141],"pre",{"className":137,"code":138,"language":139,"meta":140,"style":140},"language-js shiki shiki-themes one-dark-pro","import { QuantumCircuit } from 'qiskit';\n\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 Draw the result into the HTML you defined\ndocument.getElementById('out').textContent = JSON.stringify(counts);\n","js","",[99,142,143,173,180,212,230,251,282,287,294,334,339,345,383,388,394],{"__ignoreMap":140},[144,145,148,152,156,160,163,166,170],"span",{"class":146,"line":147},"line",1,[144,149,151],{"class":150},"seHd6","import",[144,153,155],{"class":154},"sn6KH"," { ",[144,157,159],{"class":158},"sVyAn","QuantumCircuit",[144,161,162],{"class":154}," } ",[144,164,165],{"class":150},"from",[144,167,169],{"class":168},"subq3"," 'qiskit'",[144,171,172],{"class":154},";\n",[144,174,176],{"class":146,"line":175},2,[144,177,179],{"emptyLinePlaceholder":178},true,"\n",[144,181,183,186,190,194,198,201,205,207,209],{"class":146,"line":182},3,[144,184,185],{"class":150},"const",[144,187,189],{"class":188},"sU0A5"," circuit",[144,191,193],{"class":192},"sjrmR"," =",[144,195,197],{"class":196},"sVbv2"," QuantumCircuit",[144,199,200],{"class":154},"(",[144,202,204],{"class":203},"sVC51","2",[144,206,66],{"class":154},[144,208,204],{"class":203},[144,210,211],{"class":154},");\n",[144,213,215,218,220,223,225,228],{"class":146,"line":214},4,[144,216,217],{"class":188},"circuit",[144,219,102],{"class":154},[144,221,222],{"class":196},"h",[144,224,200],{"class":154},[144,226,227],{"class":203},"0",[144,229,211],{"class":154},[144,231,233,235,237,240,242,244,246,249],{"class":146,"line":232},5,[144,234,217],{"class":188},[144,236,102],{"class":154},[144,238,239],{"class":196},"cx",[144,241,200],{"class":154},[144,243,227],{"class":203},[144,245,66],{"class":154},[144,247,248],{"class":203},"1",[144,250,211],{"class":154},[144,252,254,256,258,261,264,266,268,270,273,275,277,279],{"class":146,"line":253},6,[144,255,217],{"class":188},[144,257,102],{"class":154},[144,259,260],{"class":196},"measure",[144,262,263],{"class":154},"([",[144,265,227],{"class":203},[144,267,66],{"class":154},[144,269,248],{"class":203},[144,271,272],{"class":154},"], [",[144,274,227],{"class":203},[144,276,66],{"class":154},[144,278,248],{"class":203},[144,280,281],{"class":154},"]);\n",[144,283,285],{"class":146,"line":284},7,[144,286,179],{"emptyLinePlaceholder":178},[144,288,290],{"class":146,"line":289},8,[144,291,293],{"class":292},"sV9Aq","\u002F\u002F backend is pre-created; run() is async and returns a job\n",[144,295,297,299,302,304,307,310,312,315,317,319,322,325,328,331],{"class":146,"line":296},9,[144,298,185],{"class":150},[144,300,301],{"class":188}," job",[144,303,193],{"class":192},[144,305,306],{"class":150}," await",[144,308,309],{"class":188}," backend",[144,311,102],{"class":154},[144,313,314],{"class":196},"run",[144,316,200],{"class":154},[144,318,217],{"class":158},[144,320,321],{"class":154},", { ",[144,323,324],{"class":158},"shots",[144,326,327],{"class":154},": ",[144,329,330],{"class":203},"100",[144,332,333],{"class":154}," });\n",[144,335,337],{"class":146,"line":336},10,[144,338,179],{"emptyLinePlaceholder":178},[144,340,342],{"class":146,"line":341},11,[144,343,344],{"class":292},"\u002F\u002F Python objects come back as proxies; .toJs() unpacks them\n",[144,346,348,350,353,355,358,361,363,365,368,371,374,377,380],{"class":146,"line":347},12,[144,349,185],{"class":150},[144,351,352],{"class":188}," counts",[144,354,193],{"class":192},[144,356,357],{"class":154}," (",[144,359,360],{"class":150},"await",[144,362,301],{"class":188},[144,364,102],{"class":154},[144,366,367],{"class":196},"result",[144,369,370],{"class":154},"()).",[144,372,373],{"class":196},"get_counts",[144,375,376],{"class":154},"().",[144,378,379],{"class":196},"toJs",[144,381,382],{"class":154},"();\n",[144,384,386],{"class":146,"line":385},13,[144,387,179],{"emptyLinePlaceholder":178},[144,389,391],{"class":146,"line":390},14,[144,392,393],{"class":292},"\u002F\u002F Draw the result into the HTML you defined\n",[144,395,397,400,402,405,407,410,413,416,418,421,423,426,428,431],{"class":146,"line":396},15,[144,398,399],{"class":188},"document",[144,401,102],{"class":154},[144,403,404],{"class":196},"getElementById",[144,406,200],{"class":154},[144,408,409],{"class":168},"'out'",[144,411,412],{"class":154},").",[144,414,415],{"class":158},"textContent",[144,417,193],{"class":192},[144,419,420],{"class":188}," JSON",[144,422,102],{"class":154},[144,424,425],{"class":196},"stringify",[144,427,200],{"class":154},[144,429,430],{"class":158},"counts",[144,432,211],{"class":154},[12,434,435,436,439],{},"Give the HTML pane something to draw into, such as ",[99,437,438],{},"\u003Cpre id=\"out\">\u003C\u002Fpre>",", and the Preview shows your counts the moment the run finishes.",[12,441,442,443,447,448,451],{},"The ",[16,444,446],{"href":445},"\u002Flearn\u002Fdocs\u002Fjs-qiskit-projects","JS \u002F Qiskit projects doc"," covers the rest: named arguments with ",[99,449,450],{},".callKwargs",", polling a job's status, and drawing the circuit itself as an image.",[35,453,455],{"id":454},"run-it-and-choose-where","Run it and choose where",[12,457,458,459,461,462,465,466,469],{},"Running works the same as the Python playground. Open the runner, set your ",[22,460,324],{},", and press ",[22,463,464],{},"Run"," to open the ",[22,467,468],{},"Select QPU"," dialog:",[90,471,472,478],{},[93,473,474,477],{},[22,475,476],{},"Simulators"," are free and run right away. Start here while you get the visuals right.",[93,479,480,483,484,488],{},[22,481,482],{},"Hardware"," runs your circuit on a real ",[16,485,487],{"href":486},"https:\u002F\u002Fwww.ionq.com\u002Fquantum-systems\u002Fcompare","IonQ quantum computer"," and consumes credits.",[490,491,492],"aside-note",{},[12,493,494,497],{},[22,495,496],{},"Pro tip:"," get your piece working on a free simulator first. The visuals and the wiring are identical on hardware, so once it looks right, a hardware run is the same Run button and one dialog.",[35,499,501],{"id":500},"browser-compatibility","Browser compatibility",[12,503,504,505,508,509,512,513,102],{},"Like the Python playground, this needs a browser with WebAssembly JSPI support, such as Chrome, Edge, or Opera. If you see a compatibility warning, switch to one of those. Firefox users can enable it from ",[99,506,507],{},"about:config"," by setting ",[99,510,511],{},"javascript.options.wasm_js_promise_integration"," to ",[99,514,515],{},"true",[517,518,519],"style",{},"html pre.shiki code .seHd6, html code.shiki .seHd6{--shiki-default:#C678DD}html pre.shiki code .sn6KH, html code.shiki .sn6KH{--shiki-default:#ABB2BF}html pre.shiki code .sVyAn, html code.shiki .sVyAn{--shiki-default:#E06C75}html pre.shiki code .subq3, html code.shiki .subq3{--shiki-default:#98C379}html pre.shiki code .sU0A5, html code.shiki .sU0A5{--shiki-default:#E5C07B}html pre.shiki code .sjrmR, html code.shiki .sjrmR{--shiki-default:#56B6C2}html pre.shiki code .sVbv2, html code.shiki .sVbv2{--shiki-default:#61AFEF}html pre.shiki code .sVC51, html code.shiki .sVC51{--shiki-default:#D19A66}html pre.shiki code .sV9Aq, html code.shiki .sV9Aq{--shiki-default:#7F848E;--shiki-default-font-style:italic}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":140,"searchDepth":175,"depth":175,"links":521},[522,523,524,525,526],{"id":37,"depth":175,"text":38},{"id":58,"depth":175,"text":59},{"id":84,"depth":175,"text":85},{"id":454,"depth":175,"text":455},{"id":500,"depth":175,"text":501},[528,529,530,5],"Qollab","Learn","Building your first Qollab project",[],{"username":7,"name":528,"role":533,"avatar":140},"Product docs",null,"The JavaScript track: a four-pane editor where your JavaScript runs Qiskit and draws the results into your own HTML and CSS.","Build a visual quantum project in JavaScript on Qollab: create a JS\u002FQiskit project, run a circuit in the browser, and draw results into your own HTML.",false,"md",{"image":540,"alt":541},"\u002F_content\u002Fimages\u002Fdocs\u002Fjs-qiskit.webp","A JavaScript project with four panes: JavaScript, HTML, CSS, and a live preview.","lesson",{},{"slug":545,"title":546,"desc":547},"\u002Fblog\u002Flearn\u002Fbuilding-your-first-qollab-project\u002Ffork-a-project","4 · Fork and continue a project","Fork any public project into your own editable copy, then keep building on it.","\u002Fblog\u002Flearn\u002Fbuilding-your-first-qollab-project\u002Frun-in-javascript","2026-09-07","4 min read",[],{"title":553,"description":536},"Run a quantum circuit in JavaScript · Building your first Qollab project","blog\u002Flearn\u002Fbuilding-your-first-qollab-project\u002Frun-in-javascript",[],"building-your-first-qollab-project","cAgfOHHrQTNt0TuSf3HUdqrV6XJtHaN5DSKI6J1MW3s",[],[560,949,1188,1538,1662],{"id":561,"title":562,"authors":563,"body":564,"breadcrumb":929,"builders":930,"byline":931,"category":534,"categoryName":534,"challenge":534,"courseAuthor":534,"courseLead":534,"dek":932,"description":933,"draft":537,"extension":538,"eyebrow":534,"featured":537,"finish":534,"fork":534,"hero":934,"heroAlt":534,"heroCta":534,"heroImage":534,"homepageFeatured":537,"kind":542,"lessonCount":232,"meta":936,"navigation":178,"newsItems":534,"next":937,"ogImage":534,"order":147,"outcomes":534,"path":941,"publishDate":942,"readingTime":550,"related":943,"relatedProjects":534,"seo":944,"stem":946,"tags":947,"track":556,"trackName":530,"__hash__":948},"blog\u002Fblog\u002Flearn\u002Fbuilding-your-first-qollab-project\u002Fcreate-project.md","Create a Project on Qollab",[7],{"type":9,"value":565,"toc":920},[566,573,577,594,600,604,607,612,630,633,654,661,665,672,677,718,723,731,735,742,747,866,873,880,884,899,904,907,914,917],[12,567,568,569,572],{},"This guide assumes that you have already created a free Qollab account, chosen a username, and are currently signed into the platform. If any of that sounds unfamiliar, don't fret, ",[16,570,571],{"href":44},"sign in or sign up here"," first, then come back to start flexing your quantum muscles.",[35,574,576],{"id":575},"starting-a-new-project","Starting a new project",[12,578,579,580,584,585,589,590,593],{},"Click the ",[581,582,583],"em",{},"Add Project"," button on the ",[16,586,588],{"href":587},"\u002Fprojects","Projects"," page. The same ",[581,591,592],{},"New Project"," action lives in the top navigation and in your account menu. Each one opens the create dialog right where you are, so nothing takes you off the page you were on.",[595,596],"blog-figure",{"alt":597,"caption":598,"no":140,"src":599},"The Projects page with the Add Project button in the top right corner.","The Projects page, with the “Add Project” button in the top-right corner, highlighted in orange.","\u002F_content\u002Fimages\u002Fcreate-project\u002Fprojects-add-button-2.webp",[35,601,603],{"id":602},"name-your-project","Name your project",[12,605,606],{},"The create dialog asks for two things to get started, and both are required.",[595,608],{"alt":609,"caption":610,"no":140,"src":611},"The create-project dialog with a Project Title field, a Project description field with a live character counter, an optional template picker, and a two-card code framework choice.","The create dialog: a title, a description, an optional template, and your code framework. The Title field is highlighted in orange.","\u002F_content\u002Fimages\u002Fcreate-project\u002Fcreate-project-modal.webp",[90,613,614,624],{},[93,615,616,619,620,623],{},[22,617,618],{},"Project Title:"," A concise, descriptive name, for example ",[581,621,622],{},"Quantum Teleportation Visualizer",". Qollab turns this into your project's web address automatically, so there is no separate URL field to fill in. If the name is already taken, a number is added to keep the address unique. You can rename a project later from its settings.",[93,625,626,629],{},[22,627,628],{},"Description:"," A short summary of what your project does, up to 240 characters, with a live counter as you type. This is the preview card people see when they browse, so it is worth a sentence that reads well on its own.",[12,631,632],{},"Two more choices sit below, and you can leave both on their defaults:",[90,634,635,641],{},[93,636,637,640],{},[22,638,639],{},"Start from a template (optional):"," Pick an existing project to begin from, and Qollab copies its code and setup into yours as a starting point. Leave it empty to start from a blank Qiskit script.",[93,642,643,646,647,650,651,653],{},[22,644,645],{},"Code framework:"," Choose ",[581,648,649],{},"Python \u002F Qiskit"," (the default) or the ",[581,652,54],{}," wrapper. Each card has an ⓘ tooltip explaining the difference. If you started from a template, this follows the template's framework.",[12,655,656,657,660],{},"Press ",[22,658,659],{},"Create",", and Qollab opens your new project, ready to fill in.",[35,662,664],{"id":663},"filling-in-your-project","Filling in your project",[12,666,667,668,671],{},"Your project opens as a ",[22,669,670],{},"draft, already in edit mode",", on its own page. Everything the old creation wizard walked through step by step now lives here on the page itself, organized into tabs, so you can work on any part in any order.",[673,674,676],"h3",{"id":675},"the-project-card-tab","The Project Card tab",[12,678,679,680,683,684,687,688,691,692,695,696,66,699,702,703,706,707,710,711,714,715,102],{},"This is where you explain the ",[581,681,682],{},"why"," and ",[581,685,686],{},"how"," behind your work: your goals, your approach, and your results, so others can learn from your experience. Write your explanation in Markdown, preview it before publishing, and add math notation for the equations quantum write-ups usually need. The same tab holds an optional ",[22,689,690],{},"thumbnail image",", the picture that represents your project wherever it is listed. It is also home to your ",[22,693,694],{},"Tags"," (topics like ",[99,697,698],{},"qiskit",[99,700,701],{},"ionq",", or ",[99,704,705],{},"entanglement"," that help the community find your work), your ",[22,708,709],{},"contributors",", and links to a ",[22,712,713],{},"Git repository"," or a ",[22,716,717],{},"project website",[595,719],{"alt":720,"caption":721,"no":140,"src":722},"The Project Card tab in edit mode, showing the Markdown write-up editor, a Tags field, contributors, and repository and website link fields, with a save status line in the header.","The Project Card tab, where your write-up, tags, contributors, and links live. The save status sits in the header, highlighted in orange.","\u002F_content\u002Fimages\u002Fcreate-project\u002Fproject-card-tab.webp",[490,724,725],{},[12,726,727,730],{},[22,728,729],{},"Community impact:"," Clear details and accurate tags make it easy for the community to discover your work when searching for specific quantum topics. Linking a repository or a live demo lets others review your full research, contribute to your code, or see your work running in the real world.",[673,732,734],{"id":733},"the-code-tab","The Code tab",[12,736,737,738,741],{},"The Code tab is where your quantum scripts live. Qollab preloads the editor with a simple Python starter using Qiskit, a two-qubit Bell state circuit, so you have a foundation to build from. Replace it with your own code or build on top of it, and pick where it runs from the ",[22,739,740],{},"QPU selector"," on this tab.",[595,743],{"alt":744,"caption":745,"no":140,"src":746},"The Code tab, showing the Python and Qiskit editor preloaded with the two-qubit Bell state starter script.","The Code tab, preloaded with a runnable Qiskit starter, the Bell state, highlighted in orange. The QPU selector sits just below the editor.","\u002F_content\u002Fimages\u002Fcreate-project\u002Fproject-code-tab.webp",[135,748,752],{"className":749,"code":750,"language":751,"meta":140,"style":140},"language-python shiki shiki-themes one-dark-pro","from qiskit import QuantumCircuit\nfrom qiskit.quantum_info import Statevector\n\n# Create a 2-qubit circuit\nqc = QuantumCircuit(2)\n\n# Apply gates\nqc.h(0)  # Hadamard gate on qubit 0\nqc.cx(0, 1)  # CNOT gate (creates entanglement)\n\n# Display the circuit\nprint(qc)\n","python",[99,753,754,766,778,782,787,804,808,813,830,849,853,858],{"__ignoreMap":140},[144,755,756,758,761,763],{"class":146,"line":147},[144,757,165],{"class":150},[144,759,760],{"class":154}," qiskit ",[144,762,151],{"class":150},[144,764,765],{"class":154}," QuantumCircuit\n",[144,767,768,770,773,775],{"class":146,"line":175},[144,769,165],{"class":150},[144,771,772],{"class":154}," qiskit.quantum_info ",[144,774,151],{"class":150},[144,776,777],{"class":154}," Statevector\n",[144,779,780],{"class":146,"line":182},[144,781,179],{"emptyLinePlaceholder":178},[144,783,784],{"class":146,"line":214},[144,785,786],{"class":292},"# Create a 2-qubit circuit\n",[144,788,789,792,795,797,799,801],{"class":146,"line":232},[144,790,791],{"class":154},"qc ",[144,793,794],{"class":192},"=",[144,796,197],{"class":196},[144,798,200],{"class":154},[144,800,204],{"class":203},[144,802,803],{"class":154},")\n",[144,805,806],{"class":146,"line":253},[144,807,179],{"emptyLinePlaceholder":178},[144,809,810],{"class":146,"line":284},[144,811,812],{"class":292},"# Apply gates\n",[144,814,815,818,820,822,824,827],{"class":146,"line":289},[144,816,817],{"class":154},"qc.",[144,819,222],{"class":196},[144,821,200],{"class":154},[144,823,227],{"class":203},[144,825,826],{"class":154},")  ",[144,828,829],{"class":292},"# Hadamard gate on qubit 0\n",[144,831,832,834,836,838,840,842,844,846],{"class":146,"line":296},[144,833,817],{"class":154},[144,835,239],{"class":196},[144,837,200],{"class":154},[144,839,227],{"class":203},[144,841,66],{"class":154},[144,843,248],{"class":203},[144,845,826],{"class":154},[144,847,848],{"class":292},"# CNOT gate (creates entanglement)\n",[144,850,851],{"class":146,"line":336},[144,852,179],{"emptyLinePlaceholder":178},[144,854,855],{"class":146,"line":341},[144,856,857],{"class":292},"# Display the circuit\n",[144,859,860,863],{"class":146,"line":347},[144,861,862],{"class":192},"print",[144,864,865],{"class":154},"(qc)\n",[490,867,868],{},[12,869,870,872],{},[22,871,729],{}," Sharing your actual code gives the community a tangible, runnable example to learn from. Others can test your logic, discover new implementation techniques, or build on your foundation to create something entirely new.",[12,874,875,876,879],{},"There is ",[22,877,878],{},"no Save button",". Your work saves on its own as you go, and a status line in the header confirms it, so you can move between tabs or step away without losing anything.",[35,881,883],{"id":882},"publishing","Publishing",[12,885,886,887,890,891,894,895,898],{},"Your draft is private while you work on it. When it is ready to share, click ",[22,888,889],{},"Publish",". There is no separate dialog: the ",[581,892,893],{},"Draft"," label clears, your project becomes publicly reachable, and this first release is tagged ",[581,896,897],{},"v1.0",". Publishing confirms your work follows the Community Guidelines.",[595,900],{"alt":901,"caption":902,"no":140,"src":903},"The project header showing the Draft label next to the project title and the Publish button, both highlighted in orange.","A draft project's header: the _Draft_ label and the _Publish_ button, highlighted in orange.","\u002F_content\u002Fimages\u002Fcreate-project\u002Fproject-publish.webp",[12,905,906],{},"After it is live, any further edits save as a draft on top, and the header offers to publish those changes when you want them public. Your published version stays exactly as it is until you choose to update it.",[490,908,909],{},[12,910,911,913],{},[22,912,729],{}," Publishing opens your work to collaboration. By sharing it publicly, you invite constructive feedback, spark discussion, and add to the growing, shared knowledge base of the quantum computing community.",[12,915,916],{},"We look forward to seeing what you will build and share with the community!",[517,918,919],{},"html pre.shiki code .seHd6, html code.shiki .seHd6{--shiki-default:#C678DD}html pre.shiki code .sn6KH, html code.shiki .sn6KH{--shiki-default:#ABB2BF}html pre.shiki code .sV9Aq, html code.shiki .sV9Aq{--shiki-default:#7F848E;--shiki-default-font-style:italic}html pre.shiki code .sjrmR, html code.shiki .sjrmR{--shiki-default:#56B6C2}html pre.shiki code .sVbv2, html code.shiki .sVbv2{--shiki-default:#61AFEF}html pre.shiki code .sVC51, html code.shiki .sVC51{--shiki-default:#D19A66}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":140,"searchDepth":175,"depth":175,"links":921},[922,923,924,928],{"id":575,"depth":175,"text":576},{"id":602,"depth":175,"text":603},{"id":663,"depth":175,"text":664,"children":925},[926,927],{"id":675,"depth":182,"text":676},{"id":733,"depth":182,"text":734},{"id":882,"depth":175,"text":883},[528,529,530,562],[],{"username":7,"name":528,"role":533,"avatar":140},"How project creation works on Qollab now: one short dialog to name your work, then a live project page where you write it up, add your code, and publish when you are ready.","Create and publish a project on Qollab: name it in the create dialog, fill in your write-up and code on the project page, then publish in a single click.",{"image":935,"alt":562},"\u002F_content\u002Fimages\u002Fcreate-project\u002Fhero.webp",{},{"slug":938,"title":939,"desc":940},"\u002Fblog\u002Flearn\u002Fbuilding-your-first-qollab-project\u002Fcode-playground","2 · Use the Code Playground","Run Qiskit circuits live in your browser, from editing Python to choosing a QPU and reading your results.","\u002Fblog\u002Flearn\u002Fbuilding-your-first-qollab-project\u002Fcreate-project","2026-03-06",[],{"title":945,"description":933},"Create a Project on Qollab · Building your first Qollab project","blog\u002Flearn\u002Fbuilding-your-first-qollab-project\u002Fcreate-project",[],"q1OrmOkWHRPV7RCUj-rWAYtDmWFszdNPB0Qv25OKOr8",{"id":950,"title":951,"authors":952,"body":953,"breadcrumb":1174,"builders":1175,"byline":1176,"category":534,"categoryName":534,"challenge":534,"courseAuthor":534,"courseLead":534,"dek":940,"description":940,"draft":537,"extension":538,"eyebrow":534,"featured":537,"finish":534,"fork":534,"hero":1177,"heroAlt":534,"heroCta":534,"heroImage":534,"homepageFeatured":537,"kind":542,"lessonCount":232,"meta":1179,"navigation":178,"newsItems":534,"next":1180,"ogImage":534,"order":175,"outcomes":534,"path":938,"publishDate":942,"readingTime":1181,"related":1182,"relatedProjects":534,"seo":1183,"stem":1185,"tags":1186,"track":556,"trackName":530,"__hash__":1187},"blog\u002Fblog\u002Flearn\u002Fbuilding-your-first-qollab-project\u002Fcode-playground.md","Use the Code Playground",[7],{"type":9,"value":954,"toc":1165},[955,967,970,981,983,992,996,1003,1023,1027,1037,1042,1046,1054,1069,1074,1082,1089,1093,1099,1102,1126,1131,1135,1146,1153,1155],[12,956,957,958,961,962,966],{},"Every project on ",[16,959,528],{"href":960},"\u002F"," comes with a built-in code playground: a full Python and Qiskit editor that runs your circuits right in your browser, whether you are testing on a simulator or executing on real quantum hardware from ",[16,963,965],{"href":964},"https:\u002F\u002Fwww.ionq.com","IonQ",". No installs, and no local environment to set up.",[12,968,969],{},"This guide walks you through running your code, from the editor to your first results.",[490,971,972],{},[12,973,974,977,978,102],{},[22,975,976],{},"Prefer JavaScript?"," Qollab also has a JavaScript \u002F Qiskit framework, with a four-pane visual editor for interactive projects. See ",[16,979,5],{"href":980},"\u002Flearn\u002Fbuilding-your-first-qollab-project\u002Frun-in-javascript",[35,982,38],{"id":37},[12,984,41,985,987,988,991],{},[16,986,45],{"href":44}," in seconds) and to be signed in. To follow along, open a project that already has Qiskit or Python code: any public project works, or ",[16,989,990],{"href":49},"create your own"," first.",[35,993,995],{"id":994},"open-the-editor","Open the editor",[12,997,998,999,1002],{},"Every project page has a ",[22,1000,1001],{},"Code"," tab, next to Project Card. Open it to find the editor, preloaded with the project's Python script. We built it to stay out of your way:",[90,1004,1005,1011,1017],{},[93,1006,1007,1010],{},[22,1008,1009],{},"Syntax highlighting"," color-codes keywords, calls, and strings so your code is easy to scan.",[93,1012,1013,1016],{},[22,1014,1015],{},"Inline errors"," light up the line that failed, so you know exactly where to look.",[93,1018,1019,1022],{},[22,1020,1021],{},"Focus mode"," expands the editor to fill the screen when you want no distractions. Click the fullscreen icon in the toolbar.",[35,1024,1026],{"id":1025},"switch-to-the-runner","Switch to the runner",[12,1028,1029,1030,1033,1034,1036],{},"The Code tab has two modes. Click ",[22,1031,1032],{},"Run Project"," to leave the editor and open the runner, where you set how many ",[22,1035,324],{}," to take, choose where the circuit runs, and read the console.",[595,1038],{"alt":1039,"caption":1040,"no":140,"src":1041},"The Code tab in Run Project mode, showing a Shots field, low-probability options, a Run button, and an empty console panel.","The runner: set your shots, then press Run. The Run button is highlighted in orange.","\u002F_content\u002Fimages\u002Fcode-playground\u002Frun-mode.webp",[35,1043,1045],{"id":1044},"choose-where-it-runs","Choose where it runs",[12,1047,656,1048,1050,1051,1053],{},[22,1049,464],{},", and a ",[22,1052,468],{}," dialog opens so you can pick where the circuit executes:",[90,1055,1056,1061],{},[93,1057,1058,1060],{},[22,1059,476],{}," are free, run right away, and are always available: a built-in simulator, an AWS Braket local simulator, and a set of IBM device-noise simulators. They are the perfect sandbox for testing your logic without spending anything.",[93,1062,1063,1065,1066,1068],{},[22,1064,482],{}," is the real thing. Choose a physical ",[16,1067,487],{"href":486},", such as Aria or Forte. Hardware runs consume credits.",[595,1070],{"alt":1071,"caption":1072,"no":140,"src":1073},"The Select QPU dialog listing free simulators including the built-in simulator, AWS Braket, and IBM device-noise simulators, with a Run button.","The Select QPU dialog. Start on a free simulator, highlighted in orange, before spending credits on hardware.","\u002F_content\u002Fimages\u002Fcode-playground\u002Fselect-qpu.webp",[490,1075,1076],{},[12,1077,1078,1081],{},[22,1079,1080],{},"Managing credits:"," running on real hardware consumes credits. Check your balance or set a spending limit in your Qollab profile settings so you always stay within budget.",[490,1083,1084],{},[12,1085,1086,1088],{},[22,1087,496],{}," run on a simulator first to catch syntax errors and logic bugs. That way, when you do spend hardware credits, you are running a circuit you have already verified.",[35,1090,1092],{"id":1091},"run-and-read-the-output","Run and read the output",[12,1094,1095,1096,1098],{},"Pick your QPU and press ",[22,1097,464],{}," in the dialog. The console tracks progress as it loads the runtime and executes, and the results land right below when it finishes. On a simulator that is near-instant; hardware jobs are queued and take longer to resolve.",[12,1100,1101],{},"Here is what you can expect to see:",[90,1103,1104,1114,1120],{},[93,1105,1106,1109,1110,1113],{},[22,1107,1108],{},"Standard output:"," anything your ",[99,1111,1112],{},"print()"," statements produce.",[93,1115,1116,1119],{},[22,1117,1118],{},"Errors:"," a clear red traceback pointing to the exact line, if something failed.",[93,1121,1122,1125],{},[22,1123,1124],{},"Circuit and probabilities:"," a diagram of the circuit that ran, and a bar chart of the measurement probabilities for each outcome.",[595,1127],{"alt":1128,"caption":1129,"no":140,"src":1130},"The console after a run, showing the circuit diagram, a JobStatus.DONE line, the measured counts, and a Probabilities bar chart.","A finished run: the circuit, the counts, and the measurement probabilities, highlighted in orange.","\u002F_content\u002Fimages\u002Fcode-playground\u002Frun-output.webp",[35,1132,1134],{"id":1133},"copy-or-download-your-results","Copy or download your results",[12,1136,1137,1138,1141,1142,1145],{},"The toolbar above the console has a ",[22,1139,1140],{},"copy"," button for the console text and a ",[22,1143,1144],{},"download"," button that saves the full output as an HTML file, named with your project and a timestamp. It is a quick way to paste real results into your project write-up.",[490,1147,1148],{},[12,1149,1150,1152],{},[22,1151,729],{}," sharing your hardware run results in your project's write-up is genuinely useful. It lets other learners see real quantum noise and performance without spending their own credits.",[35,1154,501],{"id":500},[12,1156,1157,1158,1160,1161,512,1163,102],{},"The playground needs a modern browser that supports WebAssembly JSPI, such as Chrome, Edge, or Opera. If you see a compatibility warning, switch to one of those. Firefox users can enable it manually: open ",[99,1159,507],{}," and set ",[99,1162,511],{},[99,1164,515],{},{"title":140,"searchDepth":175,"depth":175,"links":1166},[1167,1168,1169,1170,1171,1172,1173],{"id":37,"depth":175,"text":38},{"id":994,"depth":175,"text":995},{"id":1025,"depth":175,"text":1026},{"id":1044,"depth":175,"text":1045},{"id":1091,"depth":175,"text":1092},{"id":1133,"depth":175,"text":1134},{"id":500,"depth":175,"text":501},[528,529,530,951],[],{"username":7,"name":528,"role":533,"avatar":140},{"image":1178,"alt":951},"\u002F_content\u002Fimages\u002Fcode-playground\u002Fhero.webp",{},{"slug":545,"title":546,"desc":547},"3 min read",[],{"title":1184,"description":940},"Use the Code Playground · Building your first Qollab project","blog\u002Flearn\u002Fbuilding-your-first-qollab-project\u002Fcode-playground",[],"unfAyq8CHnbaTecbdZEJJSnoKEj2aH9tmBkVIYD0Lis",{"id":4,"title":5,"authors":1189,"body":1190,"breadcrumb":1529,"builders":1530,"byline":1531,"category":534,"categoryName":534,"challenge":534,"courseAuthor":534,"courseLead":534,"dek":535,"description":536,"draft":537,"extension":538,"eyebrow":534,"featured":537,"finish":534,"fork":534,"hero":1532,"heroAlt":534,"heroCta":534,"heroImage":534,"homepageFeatured":537,"kind":542,"lessonCount":232,"meta":1533,"navigation":178,"newsItems":534,"next":1534,"ogImage":534,"order":182,"outcomes":534,"path":548,"publishDate":549,"readingTime":550,"related":1535,"relatedProjects":534,"seo":1536,"stem":554,"tags":1537,"track":556,"trackName":530,"__hash__":557},[7],{"type":9,"value":1191,"toc":1522},[1192,1198,1202,1204,1212,1214,1224,1226,1228,1230,1256,1258,1472,1476,1482,1484,1492,1504,1510,1512,1520],[12,1193,14,1194,20,1196,25],{},[16,1195,19],{"href":18},[22,1197,24],{},[12,1199,28,1200,33],{},[16,1201,32],{"href":31},[35,1203,38],{"id":37},[12,1205,41,1206,46,1208,51,1210,55],{},[16,1207,45],{"href":44},[16,1209,50],{"href":49},[22,1211,54],{},[35,1213,59],{"id":58},[12,1215,62,1216,66,1218,70,1220,74,1222,78],{},[22,1217,65],{},[22,1219,69],{},[22,1221,73],{},[22,1223,77],{},[12,1225,81],{},[35,1227,85],{"id":84},[12,1229,88],{},[90,1231,1232,1240,1248],{},[93,1233,1234,103,1238,102],{},[22,1235,97,1236,102],{},[99,1237,101],{},[99,1239,106],{},[93,1241,1242,115,1246,102],{},[22,1243,1244,114],{},[99,1245,113],{},[99,1247,118],{},[93,1249,1250,127,1254,130],{},[22,1251,123,1252,102],{},[99,1253,126],{},[99,1255,126],{},[12,1257,133],{},[135,1259,1260],{"className":137,"code":138,"language":139,"meta":140,"style":140},[99,1261,1262,1278,1282,1302,1316,1334,1360,1364,1368,1398,1402,1406,1434,1438,1442],{"__ignoreMap":140},[144,1263,1264,1266,1268,1270,1272,1274,1276],{"class":146,"line":147},[144,1265,151],{"class":150},[144,1267,155],{"class":154},[144,1269,159],{"class":158},[144,1271,162],{"class":154},[144,1273,165],{"class":150},[144,1275,169],{"class":168},[144,1277,172],{"class":154},[144,1279,1280],{"class":146,"line":175},[144,1281,179],{"emptyLinePlaceholder":178},[144,1283,1284,1286,1288,1290,1292,1294,1296,1298,1300],{"class":146,"line":182},[144,1285,185],{"class":150},[144,1287,189],{"class":188},[144,1289,193],{"class":192},[144,1291,197],{"class":196},[144,1293,200],{"class":154},[144,1295,204],{"class":203},[144,1297,66],{"class":154},[144,1299,204],{"class":203},[144,1301,211],{"class":154},[144,1303,1304,1306,1308,1310,1312,1314],{"class":146,"line":214},[144,1305,217],{"class":188},[144,1307,102],{"class":154},[144,1309,222],{"class":196},[144,1311,200],{"class":154},[144,1313,227],{"class":203},[144,1315,211],{"class":154},[144,1317,1318,1320,1322,1324,1326,1328,1330,1332],{"class":146,"line":232},[144,1319,217],{"class":188},[144,1321,102],{"class":154},[144,1323,239],{"class":196},[144,1325,200],{"class":154},[144,1327,227],{"class":203},[144,1329,66],{"class":154},[144,1331,248],{"class":203},[144,1333,211],{"class":154},[144,1335,1336,1338,1340,1342,1344,1346,1348,1350,1352,1354,1356,1358],{"class":146,"line":253},[144,1337,217],{"class":188},[144,1339,102],{"class":154},[144,1341,260],{"class":196},[144,1343,263],{"class":154},[144,1345,227],{"class":203},[144,1347,66],{"class":154},[144,1349,248],{"class":203},[144,1351,272],{"class":154},[144,1353,227],{"class":203},[144,1355,66],{"class":154},[144,1357,248],{"class":203},[144,1359,281],{"class":154},[144,1361,1362],{"class":146,"line":284},[144,1363,179],{"emptyLinePlaceholder":178},[144,1365,1366],{"class":146,"line":289},[144,1367,293],{"class":292},[144,1369,1370,1372,1374,1376,1378,1380,1382,1384,1386,1388,1390,1392,1394,1396],{"class":146,"line":296},[144,1371,185],{"class":150},[144,1373,301],{"class":188},[144,1375,193],{"class":192},[144,1377,306],{"class":150},[144,1379,309],{"class":188},[144,1381,102],{"class":154},[144,1383,314],{"class":196},[144,1385,200],{"class":154},[144,1387,217],{"class":158},[144,1389,321],{"class":154},[144,1391,324],{"class":158},[144,1393,327],{"class":154},[144,1395,330],{"class":203},[144,1397,333],{"class":154},[144,1399,1400],{"class":146,"line":336},[144,1401,179],{"emptyLinePlaceholder":178},[144,1403,1404],{"class":146,"line":341},[144,1405,344],{"class":292},[144,1407,1408,1410,1412,1414,1416,1418,1420,1422,1424,1426,1428,1430,1432],{"class":146,"line":347},[144,1409,185],{"class":150},[144,1411,352],{"class":188},[144,1413,193],{"class":192},[144,1415,357],{"class":154},[144,1417,360],{"class":150},[144,1419,301],{"class":188},[144,1421,102],{"class":154},[144,1423,367],{"class":196},[144,1425,370],{"class":154},[144,1427,373],{"class":196},[144,1429,376],{"class":154},[144,1431,379],{"class":196},[144,1433,382],{"class":154},[144,1435,1436],{"class":146,"line":385},[144,1437,179],{"emptyLinePlaceholder":178},[144,1439,1440],{"class":146,"line":390},[144,1441,393],{"class":292},[144,1443,1444,1446,1448,1450,1452,1454,1456,1458,1460,1462,1464,1466,1468,1470],{"class":146,"line":396},[144,1445,399],{"class":188},[144,1447,102],{"class":154},[144,1449,404],{"class":196},[144,1451,200],{"class":154},[144,1453,409],{"class":168},[144,1455,412],{"class":154},[144,1457,415],{"class":158},[144,1459,193],{"class":192},[144,1461,420],{"class":188},[144,1463,102],{"class":154},[144,1465,425],{"class":196},[144,1467,200],{"class":154},[144,1469,430],{"class":158},[144,1471,211],{"class":154},[12,1473,435,1474,439],{},[99,1475,438],{},[12,1477,442,1478,447,1480,451],{},[16,1479,446],{"href":445},[99,1481,450],{},[35,1483,455],{"id":454},[12,1485,458,1486,461,1488,465,1490,469],{},[22,1487,324],{},[22,1489,464],{},[22,1491,468],{},[90,1493,1494,1498],{},[93,1495,1496,477],{},[22,1497,476],{},[93,1499,1500,483,1502,488],{},[22,1501,482],{},[16,1503,487],{"href":486},[490,1505,1506],{},[12,1507,1508,497],{},[22,1509,496],{},[35,1511,501],{"id":500},[12,1513,504,1514,508,1516,512,1518,102],{},[99,1515,507],{},[99,1517,511],{},[99,1519,515],{},[517,1521,519],{},{"title":140,"searchDepth":175,"depth":175,"links":1523},[1524,1525,1526,1527,1528],{"id":37,"depth":175,"text":38},{"id":58,"depth":175,"text":59},{"id":84,"depth":175,"text":85},{"id":454,"depth":175,"text":455},{"id":500,"depth":175,"text":501},[528,529,530,5],[],{"username":7,"name":528,"role":533,"avatar":140},{"image":540,"alt":541},{},{"slug":545,"title":546,"desc":547},[],{"title":553,"description":536},[],{"id":1539,"title":1540,"authors":1541,"body":1542,"breadcrumb":1644,"builders":1645,"byline":1646,"category":534,"categoryName":534,"challenge":534,"courseAuthor":534,"courseLead":534,"dek":547,"description":1647,"draft":537,"extension":538,"eyebrow":534,"featured":537,"finish":534,"fork":534,"hero":1648,"heroAlt":534,"heroCta":534,"heroImage":534,"homepageFeatured":537,"kind":542,"lessonCount":232,"meta":1650,"navigation":178,"newsItems":534,"next":1651,"ogImage":534,"order":214,"outcomes":534,"path":545,"publishDate":549,"readingTime":1181,"related":1655,"relatedProjects":534,"seo":1656,"stem":1659,"tags":1660,"track":556,"trackName":530,"__hash__":1661},"blog\u002Fblog\u002Flearn\u002Fbuilding-your-first-qollab-project\u002Ffork-a-project.md","Fork and continue a project",[7],{"type":9,"value":1543,"toc":1637},[1544,1547,1551,1559,1563,1570,1575,1583,1588,1592,1599,1603,1616,1620],[12,1545,1546],{},"Forking is how you start from someone else's work instead of a blank project. You make your own copy of any public project, then edit, run, and publish it as your own. It is the fastest way to learn from a project you like, or to build on one.",[35,1548,1550],{"id":1549},"_1-find-a-project-to-fork","1. Find a project to fork",[12,1552,1553,1554,1558],{},"Browse ",[16,1555,1557],{"href":1556},"\u002Fexplore","Explore"," or open any public project you want to build on. Anything the community has published can be forked.",[35,1560,1562],{"id":1561},"_2-fork-it","2. Fork it",[12,1564,1565,1566,1569],{},"Click ",[22,1567,1568],{},"Fork"," in the project header.",[595,1571],{"alt":1572,"caption":1573,"no":140,"src":1574},"A public project's header with a Fork button.","The Fork button on any public project.","\u002F_content\u002Fimages\u002Fdocs\u002Ffork-button.webp",[12,1576,442,1577,1580,1581,102],{},[22,1578,1579],{},"Fork Project"," dialog opens with a name and title prefilled from the original. Adjust them if you like, then confirm with ",[22,1582,1579],{},[595,1584],{"alt":1585,"caption":1586,"no":140,"src":1587},"The Fork Project dialog with a prefilled name and title.","Name your copy, then confirm.","\u002F_content\u002Fimages\u002Fdocs\u002Ffork-modal.webp",[35,1589,1591],{"id":1590},"_3-continue-working","3. Continue working",[12,1593,1594,1595,1598],{},"Your fork is a private draft on your own account, opened in edit mode with the original's code and write-up already in place. From here it is a normal project: change the code, run it in the ",[16,1596,1597],{"href":18},"Code Playground",", rewrite the description, and make it yours. The original is untouched, and it keeps a count of the forks it has.",[35,1600,1602],{"id":1601},"_4-publish-your-version","4. Publish your version",[12,1604,1605,1606,1610,1611,1615],{},"When your version is ready, publish it the way you published your first project. Keep the original author credited when you build on their work, as the ",[16,1607,1609],{"href":1608},"\u002Fcommunity-guidelines","community guidelines"," ask. If your fork adds something meaningful, the ",[16,1612,1614],{"href":1613},"\u002Fprograms\u002Fcredits-grant","Grant Program"," rewards fork-and-extend work with credits.",[35,1617,1619],{"id":1618},"related","Related",[90,1621,1622,1628,1633],{},[93,1623,1624],{},[16,1625,1627],{"href":1626},"\u002Flearn\u002Fdocs\u002Ffork-and-remix","Forking a project",[93,1629,1630],{},[16,1631,1632],{"href":49},"Create a project on Qollab",[93,1634,1635],{},[16,1636,951],{"href":18},{"title":140,"searchDepth":175,"depth":175,"links":1638},[1639,1640,1641,1642,1643],{"id":1549,"depth":175,"text":1550},{"id":1561,"depth":175,"text":1562},{"id":1590,"depth":175,"text":1591},{"id":1601,"depth":175,"text":1602},{"id":1618,"depth":175,"text":1619},[528,529,530,1540],[],{"username":7,"name":528,"role":533,"avatar":140},"Fork any public project into your own editable copy, then keep building on it: edit the code, run it, and publish it as your own.",{"image":1587,"alt":1649},"The Fork Project dialog",{},{"slug":1652,"title":1653,"desc":1654},"\u002Fblog\u002Flearn\u002Fbuilding-your-first-qollab-project\u002Fbring-your-own-code","5 · Bring your own code into Qollab","Move a circuit you wrote locally into a Qollab project and run it.",[],{"title":1657,"description":1658},"Fork and continue a project · Building your first Qollab project","How to fork a public Qollab project into your own editable copy and keep building on it.","blog\u002Flearn\u002Fbuilding-your-first-qollab-project\u002Ffork-a-project",[],"Cc1KorVfDJwsAfIZMrTX2nfROyOmZRU1oX6woeASawI",{"id":1663,"title":1664,"authors":1665,"body":1666,"breadcrumb":1869,"builders":1870,"byline":1871,"category":534,"categoryName":534,"challenge":534,"courseAuthor":534,"courseLead":534,"dek":1872,"description":1873,"draft":537,"extension":538,"eyebrow":534,"featured":537,"finish":1874,"fork":534,"hero":534,"heroAlt":534,"heroCta":534,"heroImage":534,"homepageFeatured":537,"kind":542,"lessonCount":232,"meta":1875,"navigation":178,"newsItems":534,"next":1876,"ogImage":534,"order":232,"outcomes":534,"path":1652,"publishDate":549,"readingTime":1181,"related":1879,"relatedProjects":534,"seo":1880,"stem":1883,"tags":1884,"track":556,"trackName":530,"__hash__":1885},"blog\u002Fblog\u002Flearn\u002Fbuilding-your-first-qollab-project\u002Fbring-your-own-code.md","Bring your own code into Qollab",[7],{"type":9,"value":1667,"toc":1863},[1668,1671,1675,1686,1690,1693,1762,1775,1824,1828,1838,1840,1860],[12,1669,1670],{},"If you already write Qiskit locally, you do not have to start over in the browser. Paste your circuit into a Qollab project and run it. One thing changes: how you reach a backend.",[35,1672,1674],{"id":1673},"your-circuit-carries-over","Your circuit carries over",[12,1676,1677,1678,1680,1681,1683,1684,102],{},"The Qiskit you write is standard, so the part that builds your circuit works unchanged: ",[99,1679,159],{},", gates, measurements, transpilation. Paste it into a project's ",[22,1682,1001],{}," tab, the same editor from ",[16,1685,951],{"href":18},[35,1687,1689],{"id":1688},"swap-the-provider-setup-for-the-pre-created-backend","Swap the provider setup for the pre-created backend",[12,1691,1692],{},"Locally, you set up a provider with an API key and asked it for a backend:",[135,1694,1696],{"className":749,"code":1695,"language":751,"meta":140,"style":140},"# Local: you manage the provider and key yourself\nfrom qiskit_ionq import IonQProvider\n\nprovider = IonQProvider(token=\"your_api_key\")\nbackend = provider.get_backend(\"simulator\")\n",[99,1697,1698,1703,1715,1719,1742],{"__ignoreMap":140},[144,1699,1700],{"class":146,"line":147},[144,1701,1702],{"class":292},"# Local: you manage the provider and key yourself\n",[144,1704,1705,1707,1710,1712],{"class":146,"line":175},[144,1706,165],{"class":150},[144,1708,1709],{"class":154}," qiskit_ionq ",[144,1711,151],{"class":150},[144,1713,1714],{"class":154}," IonQProvider\n",[144,1716,1717],{"class":146,"line":182},[144,1718,179],{"emptyLinePlaceholder":178},[144,1720,1721,1724,1726,1729,1731,1735,1737,1740],{"class":146,"line":214},[144,1722,1723],{"class":154},"provider ",[144,1725,794],{"class":192},[144,1727,1728],{"class":196}," IonQProvider",[144,1730,200],{"class":154},[144,1732,1734],{"class":1733},"s_ZVi","token",[144,1736,794],{"class":192},[144,1738,1739],{"class":168},"\"your_api_key\"",[144,1741,803],{"class":154},[144,1743,1744,1747,1749,1752,1755,1757,1760],{"class":146,"line":232},[144,1745,1746],{"class":154},"backend ",[144,1748,794],{"class":192},[144,1750,1751],{"class":154}," provider.",[144,1753,1754],{"class":196},"get_backend",[144,1756,200],{"class":154},[144,1758,1759],{"class":168},"\"simulator\"",[144,1761,803],{"class":154},[12,1763,1764,1765,1769,1770,1774],{},"On Qollab you delete all of that. A ",[22,1766,1767],{},[99,1768,113],{}," is already created for you, and you choose where it runs in the ",[16,1771,1773],{"href":1772},"\u002Flearn\u002Fdocs\u002Fcompute-backends","Select QPU dialog"," when you press Run. There are no keys to manage:",[135,1776,1778],{"className":749,"code":1777,"language":751,"meta":140,"style":140},"# Qollab: backend is pre-created; just run against it\njob = backend.run(circuit, shots=100)\nprint(job.result().get_counts())\n",[99,1779,1780,1785,1808],{"__ignoreMap":140},[144,1781,1782],{"class":146,"line":147},[144,1783,1784],{"class":292},"# Qollab: backend is pre-created; just run against it\n",[144,1786,1787,1790,1792,1795,1797,1800,1802,1804,1806],{"class":146,"line":175},[144,1788,1789],{"class":154},"job ",[144,1791,794],{"class":192},[144,1793,1794],{"class":154}," backend.",[144,1796,314],{"class":196},[144,1798,1799],{"class":154},"(circuit, ",[144,1801,324],{"class":1733},[144,1803,794],{"class":192},[144,1805,330],{"class":203},[144,1807,803],{"class":154},[144,1809,1810,1812,1815,1817,1819,1821],{"class":146,"line":182},[144,1811,862],{"class":192},[144,1813,1814],{"class":154},"(job.",[144,1816,367],{"class":196},[144,1818,376],{"class":154},[144,1820,373],{"class":196},[144,1822,1823],{"class":154},"())\n",[35,1825,1827],{"id":1826},"run-and-share","Run and share",[12,1829,656,1830,1832,1833,1837],{},[22,1831,464],{},", pick a simulator (free) or real hardware (credits), and read your results in the console. Your project is now shareable, forkable, and one click from real hardware, without any local setup. ",[16,1834,1836],{"href":1835},"\u002Flearn\u002Fdocs\u002Fpublish","Publishing and versions"," covers making it public.",[35,1839,1619],{"id":1618},[90,1841,1842,1848,1854],{},[93,1843,1844],{},[16,1845,1847],{"href":1846},"\u002Flearn\u002Fdocs\u002Fruntime-environment","The runtime environment",[93,1849,1850],{},[16,1851,1853],{"href":1852},"\u002Flearn\u002Fdocs\u002Frun-your-code","Running your code",[93,1855,1856],{},[16,1857,1859],{"href":1858},"\u002Flearn\u002Fquantum-computing-with-python","Quantum computing with Python and Qiskit",[517,1861,1862],{},"html pre.shiki code .sV9Aq, html code.shiki .sV9Aq{--shiki-default:#7F848E;--shiki-default-font-style:italic}html pre.shiki code .seHd6, html code.shiki .seHd6{--shiki-default:#C678DD}html pre.shiki code .sn6KH, html code.shiki .sn6KH{--shiki-default:#ABB2BF}html pre.shiki code .sjrmR, html code.shiki .sjrmR{--shiki-default:#56B6C2}html pre.shiki code .sVbv2, html code.shiki .sVbv2{--shiki-default:#61AFEF}html pre.shiki code .s_ZVi, html code.shiki .s_ZVi{--shiki-default:#E06C75;--shiki-default-font-style:italic}html pre.shiki code .subq3, html code.shiki .subq3{--shiki-default:#98C379}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);}html pre.shiki code .sVC51, html code.shiki .sVC51{--shiki-default:#D19A66}",{"title":140,"searchDepth":175,"depth":175,"links":1864},[1865,1866,1867,1868],{"id":1673,"depth":175,"text":1674},{"id":1688,"depth":175,"text":1689},{"id":1826,"depth":175,"text":1827},{"id":1618,"depth":175,"text":1619},[528,529,530,1664],[],{"username":7,"name":528,"role":533,"avatar":140},"Move a circuit you wrote locally into Qollab: the Qiskit carries over, the provider setup does not.","Move a circuit you wrote locally into a Qollab project: your Qiskit carries over, and you swap the local provider setup for a pre-created backend.","That is the course. You can create, run, fork, and bring your own code to Qollab.",{},{"slug":587,"title":1877,"desc":1878},"Share what you built","Publish your project so others can fork it, and browse what the community is building.",[],{"title":1881,"description":1882},"Bring your own code into Qollab · Building your first Qollab project","How to move a Qiskit circuit you wrote locally into a Qollab project and run it on the pre-created backend.","blog\u002Flearn\u002Fbuilding-your-first-qollab-project\u002Fbring-your-own-code",[],"KfMK6oVgKolkluRSaNgVKIpmSN-lv43OpMayZBpmmwk",1788974871349]