Use the Code Playground

Every project on Qollab comes with a built-in code playground. It is 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 IonQ. No complex installations or local environments are required!

This guide will walk you through everything you need to know to start running your code.

Prerequisites

This guide assumes you have a free Qollab account (you can sign up here in seconds) and are signed in.

To use the Playground, you need to be viewing a project page that contains Qiskit or Python code. You can experiment with the code on any public project you find on the platform. If you want to run your own custom code, check out our guide to Create a Project on Qollab first.

Step 1: Open the Playground

To get started, navigate to any project page. Right below the project description, you will see a Code Playground section. Review your code or tweak your project's Python script. We've built the editor to be as helpful and user-friendly as possible:

• Syntax Highlighting: Keywords, method calls, and strings are color-coded to make reading your code a breeze.
• Smart Errors: If a line of code fails, the problematic line will light up red so you know exactly where to look.
• Focus Mode: Click the fullscreen icon in the toolbar when you need a distraction-free coding environment.

Step 2: Edit Your Code

Click on Run to switch to the coderunner. You will see a dropdown menu, a Run button, and a dark console panel waiting for your commands. Think of this as your quantum command center!

Step 3: Select a QPU

Use the Select QPU dropdown to choose where your circuit will execute:

• Simulators: These are free, run instantly, and are always available. They are the perfect sandbox for testing your logic and catching errors without using any resources.
• Hardware: Ready for the real thing? You can select physical IonQ quantum computers (like Harmony, Aria, or Forte).

Managing Credits: Running on actual hardware consumes credits. You can view your remaining balance or set a spending limit directly in your Qollab Profile Settings to ensure you always stay within your budget.

Step 4: Run Your Circuit

Click the Run button to execute your code. The console background will turn blue, and a timer will start tracking the elapsed time. If you ever need to stop the execution, an Interrupt button will appear while it's processing.

Step 5: Read the Output

Once your run is complete, the results will populate directly in the console panel below. Here is what you can expect to see:

• Standard Output: Any print() statements you included in your code.
• Errors: If something went wrong, you'll see a clear, red traceback pointing to the exact issue.
• Circuit & Probabilities: After a successful run, you will often see a visual diagram of the circuit that was sent to the QPU, along with a bar chart showing the measurement probabilities of your outcomes.

Step 6: Copy or Download

Need to save your results or share them in your project documentation? The toolbar just above the console has you covered:

• Copy: Quickly copy all the console text to your clipboard.
• Download: Save the full output as an HTML file, complete with your project name and a timestamp.

Technical Requirements

Browser Compatibility

To ensure the Code Playground runs smoothly, we recommend using a modern browser (like Chrome, Edge, or Opera) that supports WebAssembly JSPI. If you see a compatibility warning, simply switch to Chrome, Edge, or Opera. (If you are a Firefox user, you can enable this manually by going to about:config and setting javascript.options.wasm_js_promise_integration to true).