Guitar Diagrams JS is an open source JavaScript library for drawing guitar chords and scales on an HTML5 canvas.
Project: https://github.com/KCarlile/guitar-diagrams-js\
Version: \
Demo: https://demo.kcarlile.com/guitar-diagrams-js/
Guitar Diagrams JS is intended for instructional content developers publishing their own sites with musical instruction related to scales and chords for stringed instruments. It's a called Guitar Diagrams JS because the primary use is for guitarists, but it can also be used for bass, banjo, mandolin, dobro, violin (or fiddle), viola, cello, ukulele, and more!
The benefit of Guitar Diagrams JS is that it provides a visual representation of the instrument without requiring the content creator to design images graphically, download them, and embed them in HTML. The Guitar Diagrams JS library empowers you to create consistent scale and chord diagrams without ever needing to open a graphics program.
Here are some other comparisons to Guitar Diagrams JS:
Name | Description | Visual | Graphical | Instrument Representation | No Sheet Music Reading | Works with Musical Passages | Cost |
---|---|---|---|---|---|---|---|
Guitar Diagrams JS | Create diagrams with minimal code and no graphics | ✅ | ✅ | ✅ | ✅ | ❌ | $0 |
Tablature (tabs) | Create diagrams manually with text | ✅ | ✅ | ⚠️ | ✅ | ✅ | $0, but time consuming and error prone |
Graphic Design Software | Create diagrams manually with a graphic design program | ✅ | ✅ | ⚠️ | ✅ | ❌ | \$22.99/month, and very time consuming |
Sheet Music | Create sheet music | ✅ | ❌ | ❌ | ❌ | ✅ | \$99 or \$27.99/month, and requires music notation proficiency |
Key: ✅Yes. ⚠️Maybe, sorta, kinda, optional. ❌ No.
Kenny Carlile\ Website: KCarlile.com\ GitHub profile: @KCarlile
If you contribute to the project in any way (code, documentation, testing, etc.), your name will appear in the list of contributors below:
Please see the following pages for more information:
README.md
: this pagedocs/index.md
: general usage documentationdocs/api-docs.md
: API usage documentationdocs/index.md
: main landing page for project documentationdocs/api-docs.md
: API usage documentationdocs/code-owner-docs.md
: technical documentation for code ownersdocs/examples/index.html
: usage examplesdocs/CODE_OF_CONDUCT.md
: code of conduct for contributing membersdocs/CONTRIBUTING.md
: instructions for contributing to the projectLICENSE
: license file for the projectIf you're a site builder using Guitar Diagrams JS, your site should be featured here as an example of how to use this library. Please submit an issue of Usage Submission type with a link to your site, plus any links to specific pages using Guitar Diagrams JS, and it will be added to the list below.
Example sites:
You can find the full usage documentation at docs/index.md
and the API documentation at docs/api-docs.md
. The following information is just a high-level overview of how to use Guitar Diagrams JS.
See the repository's Releases page for each release and associated release notes.
For more information, please see the docs/index.md
and docs/api-docs.md
pages for general usage help and API documentation. See also the docs/examples/index.html
page for usage examples.
See docs/code-owner-docs.md
for documentation related to development and deployment.
There are no specific requirements1 for dependencies to use Guitar Diagrams JS other than the standard browser compatibility considerations with CSS, JavaScript, and HTML 5's <canvas>
tag. Browser compatibility for the <canvas>
tag can be found on the MDN <canvas>
page.