1 files changed, 56 insertions, 0 deletions
diff --git a/examples/with-markdown/src/pages/index.astro b/examples/with-markdown/src/pages/index.astro
new file mode 100644
index 000000000..666e0557f
--- /dev/null
+++ b/examples/with-markdown/src/pages/index.astro
@@ -0,0 +1,56 @@
+---
+import { Markdown } from 'astro/components';
+import Layout from '../layouts/main.astro';
+import ReactCounter from '../components/ReactCounter.jsx';
+import PreactCounter from '../components/PreactCounter.tsx';
+import VueCounter from '../components/VueCounter.vue';
+import SvelteCounter from '../components/SvelteCounter.svelte';
+
+const title = 'Astro Markdown';
+const variable = 'content';
+const items = ['A', 'B', 'C'];
+---
+
+<Layout content={{ title }}>
+  <Markdown>
+    # Introducing {title}
+
+    **Astro Markdown** brings native Markdown support to HTML!
+
+    > It's inspired by [`MDX`](https://mdxjs.com/) and powered by [`remark`](https://github.com/remarkjs/remark).
+
+    The best part? It comes with all the Astro features you expect.
+
+    [Other example](./other)
+
+    ## Embed framework components
+
+    <ReactCounter:visible />
+    <PreactCounter:visible />
+    <VueCounter:visible />
+    <SvelteCounter:visible />
+
+    ## Use Expressions
+
+    You can use any {variable} in scope and use JavaScript for templating ({items.join(', ')})
+
+    ## Oh yeah...
+
+    <ReactCounter:visible>
+      🤯 It's also _recursive_!
+
+      ### Markdown can be embedded in any child component
+    </ReactCounter:visible>
+
+    ## Code
+
+    Should work!
+
+    ```js
+    import Something from './another';
+
+    const thing = new Something();
+    ```
+
+  </Markdown>
+</Layout>