diff --git a/package-lock.json b/package-lock.json
index 72e3751..038ab69 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "vue-project",
       "version": "0.0.0",
       "dependencies": {
+        "chordsheetjs": "10.1.0",
         "vue": "^3.4.29",
         "vue-router": "^4.3.3"
       },
@@ -1573,6 +1574,17 @@
         "node": ">= 6"
       }
     },
+    "node_modules/chordsheetjs": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/chordsheetjs/-/chordsheetjs-10.1.0.tgz",
+      "integrity": "sha512-Ay3g9pLVvfWj2nown6dNo8DAQNc13RzPjigNlfw0nLnEnQxwBy/8tw+5m++dFEuKIZyj8R5Ysrf9MB0JayACYg==",
+      "dependencies": {
+        "lodash.get": "^4.4.2"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2938,6 +2950,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmmirror.com/lodash.merge/-/lodash.merge-4.6.2.tgz",
diff --git a/package.json b/package.json
index aa78ad6..7e92a97 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "chordsheetjs": "10.1.0",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3"
   },
diff --git a/src/components/ChordChart.vue b/src/components/ChordChart.vue
index e5d3452..085970d 100644
--- a/src/components/ChordChart.vue
+++ b/src/components/ChordChart.vue
@@ -26,24 +26,19 @@
       class="chordchart-body"
       :style="{ '--chordchart-columns': columns }"
     >
-      <div
-        class="chordchart-body-stanza"
-        v-for="(stanza, index) in stanzas"
+      <ChordChartBodyParagraph
+        v-for="(paragraph, index) in bodyParagraphs"
         :key="index"
-      >
-        <ChordChartBodyLine
-          v-for="(line, index) in stanza"
-          :key="index"
-          :line="line"
-        />
-      </div>
+        :paragraph="paragraph"
+      />
     </div>
   </section>
 </template>
 
 <script setup>
-import { computed, inject } from 'vue';
-import ChordChartBodyLine from './ChordChartBodyLine.vue';
+import { computed, inject, ref, watch } from 'vue';
+import { ChordProParser, Song } from 'chordsheetjs';
+import ChordChartBodyParagraph from './ChordChartBodyParagraph.vue';
 
 defineProps({
   columns: {
@@ -52,60 +47,26 @@ defineProps({
   },
 });
 
-const chordProInput = inject('chordProInput');
-const lines = computed(() => chordProInput.value.split('\n'));
-const artist = computed(computeArtist);
-const bodyLines = computed(computeBodyLines);
-const key = computed(computeKey);
-const stanzas = computed(computeStanzas);
-const tempo = computed(computeTempo);
-const time = computed(computeTime);
-const title = computed(computeTitle);
-
-function computeArtist() {
-  const artistLine = lines.value.find(line => line.startsWith('{artist:')) || '';
-  return artistLine.replace('{artist:', '').replace('}', '');
-}
-
-function computeBodyLines() {
-  return lines.value.filter(line => (!line.startsWith('{') || line.startsWith('{comment:')));
-}
-
-function computeKey() {
-  const keyLine = lines.value.find(line => line.startsWith('{key:')) || '';
-  return keyLine.replace('{key:', '').replace('}', '');
-}
-
-function computeStanzas() {
-  return bodyLines.value.reduce((acc, line, index) => {
-    if (index === 0) {
-      acc.push(line.trim() === '' ? [] : [line]); // Start first stanza
-    } else if (line.trim() === '') {
-      if (acc[acc.length - 1].length === 0) {
-        return acc; // Skip if previous stanza was empty
-      }
-      acc.push([]); // Start new stanza
-    } else {
-      acc[acc.length - 1].push(line); // Add line to current stanza
-    }
-    return acc;
-  }, []);
-}
-
-function computeTempo() {
-  const tempoLine = lines.value.find(line => line.startsWith('{tempo:')) || '';
-  return tempoLine.replace('{tempo:', '').replace('}', '');
-}
-
-function computeTime() {
-  const timeLine = lines.value.find(line => line.startsWith('{time:')) || '';
-  return timeLine.replace('{time:', '').replace('}', '');
-}
 
-function computeTitle() {
-  const titleLine = lines.value.find(line => line.startsWith('{title:')) || '';
-  return titleLine.replace('{title:', '').replace('}', '');
-}
+const chordProInput = inject('chordProInput');
+const parser = new ChordProParser();
+const song = ref(new Song());
+const metadata = computed(() => song.value.metadata);
+
+const artist = computed(() => metadata.value.get('artist'));
+const bodyParagraphs = computed(() => song.value.bodyParagraphs);
+const key = computed(() => metadata.value.get('key'));
+const tempo = computed(() => metadata.value.get('tempo'));
+const time = computed(() => metadata.value.get('time'));
+const title = computed(() => metadata.value.get('title'));
+
+watch(chordProInput, (newValue) => {
+  try {
+    song.value = parser.parse(newValue);
+  } catch(err) {
+    console.error(err);
+  }
+}, { immediate: true });
 </script>
 
 <style scoped>
@@ -140,9 +101,4 @@ h1 {
 .chordchart-body {
   column-count: var(--chordchart-columns);
 }
-
-.chordchart-body-stanza {
-  break-inside: avoid;
-  padding-top: 1em;
-}
 </style>
diff --git a/src/components/ChordChartBodyParagraph.vue b/src/components/ChordChartBodyParagraph.vue
new file mode 100644
index 0000000..5422f2c
--- /dev/null
+++ b/src/components/ChordChartBodyParagraph.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="chordchart-body-paragraph">
+    <ChordChartLine
+      v-for="(line, index) in props.paragraph.lines"
+      :key="index"
+      :line="line"
+    />
+  </div>
+</template>
+
+<script setup>
+import { Paragraph } from 'chordsheetjs';
+import ChordChartLine from './ChordChartLine.vue';
+
+const props = defineProps({
+  paragraph: {
+    type: Paragraph,
+    required: true,
+  }
+});
+</script>
+
+<style scoped>
+.chordchart-body-paragraph {
+  break-inside: avoid;
+  padding-top: 1em;
+}
+</style>
diff --git a/src/components/ChordChartChordLyricsPair.vue b/src/components/ChordChartChordLyricsPair.vue
new file mode 100644
index 0000000..ea832df
--- /dev/null
+++ b/src/components/ChordChartChordLyricsPair.vue
@@ -0,0 +1,50 @@
+<template>
+  <span class="chordchart-chord-lyrics-pair">
+    <code class="chordchart-chords">
+      {{ pair.chords }}
+    </code>
+    <span class="chordchart-lyrics">
+      {{ pair.lyrics }}
+    </span>
+  </span>
+</template>
+
+<script setup>
+import { ChordLyricsPair } from 'chordsheetjs';
+
+defineProps({
+  pair: {
+    type: ChordLyricsPair,
+    required: true,
+  }
+});
+</script>
+
+<style scoped>
+.chordchart-chord-lyrics-pair {
+  align-items: flex-start;
+  display: inline-flex;
+  flex-direction: column;
+  margin-top: .2em;
+
+  &:first-of-type {
+    margin-left: 2em;
+  }
+}
+
+.chordchart-chords {
+  font-family: inherit;
+  font-size: 1em;
+  font-weight: bold;
+  height: 1.1em;
+  line-height: 1.1em;
+  padding-right: .4em;
+  white-space: pre-wrap;
+}
+
+.chordchart-lyrics {
+  font-size: 1em;
+  height: 1.1em;
+  line-height: 1.1em;
+}
+</style>
diff --git a/src/components/ChordChartLine.vue b/src/components/ChordChartLine.vue
new file mode 100644
index 0000000..79c1f10
--- /dev/null
+++ b/src/components/ChordChartLine.vue
@@ -0,0 +1,33 @@
+<template>
+  <p class="chordchart-body-paragraph-line">
+    <ChordChartLineItem
+      v-for="(item, index) in line.items"
+      :key="index"
+      :item="item"
+    />
+  </p>
+</template>
+
+<script setup>
+import { Line } from 'chordsheetjs';
+import ChordChartLineItem from './ChordChartLineItem.vue';
+
+defineProps({
+  line: {
+    type: Line,
+    required: true,
+  }
+});
+</script>
+
+<style scoped>
+.chordchart-body-paragraph-line {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .4em;
+}
+
+.chordchart-body-paragraph-line-verse {
+  margin-left: 2em;
+}
+</style>
diff --git a/src/components/ChordChartLineItem.vue b/src/components/ChordChartLineItem.vue
new file mode 100644
index 0000000..331a79d
--- /dev/null
+++ b/src/components/ChordChartLineItem.vue
@@ -0,0 +1,25 @@
+<template>
+  <ChordChartTag
+    v-if="isTag"
+    :tag="item"
+  />
+  <ChordChartChordLyricsPair
+    v-else
+    :pair="item"
+  />
+</template>
+
+<script setup>
+import { ChordLyricsPair, Tag } from 'chordsheetjs';
+import ChordChartChordLyricsPair from './ChordChartChordLyricsPair.vue';
+import ChordChartTag from './ChordChartTag.vue';
+
+const props = defineProps({
+  item: {
+    type: [ChordLyricsPair, Tag],
+    required: true,
+  }
+});
+
+const isTag = props.item instanceof Tag && props.item.hasValue();
+</script>
diff --git a/src/components/ChordChartTag.vue b/src/components/ChordChartTag.vue
new file mode 100644
index 0000000..42e9496
--- /dev/null
+++ b/src/components/ChordChartTag.vue
@@ -0,0 +1,39 @@
+<template>
+  <span
+    v-if="isKeychange"
+    class="chordchart-tag chordchart-keychange"
+  >
+    Key - {{ tag.value }}
+  </span>
+  <span
+    v-else
+    class="chordchart-tag"
+  >
+    {{ tag.value }}
+  </span>
+</template>
+
+<script setup>
+import { Tag } from 'chordsheetjs';
+const props = defineProps({
+  tag: {
+    type: Tag,
+    required: true,
+  }
+});
+
+const isKeychange = props.tag.name === 'keychange';
+</script>
+
+<style scoped>
+.chordchart-tag {
+  font-size: 1em;
+  font-weight: bold;
+  line-height: 2;
+}
+
+.chordchart-keychange {
+  display: block;
+  margin-left: auto;
+}
+</style>