diff --git a/examples/data-literate/components/DataLiterate.js b/examples/data-literate/components/DataLiterate.js
index 771a4da2..9d9a6088 100644
--- a/examples/data-literate/components/DataLiterate.js
+++ b/examples/data-literate/components/DataLiterate.js
@@ -1,9 +1,10 @@
-import Layout from '../components/Layout'
+import Layout from './Layout'
 import Head from 'next/head'
-import Excel from '../components/Excel'
-import Table from '../components/Table'
-import TableGrid from '../components/TableGrid'
-import LineChart from '../components/LineChart'
+import Excel from './Excel'
+import Table from './Table'
+import TableGrid from './TableGrid'
+import LineChart from './LineChart'
+import MetaData from './Metadata'
 import { MDXProvider } from '@mdx-js/react'
 import { Vega, VegaLite } from 'react-vega'
 
@@ -18,7 +19,8 @@ const components = {
   VegaLite,
   LineChart,
   Head,
-  TableGrid
+  TableGrid,
+  MetaData,
 }
 
 
@@ -26,25 +28,14 @@ export default function DataLiterate({ children }) {
   const { Component, pageProps } = children
 
   return (
-    <Layout title={pageProps.title}>
-      <div className="prose mx-auto">
-        <header>
-          <div className="mb-6">
-            <h1>{pageProps.title}</h1>
-            {pageProps.author && (
-              <div className="-mt-6"><p className="opacity-60 pl-1">{pageProps.author}</p></div>
-            )}
-            {pageProps.description && (
-              <p className="description">{pageProps.description}</p>
-            )}
-          </div>
-        </header>
-        <main>
-          <MDXProvider components={components}>
+    <Layout>
+      <main>
+        <MDXProvider components={components}>
+          <div className="prose mx-auto">
             <Component {...pageProps} />
-          </MDXProvider>
-        </main>
-      </div>
+          </div>
+        </MDXProvider>
+      </main>
     </Layout>
   )
 }
diff --git a/examples/data-literate/components/Metadata.js b/examples/data-literate/components/Metadata.js
new file mode 100644
index 00000000..2a7bc247
--- /dev/null
+++ b/examples/data-literate/components/Metadata.js
@@ -0,0 +1,18 @@
+
+
+export default function MetaData({ title, author, description }) {
+    return (
+        <header>
+            <div className="mb-6">
+                <h1>{title}</h1>
+                {author && (
+                    <div className="-mt-6"><p className="opacity-60 pl-1">{author}</p></div>
+                )}
+                {description && (
+                    <p className="description">{description}</p>
+                )}
+            </div>
+        </header>
+    )
+
+}
\ No newline at end of file
diff --git a/examples/data-literate/next.config.mjs b/examples/data-literate/next.config.mjs
index 5be15562..fe5e5043 100644
--- a/examples/data-literate/next.config.mjs
+++ b/examples/data-literate/next.config.mjs
@@ -1,12 +1,14 @@
 import gfm from 'remark-gfm'
 import toc from 'remark-toc'
 import slug from 'remark-slug'
+import remarkFrontmatter from 'remark-frontmatter'
+import { remarkMdxFrontmatter } from 'remark-mdx-frontmatter'
 import withMDXImp from '@next/mdx'
 
 const withMDX = withMDXImp({
   extension: /\.mdx?$/,
   options: {
-    remarkPlugins: [gfm, toc, slug],
+    remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter, gfm, toc, slug],
     rehypePlugins: [],
     // If you use `MDXProvider`, uncomment the following line.
     providerImportSource: "@mdx-js/react",
diff --git a/examples/data-literate/package-lock.json b/examples/data-literate/package-lock.json
index 2e58bcb0..03f3755c 100644
--- a/examples/data-literate/package-lock.json
+++ b/examples/data-literate/package-lock.json
@@ -28,6 +28,7 @@
         "remark-footnotes": "^3.0.0",
         "remark-frontmatter": "^4.0.1",
         "remark-gfm": "^1.0.0",
+        "remark-mdx-frontmatter": "^1.1.1",
         "remark-slug": "^6.1.0",
         "remark-toc": "^7.2.0",
         "tailwindcss": "^3.0.23",
@@ -9056,6 +9057,28 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/estree-util-value-to-estree": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/estree-util-value-to-estree/-/estree-util-value-to-estree-1.3.0.tgz",
+      "integrity": "sha512-Y+ughcF9jSUJvncXwqRageavjrNPAI+1M/L3BI3PyLp1nmgYTGUXU6t5z1Y7OWuThoDdhPME07bQU+d5LxdJqw==",
+      "dependencies": {
+        "is-plain-obj": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/estree-util-value-to-estree/node_modules/is-plain-obj": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/estree-util-visit": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-1.1.0.tgz",
@@ -22631,6 +22654,45 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-mdx-frontmatter": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/remark-mdx-frontmatter/-/remark-mdx-frontmatter-1.1.1.tgz",
+      "integrity": "sha512-7teX9DW4tI2WZkXS4DBxneYSY7NHiXl4AKdWDO9LXVweULlCT8OPWsOjLEnMIXViN1j+QcY8mfbq3k0EK6x3uA==",
+      "dependencies": {
+        "estree-util-is-identifier-name": "^1.0.0",
+        "estree-util-value-to-estree": "^1.0.0",
+        "js-yaml": "^4.0.0",
+        "toml": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=12.2.0"
+      }
+    },
+    "node_modules/remark-mdx-frontmatter/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
+    "node_modules/remark-mdx-frontmatter/node_modules/estree-util-is-identifier-name": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-1.1.0.tgz",
+      "integrity": "sha512-OVJZ3fGGt9By77Ix9NhaRbzfbDV/2rx9EP7YIDJTmsZSEc5kYn2vWcNccYyahJL2uAQZK2a5Or2i0wtIKTPoRQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/remark-mdx-frontmatter/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/remark-parse": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.1.tgz",
@@ -25977,6 +26039,11 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/toml": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz",
+      "integrity": "sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w=="
+    },
     "node_modules/topojson-client": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz",
@@ -35628,6 +35695,21 @@
       "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-2.0.0.tgz",
       "integrity": "sha512-aXXZFVMnBBDRP81vS4YtAYJ0hUkgEsXea7lNKWCOeaAquGb1Jm2rcONPB5fpzwgbNxulTvrWuKnp9UElUGAKeQ=="
     },
+    "estree-util-value-to-estree": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/estree-util-value-to-estree/-/estree-util-value-to-estree-1.3.0.tgz",
+      "integrity": "sha512-Y+ughcF9jSUJvncXwqRageavjrNPAI+1M/L3BI3PyLp1nmgYTGUXU6t5z1Y7OWuThoDdhPME07bQU+d5LxdJqw==",
+      "requires": {
+        "is-plain-obj": "^3.0.0"
+      },
+      "dependencies": {
+        "is-plain-obj": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+          "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA=="
+        }
+      }
+    },
     "estree-util-visit": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-1.1.0.tgz",
@@ -46007,6 +46089,37 @@
         "micromark-extension-mdxjs": "^1.0.0"
       }
     },
+    "remark-mdx-frontmatter": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/remark-mdx-frontmatter/-/remark-mdx-frontmatter-1.1.1.tgz",
+      "integrity": "sha512-7teX9DW4tI2WZkXS4DBxneYSY7NHiXl4AKdWDO9LXVweULlCT8OPWsOjLEnMIXViN1j+QcY8mfbq3k0EK6x3uA==",
+      "requires": {
+        "estree-util-is-identifier-name": "^1.0.0",
+        "estree-util-value-to-estree": "^1.0.0",
+        "js-yaml": "^4.0.0",
+        "toml": "^3.0.0"
+      },
+      "dependencies": {
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+        },
+        "estree-util-is-identifier-name": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-1.1.0.tgz",
+          "integrity": "sha512-OVJZ3fGGt9By77Ix9NhaRbzfbDV/2rx9EP7YIDJTmsZSEc5kYn2vWcNccYyahJL2uAQZK2a5Or2i0wtIKTPoRQ=="
+        },
+        "js-yaml": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+          "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+          "requires": {
+            "argparse": "^2.0.1"
+          }
+        }
+      }
+    },
     "remark-parse": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.1.tgz",
@@ -48453,6 +48566,11 @@
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
     },
+    "toml": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz",
+      "integrity": "sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w=="
+    },
     "topojson-client": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz",
diff --git a/examples/data-literate/package.json b/examples/data-literate/package.json
index 3ac84467..49eebcaa 100644
--- a/examples/data-literate/package.json
+++ b/examples/data-literate/package.json
@@ -32,6 +32,7 @@
     "remark-footnotes": "^3.0.0",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^1.0.0",
+    "remark-mdx-frontmatter": "^1.1.1",
     "remark-slug": "^6.1.0",
     "remark-toc": "^7.2.0",
     "tailwindcss": "^3.0.23",
diff --git a/examples/data-literate/pages/demo.mdx b/examples/data-literate/pages/demo.mdx
index a7e4c62e..a9a3f2b8 100644
--- a/examples/data-literate/pages/demo.mdx
+++ b/examples/data-literate/pages/demo.mdx
@@ -1,8 +1,11 @@
 ---
 title: Demo
+author: Rufus Pollock
+description: This demos and documents Data Literate features live
 ---
 
-This demos and documents Data Literate features live.
+<MetaData title={title} author={author} description={description} />
+
 
 You can see the raw source of this page here: https://raw.githubusercontent.com/datopian/data-literate/main/content/demo.mdx