FretCharts

Guitar chord, scale, and neck diagrams from compact tablature notation.

Try:
Chord

One character per string, low E first: x muted, 0 open, digits = fret.

Per-string details labels, fingers, classes, shapes

Strings run low (6) to high (1); blank strings are left out.

Styling

CSS embedded in the SVG. See the README for every class.

Markup for <defs>, e.g. a gradient to use as fill: url(#myGradient).

FretCharts file preview 

      

      


      

        

          
          
        

        
        
        
      

      
    

    


    

      
      
      

    

    

  


  
  

    

    

    

      

        Chords
        

          
          
          

            Columns
            
Requires a notes column. Optional: label, string-labels, finger-positions, note-classes, root, tuning, label-pitches, label-tuning. Per-row stylesheet is rejected; use the shared Styling section. Quote fields containing commas, quotes, or JSON, doubling inner quotes (standard CSV, as in the placeholder).

          

        


        

          

            
            
          

          

            
            
          

          

            
            
          

        

      


      

      

        Shared defaults used where a row leaves a column blank

        

          
          
        


        

          
          
        


        

          

            
            

              
              
            

          

          
          

            

              

              

              

              

              

              

            

          

        


        

          

            
            

              
              
            

          

          
          

            

              

              

              

              

              

              

            

          

        


        

          

            
            

              
              
            

          

          

            
          

          
        

        
Strings run low (6) to high (1); blank strings are left out.

      


      

        Styling applies to the whole grid
        

          

            
            
          

          
          
CSS for every chart and the grid background. See the README for every class.

        

        

          
          
          
Markup for <defs> in every chart, e.g. a gradient to use as fill: url(#myGradient).

        

      


      

        FretCharts file preview
        

      

      


      

        

          
          
        

        
        
        
      

      
    

    


    

      
      
      

    

    

  


  
  

    

    

    
One triad per chord, all on the same three adjacent strings. The first chord (or the key's chord) is the anchor; the rest keep your hand moving as little as possible.

    

      

        Progression
        

          
          
          

            Supported chords
            
Separate with spaces or commas. Qualities: maj, m, dim, aug, sus2, sus4, 6, m6, 7, maj7, m7, m7b5, dim7, add9, e.g. F#m, Gsus4, Bm7b5. Four-note chords drop their 5th (m7b5/dim7 drop the 3rd).

          

        

        

          

            
            
          

          

            
            
          

          

            
            
          

        

      


      

        Constraints
        

          

            
            
            
e.g. 1-4 or 1,2,3,4 (1 = high E).

          

          

            
            
            
Lowest fret (5), or string,fret pitch (5,3).

          

          

            
            
          

          

            
            
          

          

            
            
          

          

            
            
          

        

      


      

      

        Styling
        

          

            
            
          

          
          
Each root is tagged root; every note is labeled with its interval.

        

        

          
          
        

      

      


      

        

          
          
        

        
      

    

    


    

      
      
      

      
    

    

  


  
  

    

    

    

      Try:
      
    

    

      

        Chart

        

          

            
            
          

          

            
            
          

          

            
            
          

          

            
            
          

        


        

          
          
          
        

      


      

        Markers
        

          StringFretLabelClassFingerShape
        

        

        
        
Rows without a fret are ignored.

      


      

      

        Styling
        

          

            
            
          

          
          
CSS embedded in the SVG. See the README for every class.

        

        

          
          
          
Markup for <defs>, e.g. a gradient to use as fill: url(#myGradient).

        

      


      

        FretCharts file preview & export options
        

          
          
        

        
Both apply to the FretCharts File and Copy link buttons too.

        

      

      


      

        

          
          
        

        
        
        
      

      
    

    


    

      
      
      

    

    

  


  
  

    

    

    

      Try:
      
    

    

      

        Neck
        
A horizontal view over a fret range, nut on the left. Same markers as Scale chart.


        

          

            
            
          

          

            
            
          

          

            
            
          

          

            
            
          

          

            
            
          

          

            
            
          

        


        

          
          
          
        

      


      

        Markers
        

          StringFretLabelClassFingerShape
        

        

        
        
Rows without a fret are ignored.

      


      

      

        Styling
        

          

            
            
          

          
          
Same classes as other charts, plus chord-neck-fret-label / chord-neck-fret-label-N.

        

        

          
          
          
Markup for <defs>, e.g. a gradient to use as fill: url(#myGradient).

        

      


      

        FretCharts file preview & export options
        

          
          
        

        
Both apply to the FretCharts File and Copy link buttons too.

        

      

      


      

        

          
          
        

        
        
        
      

      
    

    


    

      
      
      
      

    

    

  


  
  

    

    

    

      

        FretCharts File
        
A self-contained chord, scale, neck, or chords file with its own notes and styling. See the README's "FretCharts files" section.


        

          
          
          
Fills in the tab matching its type:, or loads it below as text. Nothing is sent until you render.

        


        

          
          
          
YAML or JSON. Use inline stylesheet/defs/csv; the *File references only work from the CLI.