Web Components Integration

Using notations-web for easy integration with any web application

The notations-web package provides ready-to-use web components that work with any JavaScript environment - vanilla JS, jQuery, or any framework.

Installation

npm install notations notations-web

Basic Usage

Set up notation rendering in your JavaScript:

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

// Define how to create notation viewers
function createViewer(container) {
  const table = document.createElement("table");
  table.classList.add("notation-table");
  container.appendChild(table);
  return new N.Carnatic.NotationView(table);
}

// Configure and process all <notation> tags
const config = {
  createViewer: createViewer,
  cssClasses: {
    sourceContainer: "bg-gray-100 p-4",
    sourceCaption: "font-bold",
    outputContainer: "p-4 bg-white"
  }
};

document.querySelectorAll("notation").forEach(elem => {
  new NotationBlock(elem, config);
});

HTML Notation Tags

Add notation directly in your HTML:

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

Output:

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

Tag Attributes

Attribute Type Description
id string Unique identifier (auto-generated if not provided)
showSource "true" | "false" Whether to display the source code (default: "false")
caption string Caption text for the source code block
sourceFrom string ID of another element to read source from
height string Height constraint for the output

Configuration Options

interface NotationBlockConfig {
  // Required: factory function to create notation viewers
  createViewer: (container: HTMLDivElement) => NotationView;

  // Optional: CSS classes for styling
  cssClasses?: {
    root?: string;              // Applied to root container
    sourceContainer?: string;   // Applied to source code container
    sourceCaption?: string;     // Applied to caption
    sourceCode?: string;        // Applied to code element
    outputLabel?: string;       // Applied to "Output:" label
    outputContainer?: string;   // Applied to notation output
  };
}

Styling Examples

With Tailwind CSS

const config = {
  createViewer,
  cssClasses: {
    root: "rounded-lg shadow-md",
    sourceContainer: "bg-white dark:bg-gray-800 rounded-t-lg p-4",
    sourceCaption: "text-lg font-semibold text-gray-900 dark:text-gray-100",
    sourceCode: "text-sm font-mono text-gray-800 dark:text-gray-200",
    outputContainer: "overflow-auto bg-gray-50 dark:bg-gray-700 p-4"
  }
};

With Custom CSS

const config = {
  createViewer,
  cssClasses: {
    root: "notation-block",
    sourceContainer: "notation-source",
    sourceCaption: "notation-caption",
    outputContainer: "notation-output"
  }
};

/* Your CSS */
.notation-block {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin: 1rem 0;
}

.notation-source {
  background: #f9fafb;
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.notation-caption {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.notation-output {
  padding: 1rem;
  overflow-x: auto;
}

Advanced: External Source

Load notation from a separate element:

<script type="text/notation" id="varnam-source">
\cycle("|4|2|2|")
\beatDuration(4)
\line("Pallavi")
Sw: S , R , G , M , P , D , N , S. , 
Sh: ni , nnu , ko , ri , va , ra , nam , ma ,
</script>

<notation sourceFrom="varnam-source" showSource="true" caption="Varnam">
</notation>

Output:

\cycle("|4|2|2|") \beatDuration(4) \line("Pallavi") Sw: S , R , G , M , P , D , N , S. , Sh: ni , nnu , ko , ri , va , ra , nam , ma ,

Interactive Features

The NotationBlock component includes built-in interactivity:

  • Copy Button - Click to copy notation source to clipboard
  • Edit Mode - Click Edit to modify notation and see live updates
  • Apply/Cancel - Confirm or discard your edits

Try it yourself - click Edit on any notation block above!

See Also