react-openqasm-editor

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.