diff --git a/docs-src/assets/index.html b/docs-src/assets/index.html
index 72db39cd..4aa299ea 100644
--- a/docs-src/assets/index.html
+++ b/docs-src/assets/index.html
@@ -35,6 +35,7 @@
 
         <div class="output">
             <div data-output="normalized">-</div>
+            <div data-output="pianokeys"></div>
         </div>
 
         <div class="output-details hidden">
diff --git a/docs-src/src/index.js b/docs-src/src/index.js
index b0a7a9d5..620f96aa 100644
--- a/docs-src/src/index.js
+++ b/docs-src/src/index.js
@@ -1,4 +1,7 @@
+/*eslint complexity: ["error", 12]*/
+
 import { parseChord, chordRendererFactory } from '../../src/index';
+import 'custom-piano-keys';
 
 const renderChordNormalized = chordRendererFactory();
 const renderChordShort = chordRendererFactory({ useShortNamings: true });
@@ -6,6 +9,7 @@ const renderChordShort = chordRendererFactory({ useShortNamings: true });
 const chordInput = document.getElementById('chordInput');
 
 const normalized = document.querySelector('[data-output="normalized"]');
+const pianokeysDiv = document.querySelector('[data-output="pianokeys"]');
 const normalizedShort = document.querySelector('[data-output="normalizedShort"]');
 const intervals = document.querySelector('[data-output="intervals"]');
 const json = document.querySelector('[data-output="json"]');
@@ -15,10 +19,40 @@ let input;
 let chord;
 let symbolNormalized;
 let symbolShort;
+let mappedNotes;
+let markedKeys;
+let pianokeys;
+let rootNotes = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'];
+let rootNoteIndex;
+let octaveCount;
+
+function myReducer(total, item) {
+	return total + ' ' + item;
+}
 
 chordInput.addEventListener('keyup', () => {
+
+	if(pianokeysDiv.firstChild) {
+		pianokeysDiv.firstChild.remove();
+	}
+
 	input = chordInput.value;
 	chord = parseChord(input);
+	if(chord) {
+		rootNoteIndex = rootNotes.indexOf(chord.normalized.rootNote);
+		if(rootNoteIndex !== -1) {
+			mappedNotes = chord.normalized.semitones.map(x => x + 1 + rootNoteIndex);
+			octaveCount = 1;
+			if(mappedNotes.some(x => x > 12)) {
+				octaveCount = 2;
+			}
+			markedKeys = mappedNotes.reduce(myReducer,'').trim();
+			pianokeys = document.createElement('custom-piano-keys');
+			pianokeys.setAttribute('marked-keys', markedKeys);
+			pianokeys.setAttribute('oct-count', octaveCount);
+			pianokeysDiv.appendChild(pianokeys);
+		}
+	}
 
 	symbolNormalized = (!chord) ? '' : renderChordNormalized(chord);
 	symbolShort = (!chord) ? '' : renderChordShort(chord);
diff --git a/package.json b/package.json
index 9e179373..8d58b479 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "core-js": "^3.2.1",
+    "custom-piano-keys": "0.0.10",
     "lodash": "^4.17.15"
   },
   "scripts": {