[Danny Berger](https://dpb587.me/ "Home")

# Note Layout SVG

[Hammered Dulcimer Journal](https://dpb587.me/topics/hammered-dulcimer/journal) · July 18, 2026

The notes on a hammered dulcimer are often simplified as a boxes-and-lines diagram for reference. To help with some future learning aids, I made a React component to generate an SVG diagram. Since instruments have different sizes and occasionally different tunings, the layout is configurable. Eventually I'll use a React Context to help annotate and animate notes.

![15/14 Note Diagram](https://dpb587.me/entries/20260718-hammered-dulcimer-note-layout-svg/media/screenshot.png)

```
<NoteDiagram instrument={{
  ...
  bridges: [
    {
      name: 'TREBLE',
      displayName: 'Treble',
      leftName: 'TL',
      rightName: 'TR',
      courses: [
        {
          leftNote: "D6",
          rightNote: "G5",
          stringCount: 2,
        },
        ...
      ],
    },
    {
      name: 'BASS',
      displayName: 'Bass',
      leftName: 'B',
      courses: [
        {
          leftNote: "C5",
          stringCount: 2,
        },
        ...
      ],
    }
  ]
}} />
```

## Related

[Hammered Dulcimer Journal](https://dpb587.me/topics/hammered-dulcimer/journal/)

[**Chord Finder**](https://dpb587.me/entries/20260731-hammered-dulcimer-chords-visual/)

[Next · 2026-07-31](https://dpb587.me/entries/20260731-hammered-dulcimer-chords-visual/)

[Finding all the locations of chord notes](https://dpb587.me/entries/20260731-hammered-dulcimer-chords-visual/)

[**John Stinson's (#2)**](https://dpb587.me/entries/20260425-john-stinsons-no-2-recording/)

[Previous · 2026-04-25](https://dpb587.me/entries/20260425-john-stinsons-no-2-recording/)

[Learning a new song.](https://dpb587.me/entries/20260425-john-stinsons-no-2-recording/)

Copyright © 2026 // [dpb587.me](https://dpb587.me/) is a [personal](https://dpb587.me/projects/website), [open source](https://github.com/dpb587/dpb587.me/blob/main/content/post/2026/20260718-hammered-dulcimer-note-layout-svg/_index.md) site.