OpenQASM Editor

A powerful, customizable code editor for OpenQASM (Open Quantum Assembly Language) based on Monaco Editor.

Features

• Syntax highlighting for OpenQASM language
• Code completion with intelligent suggestions
• Hover information for language elements
• Code formatting capabilities
• Diagnostics and error detection
• Customizable themes and editor options
• Built-in quantum code example templates

Installation

npm install openqasm-editor
# or
yarn add openqasm-editor

Usage

import { OpenQASMEditor } from 'openqasm-editor';

function App() {
  const handleEditorChange = (value, event) => {
    console.log('Editor content:', value);
  };

  const handleEditorMount = (editor) => {
    // You can access the editor instance here
    console.log('Editor mounted:', editor);
  };

  return (
    <OpenQASMEditor
      width="800px"
      height="500px"
      theme="vs-dark" // or "vs-light"
      defaultvalue={`OPENQASM 2.0;
include "qelib1.inc";

// Quantum program
qreg q[2];
creg c[2];

h q[0];
cx q[0], q[1];
measure q -> c;`}
      onChange={handleEditorChange}
      onMount={handleEditorMount}
      options={{
        // Monaco editor options
        fontSize: 14,
        lineNumbers: 'on',
        minimap: { enabled: false },
        // Add any other Monaco editor options here
      }}
    />
  );
}

Props

| Prop | Type | Default | Description | | -------------- | ---------- | ----------------------- | -------------------------------------- | | width | string | 800px | Width of the editor | | height | string | 500px | Height of the editor | | theme | string | vs-dark | Editor theme (vs-dark or vs-light) | | defaultvalue | string | Basic quantum program | Initial code in the editor | | value | string | undefined | Controlled value for the editor | | options | object | {} | Monaco editor options | | onChange | function | noop | Called when editor content changes | | onMount | function | noop | Called when editor is mounted |

Development

Setup

git clone https://github.com/xy2002/openqasm-editor
npm install 
npm run generate-antlr
npm run build

Scripts

• pnpm dev - Start development server
• pnpm build - Build the library
• pnpm lint - Run ESLint
• pnpm storybook - Run Storybook for component development
• pnpm generate-antlr - Generate ANTLR parser for OpenQASM grammar

OpenQASM Language

This editor supports the OpenQASM 2.0 specification, which is an intermediate representation for quantum circuits. The language includes:

• Quantum register and classical register declarations
• Gate definitions and applications
• Measurements
• Conditional operations
• Mathematical expressions for rotations and phases

For more information on OpenQASM, see the OpenQASM specification.