diff --git a/examples/data-literate/pages/demo_new.mdx b/examples/data-literate/pages/demo_new.mdx
new file mode 100644
index 00000000..c3984a4b
--- /dev/null
+++ b/examples/data-literate/pages/demo_new.mdx
@@ -0,0 +1,268 @@
+---
+title: Demo
+---
+
+This demos and documents Data Literate features live.
+
+You can see the raw source of this page here: https://raw.githubusercontent.com/datopian/data-literate/main/content/demo.mdx
+
+## Table of Contents
+
+## GFM
+
+We can have github-flavored markdown including markdown tables, auto-linked links and checklists:
+
+```
+https://github.com/datopian/portal.js
+
+| a | b |
+|---|---|
+| 1 | 2 |
+
+* [x] one thing to do
+* [ ] a second thing to do
+```
+
+https://github.com/datopian/portal.js
+
+| a | b |
+|---|---|
+| 1 | 2 |
+
+* [x] one thing to do
+* [ ] a second thing to do
+
+## Footnotes
+
+```
+here is a footnote reference[^1]
+
+[^1]: a very interesting footnote.
+```
+
+here is a footnote reference[^1]
+
+[^1]: a very interesting footnote.
+
+
+## Frontmatter
+
+Posts can have frontmatter like:
+
+```
+---
+title: Hello World
+author: Rufus Pollock
+---
+```
+
+The title and description are pulled from the MDX file and processed using `gray-matter`. Additionally, links are rendered using a custom component passed to `next-mdx-remote`.
+
+## A Table of Contents
+
+You can create a table of contents by having a markdown heading named `Table of Contents`. You can see an example at the start of this post.
+
+
+## A Table
+
+You can create tables ...
+
+```
+<Table cols={[
+    { key: 'id', name: 'ID' },
+    { key: 'firstName', name: 'First name' },
+    { key: 'lastName', name: 'Last name' },
+    { key: 'age', name: 'Age' }
+  ]} data={[
+    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
+    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
+    { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
+    { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
+    { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
+    { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
+    { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
+  ]}
+  />
+```
+
+<Table cols={[
+    { key: 'id', name: 'ID' },
+    { key: 'firstName', name: 'First name' },
+    { key: 'lastName', name: 'Last name' },
+    { key: 'age', name: 'Age' }
+  ]} data={[
+    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
+    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
+    { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
+    { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
+    { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
+    { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
+    { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
+  ]}
+  />
+
+### Table from Raw CSV
+
+You can also pass raw CSV as the content ...
+
+```
+<Table csv={`
+Year,Temp Anomaly
+1850,-0.418
+2020,0.923
+`} />
+```
+
+<Table csv={`
+Year,Temp Anomaly,
+1850,-0.418
+2020,0.923
+`} />
+
+### Table from a URL
+
+<Table url='/_files/HadCRUT.5.0.1.0.analysis.summary_series.global.annual.csv' />
+
+```
+<Table url='/_files/HadCRUT.5.0.1.0.analysis.summary_series.global.annual.csv' />
+```
+
+## Charts
+
+You can create charts using a simple syntax.
+
+### Line Chart
+
+<LineChart data={
+    [
+      ["1850",-0.41765878],
+      ["1851",-0.2333498],
+      ["1852",-0.22939907],
+      ["1853",-0.27035445],
+      ["1854",-0.29163003]
+    ]
+  }
+  />
+
+```
+<LineChart data={
+    [
+      ["1850",-0.41765878],
+      ["1851",-0.2333498],
+      ["1852",-0.22939907],
+      ["1853",-0.27035445],
+      ["1854",-0.29163003]
+    ]
+  }
+  />
+```
+
+NB: we have quoted years as otherwise not interpreted as dates but as integers ...
+
+
+### Vega and Vega Lite
+
+You can using vega or vega-lite. Here's an example using vega-lite:
+
+<VegaLite data={ { "table": [
+      {
+        "y": -0.418,
+        "x": 1850
+      },
+      {
+        "y": 0.923,
+        "x": 2020
+      }
+      ]
+    }
+  } spec={
+    {
+      "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
+      "mark": "bar",
+      "data": {
+          "name": "table"
+      },
+      "encoding": {
+          "x": {
+              "field": "x",
+              "type": "ordinal"
+          },
+          "y": {
+              "field": "y",
+              "type": "quantitative"
+          }
+      }
+    }
+  } />
+
+
+```jsx
+<VegaLite data={ { "table": [
+      {
+        "y": -0.418,
+        "x": 1850
+      },
+      {
+        "y": 0.923,
+        "x": 2020
+      }
+      ]
+    }
+  } spec={
+    {
+      "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
+      "mark": "bar",
+      "data": {
+          "name": "table"
+      },
+      "encoding": {
+          "x": {
+              "field": "x",
+              "type": "ordinal"
+          },
+          "y": {
+              "field": "y",
+              "type": "quantitative"
+          }
+      }
+    }
+  } />
+
+```
+
+#### Line Chart from URL with Tooltip
+
+https://vega.github.io/vega-lite/examples/interactive_multi_line_pivot_tooltip.html
+
+<VegaLite spec={ 
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "data": {"url": "/_files/HadCRUT.5.0.1.0.analysis.summary_series.global.annual.csv"},
+  "width": 600,
+  "height": 250,
+  "mark": "line",
+  "encoding": {
+    "x": {"field": "Time", "type": "temporal"},
+    "y": {"field": "Anomaly (deg C)", "type": "quantitative"},
+    "tooltip": {"field": "Anomaly (deg C)", "type": "quantitative"}
+  }
+}
+} />
+
+## Display Excel Files
+
+Local file ...
+
+```
+<Excel src='/_files/eight-centuries-of-global-real-interest-rates-r-g-and-the-suprasecular-decline-1311-2018-data.xlsx' />
+```
+
+<Excel src='/_files/eight-centuries-of-global-real-interest-rates-r-g-and-the-suprasecular-decline-1311-2018-data.xlsx' />
+
+Remote files work too (even without CORS) thanks to proxying:
+
+```
+<Excel src='https://github.com/datasets/awesome-data/files/6604635/eight-centuries-of-global-real-interest-rates-r-g-and-the-suprasecular-decline-1311-2018-data.xlsx' />
+```
+
+<Excel src='https://github.com/datasets/awesome-data/files/6604635/eight-centuries-of-global-real-interest-rates-r-g-and-the-suprasecular-decline-1311-2018-data.xlsx' />