diff --git a/package-lock.json b/package-lock.json
index 545e0a5e9..68f5224d2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "ethereum-blockies": "^0.1.1",
         "ethers": "^5.0.31",
         "eventemitter3": "4.0.7",
+        "front-matter": "4.0.2",
         "marked": "^4.0.12",
         "multibase": "^4.0.4",
         "multihashes": "^4.0.2",
@@ -3942,7 +3943,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
       "dependencies": {
         "sprintf-js": "~1.0.2"
       }
@@ -6307,7 +6307,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
       "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true,
       "bin": {
         "esparse": "bin/esparse.js",
         "esvalidate": "bin/esvalidate.js"
@@ -6850,6 +6849,14 @@
         }
       ]
     },
+    "node_modules/front-matter": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-4.0.2.tgz",
+      "integrity": "sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==",
+      "dependencies": {
+        "js-yaml": "^3.13.1"
+      }
+    },
     "node_modules/fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -7941,7 +7948,6 @@
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
       "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
-      "dev": true,
       "dependencies": {
         "argparse": "^1.0.7",
         "esprima": "^4.0.0"
@@ -10297,8 +10303,7 @@
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-      "dev": true
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
     "node_modules/sshpk": {
       "version": "1.17.0",
@@ -14375,7 +14380,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
       }
@@ -16235,8 +16239,7 @@
     "esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
     },
     "esquery": {
       "version": "1.4.0",
@@ -16649,6 +16652,14 @@
       "integrity": "sha512-cHEpEQHUg0f8XdtZCc2ZAhrHzKzT0MrFUTcvx+hfxYu7rGMDc5SKoXFh+n4YigxsHXRzc6OrCshdR1bWH6HHyg==",
       "dev": true
     },
+    "front-matter": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-4.0.2.tgz",
+      "integrity": "sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==",
+      "requires": {
+        "js-yaml": "^3.13.1"
+      }
+    },
     "fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -17432,7 +17443,6 @@
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
       "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
-      "dev": true,
       "requires": {
         "argparse": "^1.0.7",
         "esprima": "^4.0.0"
@@ -19255,8 +19265,7 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-      "dev": true
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
     "sshpk": {
       "version": "1.17.0",
diff --git a/package.json b/package.json
index 1b3e272c3..ce0109ef1 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "ethereum-blockies": "^0.1.1",
     "ethers": "^5.0.31",
     "eventemitter3": "4.0.7",
+    "front-matter": "4.0.2",
     "marked": "^4.0.12",
     "multibase": "^4.0.4",
     "multihashes": "^4.0.2",
diff --git a/src/Markdown.svelte b/src/Markdown.svelte
index d2f494424..7051ffba1 100644
--- a/src/Markdown.svelte
+++ b/src/Markdown.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { marked } from "marked";
+  import fm from "front-matter";
+  import type { FrontMatterResult } from "front-matter";
   import sanitizeHtml from 'sanitize-html';
 
   export let content: string;
+  export let doc: FrontMatterResult<Record<string, string>> = fm(content);
 
   let container: HTMLElement;
 
@@ -36,6 +39,24 @@
 </script>
 
 <style>
+  .front-matter {
+    font-size: 0.75rem;
+    font-family: var(--font-family-monospace);
+    color: var(--color-foreground-90);
+    border: 1px dashed var(--color-foreground-subtle);
+    padding: 0.5rem;
+    margin-bottom: 1.5rem;
+  }
+  .front-matter table {
+    border-collapse: collapse;
+  }
+  .front-matter table td {
+    padding: 0.125rem 1rem;
+  }
+  .front-matter table td:first-child {
+    padding-left: 0.5rem;
+  }
+
   .markdown :global(h1), .markdown :global(h2), .markdown :global(h3),
   .markdown :global(h4), .markdown :global(h5), .markdown :global(h6) {
     color: var(--color-foreground);
@@ -178,7 +199,20 @@
 </style>
 
 {#if content}
+  {#if doc.frontmatter}
+    <div class="front-matter">
+      <table>
+        {#each Object.entries(doc.attributes) as [key, val]}
+          <tr>
+            <td><strong>{key}</strong></td>
+            <td>{val}</td>
+          </tr>
+        {/each}
+      </table>
+    </div>
+  {/if}
+
   <div class="markdown" bind:this={container}>
-    {@html marked(sanitize(content))}
+    {@html marked(sanitize(doc.body))}
   </div>
 {/if}