CDN Usage

No build step —
just load and run.

@masabando/quantum-gates can be used directly in the browser via a CDN.
This is useful for quick experiments, demos, and educational materials where a build step is unnecessary.

Using ESM in the browser

Load the library as an ES module using a CDN such as jsdelivr.
Make sure to use type="module".

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <script type="importmap">

      "imports": {

        "@masabando/quantum-gates": "https://cdn.jsdelivr.net/npm/@masabando/quantum-gates/+esm"

  </script>

</head>

<body>

  <div id="target"></div>

  <script type="module">

    import { Complex } from "@masabando/quantum-gates"

    const a = new Complex(1, 2)

    const b = new Complex(3, 4)

    console.log(a.add(b).toString()) // "4 + 6i"

    QTool.createFidelityMap({

      target: "#target",

      gateName: "reduced CORPSE/BB1",

      theta: Math.PI,

      phi: 0,

      width: 400,

      height: 400,

});

  </script>

</body>

</html>

Bloch Sphere Animation

This example visualizes a quantum state on the Bloch sphere in real time.
The animation uses easy-three as a lightweight 3D helper, while the quantum logic itself comes from quantum-gates.

The target element must have an explicit width and height. By default, a div has zero height.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <script type="importmap">

      "imports": {

        "three": "https://cdn.jsdelivr.net/npm/three@0.178.0/build/three.module.js",

        "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.178.0/examples/jsm/",

        "@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3/lib/three-vrm.module.min.js",

        "@masabando/easy-three": "https://cdn.jsdelivr.net/gh/masabando/easy-three@1.11.6/dist/easy-three.js",

        "@masabando/quantum-gates": "https://cdn.jsdelivr.net/npm/@masabando/quantum-gates/+esm"

  </script>

</head>

<body>

  <div id="bloch" style="width: 400px; height: 400px;"></div>

  <script type="module">

    import { init } from "@masabando/easy-three";

    import { QTool, QState } from "@masabando/quantum-gates";

    QTool.createAnimation({

      init,

      target: "#bloch",

      pulseName: "reduced CORPSE/BB1",

      angle: Math.PI / 2,

      phi: 0,

      initState: new QState([1, 0]),

      speed: 4,

})

  </script>

</body>

</html>

When to use CDN

Quick prototypes and small demos
Educational pages and lecture materials
Code pens or single-file experiments

Notes

CDN usage relies on modern browsers with ES module support.
For production applications, a bundler-based setup is recommended.