ABC Editor

A React component for editing ABC music notation with syntax highlighting, autocomplete, and real-time validation.

You can try it on web

Here

Features

- Light & Dark Mode: Built-in theme support with light mode as default
- Syntax Highlighting: Color-coded ABC notation elements optimized for both themes
- Line Numbers: Clear visual reference for navigation
- Autocomplete: Smart suggestions for ABC notation commands and fields
- Real-time Validation: Measure beat count validation with visual feedback
- Error Highlighting: Hover over validation errors to highlight the problematic measure

Installation

``bash
npm install @ovnonvo/abc-editor
`

or

`bash
yarn add @ovnonvo/abc-editor
`

Peer Dependencies

This package requires the following peer dependencies:

`json
{
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0",
"chamber-abc": "^0.2.0"
}
`

Install them if you haven't already:

`bash
npm install react react-dom chamber-abc
`

$3

For Next.js projects, add the package to transpilePackages in your next.config.mjs:

`javascript
const nextConfig = {
transpilePackages: ['@ovnonvo/abc-editor', 'chamber-abc'],
};

export default nextConfig;
`

Usage

$3

`tsx
import { useState } from 'react';
import { AbcEditor } from '@ovnonvo/abc-editor';

function App() {
const [abcCode, setAbcCode] = useState(X:1
T:Untitled
M:4/4
K:C
C D E F | G A B c |);

return (


export default App;
`

Note: Styles are automatically included - no need to import CSS separately!

$3

`tsx
import { useState } from 'react';
import { AbcEditor, type Theme } from '@ovnonvo/abc-editor';

function App() {
const [abcCode, setAbcCode] = useState(X:1
T:Untitled
M:4/4
K:C
C D E F | G A B c |);
const [theme, setTheme] = useState('light'); // 'light' or 'dark'

return (


export default App;
`

$3

#### AbcEditor

The main editor component with syntax highlighting and validation.

Props:
- value (string): The ABC notation code
- onChange ((value: string) => void): Callback when the code changes
- theme? ('light' | 'dark'): Editor theme (default: 'light')

Features:
- Line numbers
- Syntax highlighting with theme support
- Autocomplete (type / to trigger)
- Real-time validation
- Error display with hover highlighting
- Light and dark mode

$3

This package focuses on the editor functionality. For music notation preview, you can integrate a rendering library like abcjs:

`tsx
import { useEffect, useRef } from 'react';
import abcjs from 'abcjs';

function AbcPreview({ value, theme = 'light' }) {
const ref = useRef(null);

useEffect(() => {
if (ref.current) {
abcjs.renderAbc(ref.current, value, {
responsive: 'resize',
foregroundColor: theme === 'dark' ? '#ffffff' : '#000000',
});
}
}, [value, theme]);

return