0.1.5 • Public • Published

    Guitar-Chords overview

    This piece of work is for all guitar-players and learners.

    Music makes the world to a better place. All people should be enabled to play music. Everybody is invited to improve oneself, so this is free (MIT license). Use it, grab it, share it, improve it!

    Try out live example and / or include into your website. npm i guitar-chords-viewer

    A simple collection of all main-chords for guitarists. You can see chords...

    • as notes on a scale
    • as tab on a sterilized guitar neck.


    and you can play chords

    • Stacked or spread chord-notes:


    The frequenz of the notes is calculated based on a settable chamber note. Default is set to 440 Hz.

    Left-handed view

    You can also change/mirror the view of the guitar-neck. Normally the views are made for right-handed guitars. Changing the view might be more easy for left-handed learners to transport the image to the guitar neck.

    • L/R view for left-handed users.
    • notes, fingerings, strings, tuning are mirrored.



    Chord-viewer for chords. E.g. "C":

      strings: 'X 3 5 5 4 3',
      fingering: 'X 1 3 4 2 1',
      chordName: 'C,m,,',
      enharmonicChordName: 'C,m,,',
      voicingID: '9223372036959802495',
      tones: 'C,Eb,G'

    By now there is a set of the main-chords build in. This JSON generates all aspects of the guitar-chords-viewer. Use the parameter chordto inject a chord.

    export let chord = {
     strings: 'X 3 5 5 4 3',
     fingering: 'X 1 3 4 2 1',
     chordName: 'C,m,,',
     enharmonicChordName: 'C,m,,',
     voicingID: '9223372036959802495',
     tones: 'C,Eb,G'
    <GuitarChords {chord} />

    Made with Svelte.

    Usage as:

    • Web-component: <guitar-chords></guitar-chords>
        <script defer src=''></script>
    • or as svelte-component <GuitarChords />
    import GuitarChords from 'guitar-chords-viewer/src/GuitarChords.svelte';
    <GuitarChords />


    • chord; A chord-json; The chord to display.
    • show_chord_selector; default = true; Display the chord-buttons or hide.
    • chamber_tone; default = 440; The chamber tone for sound generation.


    npm i guitar-chords-viewer

    DownloadsWeekly Downloads






    Unpacked Size

    2.32 MB

    Total Files


    Last publish


    • nologin