{"id":13570907,"url":"https://github.com/0xfe/vexchords","last_synced_at":"2025-05-14T13:06:01.376Z","repository":{"id":1743437,"uuid":"2207296","full_name":"0xfe/vexchords","owner":"0xfe","description":"JavaScript Chord Charts","archived":false,"fork":false,"pushed_at":"2024-12-31T21:33:25.000Z","size":186,"stargazers_count":888,"open_issues_count":34,"forks_count":109,"subscribers_count":25,"default_branch":"master","last_synced_at":"2025-04-13T16:50:20.407Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://vexflow.com/vexchords/","language":"JavaScript","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/0xfe.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":"2011-08-14T23:38:20.000Z","updated_at":"2025-04-10T08:56:16.000Z","dependencies_parsed_at":"2025-01-18T20:40:44.129Z","dependency_job_id":"d0ad1d87-82a6-4b18-89d9-e6fd124bd384","html_url":"https://github.com/0xfe/vexchords","commit_stats":{"total_commits":39,"total_committers":8,"mean_commits":4.875,"dds":0.4358974358974359,"last_synced_commit":"71592fc693b08eb4f25279422884001eeb25115c"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xfe%2Fvexchords","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xfe%2Fvexchords/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xfe%2Fvexchords/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xfe%2Fvexchords/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0xfe","download_url":"https://codeload.github.com/0xfe/vexchords/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254149948,"owners_count":22022851,"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":[],"created_at":"2024-08-01T14:00:56.385Z","updated_at":"2025-05-14T13:06:01.342Z","avatar_url":"https://github.com/0xfe.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"# VexChords - Javascript Guitar Chord Renderer\n\nVexChords renders guitar chords in your browser.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src='https://imgur.com/8Stl0gT.png' width=500\u003e\n  \u003cimg src='https://imgur.com/Gq9FpnU.png' width=500\u003e\n\u003c/p\u003e\n\nSee demo: http://vexflow.com/vexchords [ [source](https://github.com/0xfe/vexchords/blob/master/static/demo.html) ]\n\n## Install\n\n```\nnpm i vexchords\n```\n\n## Usage\n\n### Using ChordBox\n\n```javascript\nimport { ChordBox } from 'vexchords';\n\nconst chord = new ChordBox('#selector', {\n  // Customizations (all optional, defaults shown)\n  width: 100, // canvas width\n  height: 120, // canvas height\n  circleRadius: 5, // circle radius (width / 20 by default)\n\n  numStrings: 6, // number of strings (e.g., 4 for bass)\n  numFrets: 5, // number of frets (e.g., 7 for stretch chords)\n  showTuning: true, // show tuning keys\n\n  defaultColor: '#666', // default color\n  bgColor: '#FFF', // background color\n  strokeColor: '#666', // stroke color (overrides defaultColor)\n  textColor: '#666', // text color (overrides defaultColor)\n  stringColor: '#666', // string color (overrides defaultColor)\n  fretColor: '#666', // fret color (overrides defaultColor)\n  labelColor: '#666', // label color (overrides defaultColor)\n\n  fretWidth: 1, // fret width\n  stringWidth: 1, // string width\n\n  fontFamily,\n  fontSize,\n  fontWeight,\n  fontStyle, // font settings\n  labelWeight // weight of label font\n});\n\nchord.draw({\n  // array of [string, fret, label (optional)]\n  chord: [\n    [1, 2],\n    [2, 1],\n    [3, 2],\n    [4, 0], // fret 0 = open string\n    [5, 'x'], // fret x = muted string\n    [6, 'x']\n  ],\n\n  // optional: position marker\n  position: 5, // start render at fret 5\n\n  // optional: barres for barre chords\n  barres: [\n    { fromString: 6, toString: 1, fret: 1 },\n    { fromString: 5, toString: 3, fret: 3 }\n  ],\n\n  // optional: tuning keys\n  tuning: ['E', 'A', 'D', 'G', 'B', 'E']\n});\n```\n\n### Using the `draw` helper\n\n```javascript\nimport { draw } from 'vexchords';\n\n// Draw an open D7\ndraw('#selector', {\n  chord: [[1, 2], [2, 1], [3, 2], [4, 0], [5, 'x'], [6, 'x']]\n});\n```\n\n### Examples\n\n```javascript\nimport * as vexchords from 'vexchords';\n\nconst sel = '#vexchords';\n\n// Draw an open D7\nvexchords.draw(sel, {\n  chord: [[1, 2], [2, 1], [3, 2], [4, 0], [5, 'x'], [6, 'x']]\n});\n\n// Customize size and default color\nvexchords.draw(\n  sel,\n  {\n    chord: [[1, 2], [2, 1], [3, 2], [4, 0], [5, 'x'], [6, 'x']]\n  },\n  { width: 200, height: 240, defaultColor: '#745' }\n);\n\n// Set color of circles and bars only\nvexchords.draw(\n  sel,\n  {\n    chord: [[2, 3], [3, 3], [4, 3], [6, 'x']],\n    position: 5,\n    barres: [{ fromString: 5, toString: 1, fret: 1 }]\n  },\n  { strokeColor: '#8a8' }\n);\n\n// Set colors of bridge and text only\nvexchords.draw(\n  sel,\n  {\n    chord: [[1, 0], [2, 0], [6, 0]],\n    position: 0,\n    barres: [{ fromString: 5, toString: 3, fret: 2 }]\n  },\n  { bridgeColor: '#8a8', textColor: '#8a8' }\n);\n\n// Tiny chords, don't show tuning keys\nvexchords.draw(\n  sel,\n  {\n    chord: [],\n    position: 1,\n    barres: [\n      { fromString: 6, toString: 1, fret: 1 },\n      { fromString: 5, toString: 3, fret: 3 }\n    ]\n  },\n  {\n    width: 30,\n    height: 40,\n    strokeColor: '#745',\n    showTuning: false\n  }\n);\n```\n\n## Hacking on this repo\n\n```bash\n$ npm i\n$ npm start\n\n# Publish: first update package version in package.json\n$ npm publish\n```\n\n## Upload demo\n\n```bash\n$ gcloud config set account xxx@gmail.com\n$ ./upload.sh\n```\n\n## License\n\nCopyright (c) 2010 Mohit Muthanna Cheppudira\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xfe%2Fvexchords","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0xfe%2Fvexchords","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xfe%2Fvexchords/lists"}