Notations

A TypeScript library for parsing, modeling, and rendering Carnatic music notation.

Live Demo | Documentation

Features

• DSL Parser - Intuitive text-based notation format
• Flexible Rendering - SVG-based output with CSS theming
• Framework Agnostic - Works with React, Vue, vanilla JS, or any framework
• Light/Dark Mode - Built-in theme support via CSS variables

Quick Start

Via CDN (no build tools required)

<link rel="stylesheet" href="https://unpkg.com/notations/dist/NotationView.min.css">
<script src="https://unpkg.com/notations/dist/notations.umd.min.js"></script>

<script>
  const source = `
\\cycle("|4|2|2|")
Sw: S R G M P D N S.
  `;

  const container = document.getElementById('notation');
  const [notation, beatLayout, errors] = Notations.load(source);

  if (errors.length === 0) {
    const view = new Notations.Carnatic.NotationView(container);
    view.renderNotation(notation, beatLayout);
  }
</script>

Via npm/pnpm

npm install notations

import * as N from 'notations';
import 'notations/dist/NotationView.css';

const source = `
\\cycle("|4|2|2|")
Sw: S R G M P D N S.
`;

const [notation, beatLayout, errors] = N.load(source);

if (errors.length === 0) {
  const container = document.getElementById('notation');
  const view = new N.Carnatic.NotationView(container);
  view.renderNotation(notation, beatLayout);
}

Documentation

• Getting Started - Installation and setup
• Tutorials - Learn the notation syntax
• Demos - Demos
• API Reference - Full API documentation
• Integration Guide - React, Vue, Node.js integration
• Styling & Theming - Customize appearance with CSS variables
• Visual Tests - Visual sanity tests for notation rendering

License

MIT