Live Examples

Show don't tell! This page is a bit of a sandbox demonstrating the things you can do with jTab.

Render notation provided by a user

Try it out. Enter a phrase here (see notation for help):
jTab will render your phrase here

Implicitly render a chord-only phrase

Note that the "chordonly" class is optional (it just pre-adjusts display size to reduce screen jitter). 

<div class="jtab chordonly"> E / / / | A7 / B7 / || </div>
E / / / | A7 / B7 / ||

Implicitly render a custom named chord

<div class="jtab chordonly"> %7/2.X/X.7/3.7/4.6/1.X/X[Bm7b5] </div>
%7/2.X/X.7/3.7/4.6/1.X/X[Bm7b5]

Implicitly render a tab-only phrase

Note that the "tabonly" class is optional (it just pre-adjusts display size to reduce screen jitter). 

<div class="jtab tabonly">$4.7/9.$3.6/8.$2.5/7 9p7 $2.9.$3.9.$4.9 ||</div>
$4.7/9.$3.6/8.$2.5/7 9p7 $2.9.$3.9.$4.9 ||

Implicitly render a mixed chord and tab phrase

<div class="jtab">Bm $3 4 4h5p3h4 5 $2 3 5 7 7h8p7 5/7 | A $4 7 9 $3 7 6 $5 9 $4 7h9 7 $5 9\7 5/7 ||</div>
Bm $3 4 4h5p3h4 5 $2 3 5 7 7h8p7 5/7 | A $4 7 9 $3 7 6 $5 9 $4 7h9 7 $5 9\7 5/7 ||

A simple three note sequence on the B (2nd) string

<div class="jtab tabonly">$B 0 1 3 | $2 5 3 0 ||</div>
$2 0 1 3 | $B 5 3 0 ||

A sequence of notes across two strings

Demonstrates using both 654321 and EADGBe for string numbering.. 

<div class="jtab tabonly">$2 0 1 3 $1 0 1 3/5 | $B 0 1 3 $e 0 1 3/5 ||</div>
$2 0 1 3 $1 0 1 3/5 | $B 0 1 3 $e 0 1 3/5 ||

More than one note at a time in tab

<div class="jtab tabonly">$3.6.$2.5h7 $1 5 $2 7 |</div>
<div class="jtab tabonly">$4.7/9.$3.6/8.$2.5/7 9p7 $2.9.$3.9.$4.9 ||</div>
$3.6.$2.5h7 $1 5 $2 7 |
$4.7/9.$3.6/8.$2.5/7 9p7 $2.9.$3.9.$4.9 ||

Shorthand tab notation for all strings

Tab for a whole or partial chord can be easier to enter as a full six-string block. Periods are required when you go above the 9th fret, and use X or x to indicate an unused string. 

<div class="jtab tabonly">022100 / / / X02220 / 8.10.10.9.8.8 / ||</div>
022100 / / / X02220 / 8.10.10.9.8.8 / ||

Scripted rendering

<div id="mytab"></div>
<script type="text/javascript">
    jtab.render($('#mytab'),'Am7 C');
</script>

Actual result is this:

jTab rendering here..

CAGED notation

<div class="jtab chordonly">C:1 C:2 C:3 C:4 C:5</div>
<div class="jtab chordonly">C:6 C:7 C:8 C:9 C:10</div>
<div class="jtab chordonly">Cm:1 Cm:2 Cm:3 Cm:4 Cm:5</div>
<div class="jtab chordonly">Eb7:1 Eb7:2 Eb7:3 Eb7:4 Eb7:5</div>
C:1 C:2 C:3 C:4 C:5
C:6 C:7 C:8 C:9 C:10
Cm:1 Cm:2 Cm:3 Cm:4 Cm:5
Eb7:1 Eb7:2 Eb7:3 Eb7:4 Eb7:5

Customising the color palette

jTab will render using the color and background-color styles of the enclosing HTML element. 

<div class="jtab" style="color:blue;background-color:yellow">Am $e 3 1 0</div>
Am $e 3 1 0