core

@tabkit/core

Core SVG tablature renderer. Supports themes, multiple instruments, responsive reflow, left-handed mode, technique decorations, and accessibility.

Playground

Tablature for guitar, 3 measures6-string guitar tablature. Measure 1 (Intro) in 4/4: string 3 fret 0; string 3 fret 2; string 2 fret 0; string 2 fret 1. Measure 2 in 4/4: string 2 fret 3; string 2 fret 1; string 2 fret 0; string 3 fret 2. Measure 3 (End) in 4/4: string 3 fret 0; string 3 fret 2.EBGDAE44Intro02013102End02
View generated code
TabRenderer.svg({
  measures, // 3 measures
  instrument: "guitar",
  theme: "light",
  layout: "fixed",
  width: 900,
  leftHanded: false,
  showTuning: true,
  showTimeSignature: true,
  noteLabels: false,
});

Export

SVG Data URL → <img>

Exported tab

Export Methods

// SVG string
const svg = TabRenderer.svg(options);

// SVG data URL (for <img>)
const url = TabRenderer.toSVGDataURL(options);

// PNG blob (browser only)
const blob = await TabRenderer.toPNG(options);

// Trigger download
await TabRenderer.download(options, {
  format: "png", filename: "my-tab",
});

Accessibility

Auto-generated ARIA labels for current configuration:

Tablature for guitar, 3 measures
import { generateAriaTitle, resolveInstrument } from "@tabkit/core";

const inst = resolveInstrument("guitar");
const title = generateAriaTitle({ measures }, inst);
// → "Tablature for guitar, 3 measures"

Config Inspector

Live resolved values — changes when you switch instrument or theme above.

import { resolveInstrument, resolveTheme } from "@tabkit/core";

const instrument = resolveInstrument("guitar");
const theme = resolveTheme("light");

resolveInstrument("guitar")

{
  "strings": 6,
  "frets": 24,
  "tuning": [
    "E",
    "B",
    "G",
    "D",
    "A",
    "E"
  ],
  "name": "guitar"
}

resolveTheme("light")

{
  "background": "#ffffff",
  "stringColor": "#374151",
  "fretNumberColor": "#111827",
  "barlineColor": "#6b7280",
  "cursorColor": "#3b82f6",
  "textColor": "#111827",
  "accentColor": "#2563eb",
  "techniqueColor": "#7c3aed",
  "fontFamily": "'JetBrains Mono', 'Fira Code', 'SF Mono', monospace"
}

Utility Functions

import { durationToBeats, measureDurationBeats, mirrorMeasures, reflowMeasures } from "@tabkit/core";

durationToBeats("4n");           // → 1
durationToBeats("8n");           // → 0.5
measureDurationBeats(measures[0]); // → total beats in measure
mirrorMeasures(measures, inst);  // → left-handed version

durationToBeats

"1n"4 beats
"2n"2 beats
"4n"1 beats
"8n"0.5 beats
"16n"0.25 beats
"32n"0.125 beats
"8t"0.3333333333333333 beats

measureDurationBeats

Measure 1 (Intro)4 beats
Measure 24 beats
Measure 3 (End)4 beats

Current Measures

3 measures

Instrument: guitar

Strings: 6

Tuning: E B G D A E

reflowMeasures

Breaks measures into multiple lines that fit within the available width. Drag the slider to change the width and see how measures reflow.

2 lines · 300px height
Tablature for guitar, 3 measures6-string guitar tablature. Measure 1 (Intro) in 4/4: string 3 fret 0; string 3 fret 2; string 2 fret 0; string 2 fret 1. Measure 2 in 4/4: string 2 fret 3; string 2 fret 1; string 2 fret 0; string 3 fret 2. Measure 3 (End) in 4/4: string 3 fret 0; string 3 fret 2.EBGDAE44Intro02013102EBGDAE44End02
import { reflowMeasures, resolveInstrument, DEFAULT_LAYOUT } from "@tabkit/core";

const inst = resolveInstrument("guitar");
const result = reflowMeasures(measures, inst, DEFAULT_LAYOUT, 500);
// → { lines: [{ measures: [2], startIdx: 0 }, { measures: [1], startIdx: 2 }], totalHeight: 300 }

mirrorMeasures

Flips string numbers for left-handed players. String 1 (thinnest) moves from top to bottom.

Original (right-handed)

Tablature for guitar, 3 measures6-string guitar tablature. Measure 1 (Intro) in 4/4: string 3 fret 0; string 3 fret 2; string 2 fret 0; string 2 fret 1. Measure 2 in 4/4: string 2 fret 3; string 2 fret 1; string 2 fret 0; string 3 fret 2. Measure 3 (End) in 4/4: string 3 fret 0; string 3 fret 2.EBGDAE44Intro02013102EBGDAE44End02

Mirrored (left-handed)

Tablature for guitar, 3 measures6-string guitar tablature. Measure 1 (Intro) in 4/4: string 4 fret 0; string 4 fret 2; string 5 fret 0; string 5 fret 1. Measure 2 in 4/4: string 5 fret 3; string 5 fret 1; string 5 fret 0; string 4 fret 2. Measure 3 (End) in 4/4: string 4 fret 0; string 4 fret 2.EADGBE44Intro02013102EADGBE44End02
import { mirrorMeasures, resolveInstrument } from "@tabkit/core";

const inst = resolveInstrument("guitar");
const mirrored = mirrorMeasures(measures, inst);
// String numbers are flipped: S1↔S6, S2↔S5, etc.

API Quick Reference

NameDescription
TabRenderer.svg(opts)Render tablature to SVG string
TabRenderer.toSVGDataURL(opts)SVG as base64 data URL
TabRenderer.toPNG(opts)Render to PNG (browser)
TabRenderer.download(opts, exp)Trigger download
resolveInstrument(preset)Get full instrument config
resolveTheme(preset)Get full theme object
reflowMeasures(...)Break measures into lines
mirrorMeasures(m)Mirror for left-handed
durationToBeats(d)Duration to beat count
generateAriaTitle(opts, inst)ARIA title for a11y