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.

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

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.draw(sampleCircuit, sampleDiv, qviz.STYLES['Default']);

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).

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

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

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

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

Security issues and bugs should be reported privately, via email, to the Microsoft Security Response Center (MSRC) at [email protected]. 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.

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.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.