Integration Guide

How to integrate the Notations library into your application

This guide shows you how to integrate the Notations library into various platforms and frameworks.

Choose Your Integration

CDN / Vanilla HTML

No build tools required. Just add script tags and start using notation in any HTML page.

Web Components

Use the notations-web package for easy integration with any web application. Works with vanilla JS, jQuery, or any framework.

React

Create React components for notation rendering with hooks and state management.

Vue

Build Vue components with reactive notation rendering and watchers.

Node.js

Server-side parsing and processing of notation data.

CDN / Vanilla HTML

The simplest way to add notation to any webpage - no build tools, npm, or bundlers required. Just add two script/link tags and you're ready to go.

Complete Standalone HTML Example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Carnatic Notation</title>

  <!-- Notation styles -->
  <link rel="stylesheet" href="https://unpkg.com/notations/dist/NotationView.min.css">
</head>
<body>
  <div id="notation-container"></div>

  <!-- Notation library -->
  <script src="https://unpkg.com/notations/dist/notations.umd.min.js"></script>

  <script>
    const notation = `
\\cycle("|4|2|2|")
Sw: S R G M P D N S.
Sh: sa ri ga ma pa dha ni sa
    `;

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

    if (errors.length === 0) {
      const view = new Notations.Carnatic.NotationView(container);
      view.renderNotation(parsed, beatLayout);
    }
  </script>
</body>
</html>
\cycle("|4|2|2|") Sw: S R G M P D N S. Sh: sa ri ga ma pa dha ni sa

CDN URLs

Asset URL
JavaScript (minified) https://unpkg.com/notations/dist/notations.umd.min.js
JavaScript (development) https://unpkg.com/notations/dist/notations.umd.js
CSS (minified) https://unpkg.com/notations/dist/NotationView.min.css
CSS (development) https://unpkg.com/notations/dist/NotationView.css

The library exposes a global Notations object with all exports:

// Available on window.Notations
const { load, Carnatic, Notation, Atom } = Notations;

// Parse notation
const [notation, beatLayout, errors] = Notations.load(source);

// Render
const view = new Notations.Carnatic.NotationView(container);
view.renderNotation(notation, beatLayout);

Quick Start (npm)

For projects using npm/pnpm with a bundler:

npm install notations notations-web
import { NotationBlock } from "notations-web";
import * as N from "notations";

// Create a viewer factory
function createViewer(container) {
  return new N.Carnatic.NotationView(container);
}

// Process all <notation> tags on the page
document.querySelectorAll("notation").forEach(elem => {
  new NotationBlock(elem, { createViewer });
});

Then add notation in your HTML:

<notation showSource="true">
\cycle("|4|2|2|")
Sw: S R G M P D N S.
Sh: sa ri ga ma pa dha ni sa
</notation>

Which renders as:

\cycle("|4|2|2|") Sw: S R G M P D N S. Sh: sa ri ga ma pa dha ni sa

See Also