Skip to content

siberex/webchords

Repository files navigation

Web chords

Web component for guitar chord diagrams display on any web page.

Under the hood component creates chord diagram visualization using simple html and css.

Currently this is in pre-alpha state, planned features are described in todo.md.

Demo

https://siberex.github.io/webchords/

Installation

With npm:

npm install siberex/webchords --save

With bower:

bower install siberex/webchords --save

Usage

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.0-rc.7/webcomponents-loader.js"></script>
<link rel="import" href="node_modules/webchords/tab-chord.html">

<tab-chord name="Am"></tab-chord>
<tab-chord name="E"></tab-chord>
<tab-chord name="Dm/A" value="×00231"></tab-chord>
<tab-chord name="D6²" value="×x0432"></tab-chord>

And voila!

Usage example

Bug reporting

Create GitHub Issues for bugs and feature requests.

Planned features are described in todo.md.

Pull requests are welcomed too!