diff --git a/examples/with-markdown/.babelrc b/examples/with-markdown/.babelrc
deleted file mode 100644
index 6c229df8..00000000
--- a/examples/with-markdown/.babelrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-    "presets": ["next/babel"],
-    "plugins": ["markdown-in-js/babel"]
-}
diff --git a/examples/with-markdown/README.md b/examples/with-markdown/README.md
index 99b9b21d..1e4cef4e 100644
--- a/examples/with-markdown/README.md
+++ b/examples/with-markdown/README.md
@@ -41,4 +41,4 @@ now
 
 ## The idea behind the example
 
-This example shows the most basic idea behind implementing [markdown-in-js](https://github.com/threepointone/markdown-in-js), a library that allows you to write markdown that transpiles to React components *at build time*.
+This example shows how to integrate an [MDX](https://github.com/mdx-js/mdx) which is a _"JSX in Markdown loader, parser, and renderer for ambitious projects"_.
\ No newline at end of file
diff --git a/examples/with-markdown/md/markdown.mdx b/examples/with-markdown/md/markdown.mdx
new file mode 100644
index 00000000..feacef52
--- /dev/null
+++ b/examples/with-markdown/md/markdown.mdx
@@ -0,0 +1,19 @@
+import Other from './other.mdx'
+
+# Hello, world `awesome` :smile_cat:
+
+<Other components={components} />
+
+```jsx
+<Other />
+```
+
+Here's a paragraph
+
+https://c8r.imgix.net/028ab8c85da415103cb3b1eb/johno.png
+
+Here's a table
+
+| Test | Table |
+| :--- | :---- |
+| Col1 | Col2  |
\ No newline at end of file
diff --git a/examples/with-markdown/md/other.mdx b/examples/with-markdown/md/other.mdx
new file mode 100644
index 00000000..742191f7
--- /dev/null
+++ b/examples/with-markdown/md/other.mdx
@@ -0,0 +1,3 @@
+### Other `awesome`
+
+file
\ No newline at end of file
diff --git a/examples/with-markdown/next.config.js b/examples/with-markdown/next.config.js
new file mode 100644
index 00000000..b171ff08
--- /dev/null
+++ b/examples/with-markdown/next.config.js
@@ -0,0 +1,15 @@
+const images = require('remark-images')
+const emoji = require('remark-emoji')
+
+const withMDX = require('@zeit/next-mdx')({
+  options: {
+    mdPlugins: [
+      images,
+      emoji
+    ]
+  }
+})
+
+module.exports = withMDX({
+  pageExtensions: ['js', 'jsx', 'mdx']
+})
diff --git a/examples/with-markdown/package.json b/examples/with-markdown/package.json
index 6a390669..8d4f7bbd 100644
--- a/examples/with-markdown/package.json
+++ b/examples/with-markdown/package.json
@@ -7,10 +7,13 @@
     "start": "next start"
   },
   "dependencies": {
-    "markdown-in-js": "^1.1.4",
+    "@mdx-js/mdx": "0.15.0-0",
+    "@zeit/next-mdx": "1.1.0",
     "next": "latest",
     "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react-dom": "^16.0.0",
+    "remark-emoji": "2.0.1",
+    "remark-images": "0.8.1"
   },
   "license": "ISC"
 }
diff --git a/examples/with-markdown/pages/hello.mdx b/examples/with-markdown/pages/hello.mdx
new file mode 100644
index 00000000..4e74a0b8
--- /dev/null
+++ b/examples/with-markdown/pages/hello.mdx
@@ -0,0 +1 @@
+# Hello, world! :smiley:
\ No newline at end of file
diff --git a/examples/with-markdown/pages/index.js b/examples/with-markdown/pages/index.js
index da7287b8..3b9a6734 100644
--- a/examples/with-markdown/pages/index.js
+++ b/examples/with-markdown/pages/index.js
@@ -1,9 +1,9 @@
-import markdown from 'markdown-in-js'
+import React from 'react'
+import Document from '../md/markdown.mdx'
 
-// For more advanced use cases see https://github.com/threepointone/markdown-in-js
+const H1 = props => <h1 style={{ color: 'tomato' }} {...props} />
+const InlineCode = props => <code id='codes' style={{ color: 'purple' }} {...props} />
+const Code = props => <code id='codes' style={{ fontWeight: 600 }} {...props} />
+const Pre = props => <pre id='codes' style={{ color: 'red' }} {...props} />
 
-export default () => <div>{markdown`
-## This is a title
-
-This is a paragraph
-`}</div>
+export default () => <Document components={{ h1: H1, pre: Pre, code: Code, inlineCode: InlineCode }} />