diff --git a/example/index-debug.html b/example/index-debug.html
new file mode 100644
index 00000000..4636641c
--- /dev/null
+++ b/example/index-debug.html
@@ -0,0 +1,49 @@
+<html>
+  <head>
+    <script src="cram-bundle.js"></script>
+    <script>
+      const { IndexedCramFile, CramFile, CraiIndex } = window.gmodCRAM
+
+      // open local files
+      const indexedFile = new IndexedCramFile({
+        cramUrl: 'volvox-sorted.cram',
+        index: new CraiIndex({
+          url: 'volvox-sorted.cram.crai',
+        }),
+        seqFetch: async (seqId, start, end) => {
+          return ''
+        },
+        checkSequenceMD5: false,
+      })
+
+      // example of fetching records from an indexed CRAM file.
+      // NOTE: only numeric IDs for the reference sequence are accepted.
+      // For indexedfasta the numeric ID is the order in which the sequence names appear in the header
+
+      // Wrap in an async and then run
+      run = async () => {
+        const records = await indexedFile.getRecordsForRange(0, 10000, 20000)
+        const r = []
+        records.forEach(record => {
+          console.log(`got a record named ${record.readName}`)
+          if (record.readFeatures != undefined) {
+            record.readFeatures.forEach(({ code, pos, refPos, ref, sub }) => {
+              if (code === 'X') {
+                r.push(
+                  `${record.readName} shows a base substitution at ${refPos}`,
+                )
+              }
+            })
+          }
+        })
+        document.getElementById('output').innerHTML = r.join('\n')
+      }
+
+      run()
+    </script>
+  </head>
+  <body>
+    <h1>Hello world</h1>
+    <pre id="output" />
+  </body>
+</html>
