{"id":13571467,"url":"https://github.com/omnibrain/svguitar","last_synced_at":"2025-04-04T08:31:15.151Z","repository":{"id":35120870,"uuid":"208588442","full_name":"omnibrain/svguitar","owner":"omnibrain","description":"Create beautiful SVG guitar chord charts","archived":false,"fork":false,"pushed_at":"2023-10-18T10:36:49.000Z","size":3999,"stargazers_count":622,"open_issues_count":7,"forks_count":38,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-03-24T06:01:24.990Z","etag":null,"topics":["chord-diagram","guitar","javascript","svg","typescript"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/omnibrain.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-15T12:08:39.000Z","updated_at":"2024-06-07T21:55:51.520Z","dependencies_parsed_at":"2023-02-18T05:30:29.676Z","dependency_job_id":"30fd1a6b-da13-4b4e-bc47-7a0221d767a3","html_url":"https://github.com/omnibrain/svguitar","commit_stats":{"total_commits":205,"total_committers":5,"mean_commits":41.0,"dds":0.6439024390243903,"last_synced_commit":"c14e8eb21dbd2f37f598166d1dec40b618205020"},"previous_names":[],"tags_count":51,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omnibrain%2Fsvguitar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omnibrain%2Fsvguitar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omnibrain%2Fsvguitar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omnibrain%2Fsvguitar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/omnibrain","download_url":"https://codeload.github.com/omnibrain/svguitar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247147110,"owners_count":20891625,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chord-diagram","guitar","javascript","svg","typescript"],"created_at":"2024-08-01T14:01:02.277Z","updated_at":"2025-04-04T08:31:15.146Z","avatar_url":"https://github.com/omnibrain.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# SVGuitar - JavaScript Guitar Chord Renderer\n\n![build](https://github.com/omnibrain/svguitar/actions/workflows/semantic-release.yml/badge.svg)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![Coveralls](https://img.shields.io/coveralls/omnibrain/svguitar.svg)](https://coveralls.io/github/omnibrain/svguitar)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![Known Vulnerabilities](https://snyk.io/test/github/omnibrain/svguitar/badge.svg)](https://snyk.io/test/github/omnibrain/svguitar)\n[![Code Style](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)\n\nJavaScript (TypeScript) library to create beautiful SVG guitar chord charts directly in the browser.\n\nTo see this library in action check out [chordpic.com](https://chordpic.com), a free online chord diagram creator.\n\n**Demo**: https://omnibrain.github.io/svguitar/ [ [source](https://github.com/omnibrain/svguitar/blob/master/demo/index.html) ]\n\n**TypeScript API Documentation**: https://omnibrain.github.io/svguitar/docs/\n\nExample chord charts:\n\n![Example Chord Chart 1](https://raw.githubusercontent.com/omnibrain/svguitar/master/examples/example1.png)\n![Example Chord Chart 2](https://raw.githubusercontent.com/omnibrain/svguitar/master/examples/example2.png)\n![Example Chord Chart 3](https://raw.githubusercontent.com/omnibrain/svguitar/master/examples/example3.png)\n![Example Chord Chart 4](https://raw.githubusercontent.com/omnibrain/svguitar/master/examples/example4.png)\n\n### Getting Started\n\n```html\n\u003c!--container of the chart--\u003e\n\u003cdiv id=\"chart\"\u003e\u003c/div\u003e\n\n\u003c!--load umd script --\u003e\n\u003cscript src=\"https://omnibrain.github.io/svguitar/js/svguitar.umd.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n  // initialize the chart\n  var chart = new svguitar.SVGuitarChord('#chart')\n\n  // draw the chart\n  chart\n    .configure({\n      /* configuration */\n    })\n    .chord({\n      /* chord */\n    })\n    .draw()\n\u003c/script\u003e\n```\n\nOf course, you can also add SVGuitar as a dependency to your project:\n\n```bash\n# Add the dependency to your project\nnpm install --save svguitar\n\n# or\nyarn add svguitar\n\n# or\npnpm add svguitar\n```\n\nAnd then import it in your project:\n\n```javascript\nimport { SVGuitarChord } from 'svguitar'\n\nconst chart = new SVGuitarChord('#chart')\n\n// draw the chart\nchart\n  .configure({\n    /* configuration */\n  })\n  .chord({\n    /* chord */\n  })\n  .draw()\n```\n\n## Usage\n\nThe SVG charts are highly customizable.\nFor a full API documentation have a look at the [TypeScript documentation](https://omnibrain.github.io/svguitar/docs/).\n\nChart configuration is completely optional, you don't have to pass any configuration or you can\nonly override specific settings.\n\nHere's an example of a very customized chart:\n\n```javascript\nnew SVGuitarChord('#some-selector')\n  .chord({\n    // array of [string, fret, text | options]\n    fingers: [\n      // finger at string 2, fret 2, with text '2'\n      [2, 2, '2'],\n\n      // finger at string 3, fret 3, with text '4', colored red and has class 'red'\n      [3, 3, { text: '4', color: '#F00', className: 'red' }],\n\n      // finger at string 4, fret 3, with text '3', triangle shaped\n      [4, 3, { text: '3', shape: 'triangle' }],\n\n      // an 'x' above string 6 denotes it isn't played\n      [6, 'x'],\n    ],\n\n    // optional: barres for barre chords\n    barres: [\n      {\n        fromString: 5,\n        toString: 1,\n        fret: 1,\n        text: '1',\n        color: '#0F0',\n        textColor: '#F00',\n        className: 'my-barre-chord',\n      },\n    ],\n\n    // title of the chart (optional)\n    title: 'F# minor',\n\n    // position (defaults to 1)\n    position: 9,\n  })\n  .configure({\n    // Customizations (all optional, defaults shown)\n\n    /**\n     * Orientation of the chord diagram. Chose between 'vertical' or 'horizontal'\n     */\n    orientation: 'vertical',\n\n    /**\n     * Select between 'normal' and 'handdrawn'\n     */\n    style: 'normal',\n\n    /**\n     * The number of strings\n     */\n    strings: 6,\n\n    /**\n     * The number of frets\n     */\n    frets: 4,\n\n    /**\n     * Default position if no positon is provided (first fret is 1)\n     */\n    position: 1,\n\n    /**\n     * These are the labels under the strings. Can be any string.\n     */\n    tuning: ['E', 'A', 'D', 'G', 'B', 'E'],\n\n    /**\n     * The position of the fret label (eg. \"3fr\")\n     */\n    fretLabelPosition: 'right',\n\n    /**\n     * The font size of the fret label\n     */\n    fretLabelFontSize: 38,\n\n    /**\n     * The font size of the string labels\n     */\n    tuningsFontSize: 28,\n\n    /**\n     * Size of a finger or barre relative to the string spacing\n     */\n    fingerSize: 0.65,\n\n    /**\n     * Color of a finger or barre\n     */\n    fingerColor: '#000',\n\n    /**\n     * The color of text inside fingers and barres\n     */\n    fingerTextColor: '#FFF',\n\n    /**\n     * The size of text inside fingers and barres\n     */\n    fingerTextSize: 22,\n\n    /**\n     * stroke color of a finger or barre. Defaults to the finger color if not set\n     */\n    fingerStrokeColor: '#000000',\n\n    /**\n     * stroke width of a finger or barre\n     */\n    fingerStrokeWidth: 0,\n\n    /**\n     * stroke color of a barre chord. Defaults to the finger color if not set\n     */\n    barreChordStrokeColor: '#000000',\n\n    /**\n     * stroke width of a barre chord\n     */\n    barreChordStrokeWidth: 0,\n\n    /**\n     * Height of a fret, relative to the space between two strings\n     */\n    fretSize: 1.5,\n\n    /**\n     * The minimum side padding (from the guitar to the edge of the SVG) relative to the whole width.\n     * This is only applied if it's larger than the letters inside of the padding (eg the starting fret)\n     */\n    sidePadding: 0.2,\n\n    /**\n     * The font family used for all letters and numbers\n     */\n    fontFamily: 'Arial, \"Helvetica Neue\", Helvetica, sans-serif',\n\n    /**\n     * Default title of the chart if no title is provided\n     */\n    title: 'F# minor',\n\n    /**\n     * Font size of the title. This is only the initial font size. If the title doesn't fit, the title\n     * is automatically scaled so that it fits.\n     */\n    titleFontSize: 48,\n\n    /**\n     * Space between the title and the chart\n     */\n    titleBottomMargin: 0,\n\n    /**\n     * Global color of the whole chart. Can be overridden with more specifig color settings such as\n     * @link titleColor or @link stringColor etc.\n     */\n    color: '#000000',\n\n    /**\n     * The background color of the chord diagram. By default the background is transparent. To set the background to transparent either set this to 'none' or undefined\n     */\n    backgroundColor: 'none',\n\n    /**\n     * Barre chord rectangle border radius relative to the fingerSize (eg. 1 means completely round endges, 0 means not rounded at all)\n     */\n    barreChordRadius: 0.25,\n\n    /**\n     * Size of the Xs and Os above empty strings relative to the space between two strings\n     */\n    emptyStringIndicatorSize: 0.6,\n\n    /**\n     * Global stroke width\n     */\n    strokeWidth: 2,\n\n    /**\n     * The width of the nut (only used if position is 1)\n     */\n    nutWidth: 10,\n\n    /**\n     * If this is set to `true`, the starting fret (eg. 3fr) will not be shown. If the position is 1 the\n     * nut will have the same width as all other frets.\n     */\n    noPosition: false,\n\n    /**\n     * The color of the title (overrides color)\n     */\n    titleColor: '#000000',\n\n    /**\n     * The color of the strings (overrides color)\n     */\n    stringColor: '#000000',\n\n    /**\n     * The color of the fret position (overrides color)\n     */\n    fretLabelColor: '#000000',\n\n    /**\n     * The color of the tunings (overrides color)\n     */\n    tuningsColor: '#000000',\n\n    /**\n     * The color of the frets (overrides color)\n     */\n    fretColor: '#000000',\n\n    /**\n     * When set to true the distance between the chord diagram and the top of the SVG stayes the same,\n     * no matter if a title is defined or not.\n     */\n    fixedDiagramPosition: false,\n\n    /**\n     * Text of the watermark (text on the bottom of the chart)\n     */\n    watermark: 'some watermark',\n\n    /**\n     * Font size of the watermark\n     */\n    watermarkFontSize: 12,\n\n    /**\n     * Color of the watermark (overrides color)\n     */\n    watermarkColor: '#000000',\n\n    /**\n     * Font-family of the watermark (overrides fontFamily)\n     */\n    watermarkFontFamily: 'Arial, \"Helvetica Neue\", Helvetica, sans-serif',\n\n    /**\n     * The title of the SVG. This is not visible in the SVG, but can be used for accessibility.\n     */\n    svgTitle: 'Guitar chord diagram of F# minor',\n\n\n    /**\n     * The fret markers. See type docs for more options.\n     */\n    fretMarkers: [\n      2, 4, 6, 8, {\n        fret: 11,\n        double: true,\n      },\n    ],\n\n    /**\n     * Flag to show or disable all fret markers globally. This is just for convenience.\n     * The fret markers can also be removed by not setting the fretMarkers property.\n     */\n    showFretMarkers: true,\n\n    /**\n     * The shape of the fret markets. Applies to all fret markets unless overridden\n     * on specific fret markers. Defaults to circles.\n     */\n    fretMarkerShape: 'circle',\n\n    /**\n     * The size of a fret marker. This is relative to the space between two strings, so\n     * a value of 1 means a fret marker spans from one string to another.\n     */\n    fretMarkerSize: 0.4,\n\n    /**\n     * The color of the fret markers.\n     */\n    fretMarkerColor: 'rgba(0, 0, 0, 0.2)',\n\n    /**\n     * The stroke color of the fret markers. By default, the fret markets have no border.\n     */\n    fretMarkerStrokeColor: '#000000',\n\n    /**\n     * The stroke width of the fret markers. By default, the fret markets have no border.\n     */\n    fretMarkerStrokeWidth: 0,\n\n    /**\n     * The distance between the double fret markers, relative to the width\n     * of the whole neck. E.g. 0.5 means the distance between the fret markers\n     * is equivalent to 0.5 times the width of the whole neck.\n     */\n    doubleFretMarkerDistance: 0.4\n    \n  })\n  .draw()\n```\n\n## Contribute\n\nPull Requests are very welcome!\n\n## Projects using SVGuitar\n\nHere are some projects that use `svguitar`:\n\n- [ChordPic - Easily Create Guitar Chord Charts](https://chordpic.com)\n- [muted.io - Magical Music Theory Tools to Learn Music Online for Free](https://muted.io/)\n- [Chordpress Wordpress Plugin - ChordPro Text Formatter](https://wordpress.org/plugins/chordpress/)\n- [Harmonote - Find chords for your favorite songs](https://harmonote.com/)\n- [Guide Tones Practice - A technique to learn Jazz chords quickly](https://www.onlinemusictools.com/guide-tones/)\n\nAre you using SVGuitar? Create an issue to get your project listed here! Or simply create a pull request with your project added.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomnibrain%2Fsvguitar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fomnibrain%2Fsvguitar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomnibrain%2Fsvguitar/lists"}