https://chordmark.netlify.app/

1<!doctype html>
2<html lang="en" dir="ltr" class="plugin-pages plugin-id-default" data-has-hydrated="false">
3<head>
4<meta charset="UTF-8">
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=7804a419-e5b2-4cde-ad46-745b3f9cded4
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
8<meta name="generator" content="Docusaurus v3.9.2">
9<title data-rh="true">ChordMark</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://chordmark.netlify.app/"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docusaurus_tag" content="default"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docsearch:docusaurus_tag" content="default"><meta data-rh="true" property="og:title" content="ChordMark"><meta data-rh="true" name="description" content="Chord charts. Reinvented!"><meta data-rh="true" property="og:description" content="Chord charts. Reinvented!"><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://chordmark.netlify.app/"><link data-rh="true" rel="alternate" href="https://chordmark.netlify.app/" hreflang="en"><link data-rh="true" rel="alternate" href="https://chordmark.netlify.app/" hreflang="x-default">

9<script data-rh="true">function insertBanner(){var n=document.createElement("div");n.id="__docusaurus-base-url-issue-banner-container";n.innerHTML='\n<div id="__docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n   <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n   <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseUrl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n   <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">/</span>  (default value)</p>\n   <p>We suggest trying baseUrl = <span id="__docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;"></span></p>\n</div>\n',document.body.prepend(n);var e=document.getElementById("__docusaurus-base-url-issue-banner-suggestion-container"),s=window.location.pathname,o="/"===s.substr(-1)?s:s+"/";e.innerHTML=o}document.addEventListener("DOMContentLoaded",(function(){void 0===window.docusaurus&&insertBanner()}))</script>

9<link rel="preconnect" href="https://www.google-analytics.com">
10<link rel="preconnect" href="https://www.googletagmanager.com">

10
11<script async src="https://www.googletagmanager.com/gtag/js?id=

11G-Z2C35ZZBCN

11"></script>

12<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-Z2C35ZZBCN",{anonymize_ip:!0})</script>

12<link rel="stylesheet" href="/assets/css/styles.17d59bc1.css">

13<script src="/assets/js/runtime~main.f8178208.js" defer="defer"></script>

13

14<script src="/assets/js/main.b0a28390.js" defer="defer"></script>

14
15</head>
16<body class="navigation-with-keyboard">
17<svg style="display: none;"><defs>
18<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
19</defs></svg>

20<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||"light"),document.documentElement.setAttribute("data-theme-choice",t||"light")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script>

20<div id="__docusaurus"><link rel="preload" as="image" href="/img/icon_whitebg.png"><link rel="preload" as="image" href="/img/logo_whitebg.png"><link rel="preload" as="image" href="/img/home.png"><div role="region" aria-label="Skip to main content"><a class="skipToContent_G6ar" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/icon_whitebg.png" alt="ChordMark Logo" class="themedComponent_DHUr themedComponent--light_DIHH"><img src="/img/icon_whitebg.png" alt="ChordMark Logo" class="themedComponent_DHUr themedComponent--dark_Bv2M"></div><b class="navbar__title text--truncate">ChordMark</b></a><a class="navbar__item navbar__link" href="/docs/overview/what-is-chordmark">User guide</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/no-chris/chord-mark/" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_awgD"><use href="#theme-svg-external-link"></use></svg></a><div class="toggle_OLSw colorModeToggle_Hg9V"><button class="clean-btn toggleButton_wYmb toggleButtonDisabled_vaDU" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_KEbZ lightToggleIcon_Sxwe"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_KEbZ darkToggleIcon_Yem1"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_KEbZ systemToggleIcon_txm5"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer_bmvg"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_UyTV"><header class="hero hero--primary heroBanner_qdFl"><div class="container"><div class="logo_homepage"><img src="/img/logo_whitebg.png" alt="ChordMark"></div><p class="hero__subtitle">

20Chord charts. Reinvented!</p><div class="buttons_AeoN"><a class="button button--secondary button--lg" href="/docs/overview/what-is-chordmark">Getting started</a></div><br><img src="/img/home.png" alt="ChordMark samples"></div></header><main><section class="features_xdhU"><div class="container"><div class="row"><div class="col col--4"><div class="text--center"><svg xmlns="http://www.w3.org/2000/svg" width="700pt" height="700pt" viewBox="0 0 700 700" class="featureSvg__8YW" alt="Easy to Write"><path d="M418.37 46.668h-231.7c-6.437.02-11.648 5.23-11.668 11.664v443.34c.02 6.434 5.23 11.645 11.668 11.664h326.67c6.434-.02 11.645-5.23 11.664-11.664v-348.37A106.749 106.749 0 0 0 418.371 46.669zm83.301 443.33h-303.33v-420h198.33v68.949a35.788 35.788 0 0 0 10.281 25.359 35.795 35.795 0 0 0 25.184 10.691h69.535zm-145.31-166.55a11.655 11.655 0 0 0 3.367-8.27 11.67 11.67 0 0 0-3.469-8.226l-46.668-46.074a11.672 11.672 0 0 0-12.699-2.469 11.667 11.667 0 0 0-7.164 10.77v99.406-.004a38.892 38.892 0 1 0-20.84 74.176 38.89 38.89 0 0 0 44.172-38.59v-107.07l26.801 26.465a11.667 11.667 0 0 0 8.274 3.363 11.678 11.678 0 0 0 8.226-3.476zm-82.191 96.285a15.557 15.557 0 0 1-13.285-7.844 15.559 15.559 0 0 1 13.285-23.274 15.557 15.557 0 0 1 13.285 7.844 15.556 15.556 0 0 1 0 15.43 15.55 15.55 0 0 1-13.285 7.844m120.55-162.8h58.336c6.352.125 11.438 5.312 11.438 11.668 0 6.355-5.086 11.543-11.441 11.668h-58.332c-6.355-.125-11.441-5.313-11.441-11.668 0-6.356 5.086-11.543 11.441-11.668zm58.332 69.996H394.72c-6.352-.125-11.441-5.313-11.441-11.668s5.086-11.543 11.441-11.664h58.336c6.348.129 11.426 5.312 11.426 11.664 0 6.352-5.078 11.535-11.426 11.668zm0 46.668h-104.99c-6.356-.125-11.441-5.313-11.441-11.668 0-6.356 5.086-11.543 11.441-11.668h105c6.348.133 11.426 5.316 11.426 11.668 0 6.348-5.078 11.535-11.426 11.664zm0 46.668-104.99-.004c-6.356-.121-11.441-5.309-11.441-11.664 0-6.355 5.086-11.543 11.441-11.668h105c6.348.133 11.426 5.316 11.426 11.664 0 6.352-5.078 11.535-11.426 11.668z"></path></svg></div><div class="text--center padding-horiz--md"><h3>Easy to Write</h3><p><span>ChordMark</span> syntax is short, straight to the point, and yet powerful. Write complex songs transcriptions in a matter of minutes!</p></div></div><div class="col col--4"><div class="text--center"><svg xmlns="http://www.w3.org/2000/svg" width="700pt" height="700pt" viewBox="0 0 700 700" class="featureSvg__8YW" alt="Complete and accurate"><path d="M297.84 141.62h60.711v-22.398H297.84zm0 54.516h60.711v-22.398H297.84zm0 54.523h60.711v-22.398H297.84zm0 54.5h60.711v-22.398l-60.711-.004zM149.6 459.899c0 13.391 10.887 24.277 24.27 24.277h25.77v2.957c0 13.469 10.961 24.426 24.434 24.426s24.434-10.961 24.434-24.426v-2.957h159.38v2.957c0 13.469 10.961 24.426 24.434 24.426s24.434-10.961 24.434-24.426l-.004-2.957h25.77c13.383 0 24.27-10.887 24.27-24.277v-26.84h-357.19zm389.99-310.95c-7-6.996-16.301-10.852-26.195-10.852s-19.195 3.852-26.195 10.852c-11.68 11.688-13.906 29.289-6.688 43.25l-34.523 34.52-32.703-137.9a14.008 14.008 0 0 0-3.722-6.664c-21.734-21.734-50.625-33.707-81.355-33.707-30.734 0-59.63 11.973-81.363 33.707a13.937 13.937 0 0 0-3.719 6.664l-79.367 334.61h328.88l-40.578-171.12 44.285-44.285a36.906 36.906 0 0 0 17.051 4.156c9.902 0 19.195-3.851 26.195-10.852 14.441-14.438 14.441-37.934.004-52.383zm-330.1 202.99 59.914-252.65c16.09-14.766 36.812-22.848 58.789-22.848 21.973 0 42.699 8.082 58.789 22.848l35.734 150.68-101.96 101.97zm142.95 0 76.363-76.363 18.105 76.363z"></path></svg></div><div class="text--center padding-horiz--md"><h3>Complete and accurate</h3><p><span>ChordMark</span> is the only chord chart format that has native support for rhythmic information. Play simple or complex songs, whether you have heard them before or not!</p></div></div><div class="col col--4"><div class="text--center"><svg xmlns="http://www.w3.org/2000/svg" width="700pt" height="700pt" viewBox="0 0 700 700" class="featureSvg__8YW" alt="For everyone"><path d="M345.84 336.88a52.677 52.677 0 0 0-52.676-52.676 52.675 52.675 0 0 0-37.246 15.43c-9.879 9.879-15.43 23.277-15.43 37.246s5.55 27.367 15.43 37.246a52.676 52.676 0 0 0 37.246 15.43 52.735 52.735 0 0 0 52.675-52.675zm-87.852 0a35.165 35.165 0 0 1 10.305-24.871 35.166 35.166 0 0 1 49.742 0 35.166 35.166 0 0 1 0 49.742 35.

20166 35.166 0 0 1-24.871 10.305c-9.328-.012-18.27-3.719-24.863-10.312S258 346.205 257.989 336.881z"></path><path d="M105.57 406.88a104.822 104.822 0 0 1 27.684-84.086 103.611 103.611 0 0 1 81.715-31.258c.156 0 1.023.113 1.164.113.613.086 1.215.176 1.82.219a8.75 8.75 0 0 0 9.278-6.93 79.595 79.595 0 0 1 21.742-40.37 7.85 7.85 0 0 0 1.05-1.278 58.996 58.996 0 0 1 40.828-15.699 74.517 74.517 0 0 1 52 22.289l37.273 37.273c26.957 26.969 29.75 68.199 6.614 92.75h.004a8.623 8.623 0 0 0-1.305 1.078 78.24 78.24 0 0 1-29.609 18.742l5.844 16.484a95.516 95.516 0 0 0 34.809-21.535 8.787 8.787 0 0 0 1.441-1.164c29.793-29.75 28.875-79.625-.937-113.86l156.78-166.16 7.332-5.703 5.406 5.406a8.752 8.752 0 0 0 6.219 2.668 8.725 8.725 0 0 0 6.261-2.562 8.725 8.725 0 0 0 2.563-6.262 8.751 8.751 0 0 0-2.668-6.219l-3.86-3.86 14-10.921 8.516 8.515h-.004a8.74 8.74 0 0 0 6.219 2.672 8.74 8.74 0 0 0 6.262-2.562 8.732 8.732 0 0 0 2.562-6.262 8.745 8.745 0 0 0-2.668-6.219l-7-7 6.125-4.785a8.752 8.752 0 0 0 .813-13.125L572.57 20.003a8.611 8.611 0 0 0-6.633-2.504 8.757 8.757 0 0 0-6.363 3.36l-4.786 6.125-7-7a8.75 8.75 0 0 0-12.371 12.375l8.523 8.523-10.91 14-3.86-3.867-.003-.004a8.754 8.754 0 0 0-12.379 0 8.752 8.752 0 0 0 0 12.383l5.418 5.406-5.672 7.29-166.25 156.83a91.471 91.471 0 0 0-59.43-22.832 76.171 76.171 0 0 0-54.398 21.992 8.587 8.587 0 0 0-1.121 1.398 96.56 96.56 0 0 0-23.371 40.398 120.827 120.827 0 0 0-91.367 36.75 122.099 122.099 0 0 0-32.438 98zM384.82 267.1l-21.875-21.875 159.86-150.86 12.844 12.828zM567.3 39.45l23.258 23.258-42 32.645-13.93-13.922z"></path><path d="m193.84 349.33-12.391 12.383v-.004c-4.965 4.91-7.762 11.605-7.762 18.59s2.797 13.68 7.762 18.59l22.398 22.398 12.371-12.37-22.434-22.446a8.628 8.628 0 0 1 0-12.344l6.238-6.238 49.551 49.551 12.371-12.371-55.738-55.738h.004c-3.418-3.418-8.957-3.418-12.37 0zM612.5 533.75V437.5a8.752 8.752 0 0 0-8.75-8.75H96.25a8.75 8.75 0 0 0-8.75 8.75v96.25a8.752 8.752 0 0 0 8.75 8.75h507.5a8.752 8.752 0 0 0 8.75-8.75M595 525H105v-78.75h43.75V490h17.5v-43.75h17.5V490h17.5v-43.75H245V490h17.5v-43.75H280V490h17.5v-43.75H315V490h17.5v-43.75h43.75V490h17.5v-43.75h17.5V490h17.5v-43.75h43.75V490H490v-43.75h17.5V490H525v-43.75h17.5V490H560v-43.75h35zM568.75 385v-86.793l29.531 23.625 10.938-13.668-43.75-35v.004a8.744 8.744 0 0 0-9.258-1.059 8.751 8.751 0 0 0-4.96 7.89v82.294a44.46 44.46 0 0 0-17.5-3.543c-19.626 0-35 11.53-35 26.25s15.374 26.25 35 26.25 35-11.531 35-26.25zm-52.5 0c0-3.57 6.816-8.75 17.5-8.75s17.5 5.18 17.5 8.75-6.816 8.75-17.5 8.75-17.5-5.18-17.5-8.75M227.5 105c-19.625 0-35 11.531-35 26.25s15.375 26.25 35 26.25 35-11.531 35-26.25v-105a8.752 8.752 0 0 0-8.75-8.75h-105a8.75 8.75 0 0 0-8.75 8.75v82.25a44.352 44.352 0 0 0-17.5-3.5c-19.625 0-35 11.531-35 26.25s15.375 26.25 35 26.25 35-11.531 35-26.25V70H245v38.5a44.352 44.352 0 0 0-17.5-3.5m0 35c-10.684 0-17.5-5.18-17.5-8.75s6.816-8.75 17.5-8.75 17.5 5.18 17.5 8.75-6.816 8.75-17.5 8.75m-105 0c-10.684 0-17.5-5.18-17.5-8.75s6.816-8.75 17.5-8.75 17.5 5.18 17.5 8.75-6.816 8.75-17.5 8.75m35-87.5V35H245v17.5z"></path></svg></div><div class="text--center padding-horiz--md"><h3>For everyone</h3><p><span>ChordMark</span> is useful to all musicians, including the ones that do not sing. Render nicely formatted chord grids in a single click!</p></div></div></div></div></section></main></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/docs/getting-started">5 minutes tutorial</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/licenses">Licenses</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/no-chris/chord-mark/issues" target="_blank" rel="noopener noreferrer" class="footer__link-item">Report issues<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_awgD"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://github.com/no-chris/chord-mark/discussions" target="_blank" rel="noopener noreferrer" class="footer__link-item">User forum<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_awgD"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div>

20<div class="theme-layout-footer-column col footer__col"><div class="footer__title">Related tools</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://chord-symbol.netlify.app" target="_blank" rel="noopener noreferrer" class="footer__link-item">ChordSymbol<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_awgD"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://chord-chart-studio.netlify.app/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Chord Chart Studio<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_awgD"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2026 Christophe Noël. Built with Docusaurus.</div></div></div></footer></div>
21</body>
22</html>