QuirkVis JS

A highly customizable Quantum Circuit SVG Visualizer for the Web and Node.js. This is a JavaScript/TypeScript reimplementation of the quantum_quirkvis Python library.

Features

• OpenQASM 3 Support: Handles gates, registers, measurements, and barriers.
• Highly Customizable: Uses JSON-based themes to control every aspect of the circuit's appearance.
• Multiple Themes Included: Default, Emoji, Matrix, and Night.
• Interactive Mode: Hover over gates and moments with visual highlighting and receive detailed element info via callbacks.
• Lightweight: Optimized for performance in both browser and server environments.

Quick Start

Installation

npm install @ljcamargo/quirkvis-core

Usage in Node.js

import { draw, themes } from '@ljcamargo/quirkvis-core';
import fs from 'fs';

const svg = draw(qasmString, themes.matrix);
fs.writeFileSync('circuit.svg', svg);

// With interactive data attributes (no CSS, just markup for detection):
const svgInteractive = draw(qasmString, themes.default, { interactive: true });

The draw() function accepts an options object as the third argument:

interface RenderOptions {
  interactive?: boolean;     // Adds data-qv-* attrs to circuit elements
  highlightMoment?: number;  // Future: programmatic moment highlight
  highlightGate?: string;    // Future: programmatic gate highlight
}

Themes

Themes can include an optional interaction section to customize the hover highlight appearance:

{
  "interaction": {
    "moment_highlight": {
      "fill": "rgba(0,0,0,0.06)",
      "cursor": "pointer"
    }
  }
}

Development

This project uses Bun for development.

# Install dependencies
bun install

# Build all packages
bun run build

# Run the sample demo app
bun run sample

License

MIT