quantum-viz.js

quantum-viz.js (or qviz) is a configurable tool for rendering quantum circuits. With the increasing demand for quantum libraries and educational tools, quantum circuits provide an intuitive way to visualize and understand quantum algorithms. quantum-viz.js is a lightweight library that can be easily integrated into any project. It aims to be easily configurable while allowing complex user interactions, such as toggling between different measurement outcomes.

Getting Started

Installation

Include quantum-viz.js in your HTML page by using it directly from CDN:

<script src="https://unpkg.com/@microsoft/quantum-viz.js"></script>

or import it in into your TypeScript package:

npm i @microsoft/quantum-viz.js

Usage

1. Create a Circuit JavaScript object (the Circuit schema is documented here):

const sampleCircuit = {
    qubits: [
        // ...
    ],
    operations: [
        // ...
    ],
};

2. Draw it in a div:

const sampleDiv = document.getElementById('sample');
qviz.create(sampleCircuit)
    .draw(sampleDiv)

Refer to the example folder for an example on how to use quantum-viz.js. Notice that in order to open the contents of this folder in a browser you will need first to install from source (see below).

3. Enable extensions by:

const sampleDiv = document.getElementById('sample');
qviz.create(sampleCircuit)
    .useDraggble() // drag and drop
    .usePanel() // edit and add panel
    .useOnCircuitChange(circuit => console.log(circuit)) // trigger when circuit changes
    .draw(sampleDiv)

Python usage

To use this package with Python, use quantum-viz.

Running from source

Installing

To build and install this project from source, run the following commands from the root folder of this repository:

# Install dependencies
> npm install
# Build
> npm run build:prod

Running tests

To run tests for this project, run the following commands:

# Installs dependencies (run this step if you haven't)
> npm install
# Starts Jest tests
> npm run test

Contributing

Check out our contributing guidelines to find out how you can contribute to quantum-viz.js!

Feedback

If you have feedback about this library, please let us know by filing a new issue!

Reporting Security Issues

Security issues and bugs should be reported privately, via email, to the Microsoft Security Response Center (MSRC) at secure@microsoft.com. You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Further information, including the MSRC PGP key, can be found in the Security TechCenter.

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.