1 files changed, 58 insertions, 0 deletions
diff --git a/examples/framework-multiple/src/pages/index.astro b/examples/framework-multiple/src/pages/index.astro
new file mode 100644
index 000000000..3fbef72e0
--- /dev/null
+++ b/examples/framework-multiple/src/pages/index.astro
@@ -0,0 +1,58 @@
+---
+import { A, B as Renamed } from '../components';
+import * as react from '../components/ReactCounter.jsx';
+import { PreactCounter } from '../components/PreactCounter.tsx';
+import VueCounter from '../components/VueCounter.vue';
+import SvelteCounter from '../components/SvelteCounter.svelte';
+---
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <style>
+        :global(:root) {
+            font-family: system-ui;
+            padding: 2em 0;
+        }
+        :global(.counter) {
+            display: grid;
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+            place-items: center;
+            font-size: 2em;
+            margin-top: 2em;
+        }
+        :global(.children) {
+            display: grid;
+            place-items: center;
+            margin-bottom: 2em;
+        }
+    </style>
+  </head>
+  <body>
+      <main>
+
+        <react.Counter:visible>
+            <h1>Hello React!</h1>
+            <p>What's up?</p>
+        </react.Counter:visible>
+
+        <PreactCounter:visible>
+          <h1>Hello Preact!</h1>
+        </PreactCounter:visible>
+
+        <VueCounter:visible>
+            <h1>Hello Vue!</h1>
+        </VueCounter:visible>
+
+        <SvelteCounter:visible>
+            <h1>Hello Svelte!</h1>
+        </SvelteCounter:visible>
+
+        <A />
+        
+        <Renamed />
+
+      </main>
+  </body>
+</html>