6 files changed, 98 insertions, 0 deletions
diff --git a/examples/framework-svelte/.gitignore b/examples/framework-svelte/.gitignore
new file mode 100644
index 000000000..d436c6dad
--- /dev/null
+++ b/examples/framework-svelte/.gitignore
@@ -0,0 +1,18 @@
+# build output
+dist
+
+# dependencies
+node_modules/
+.snowpack/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
diff --git a/examples/framework-svelte/.npmrc b/examples/framework-svelte/.npmrc
new file mode 100644
index 000000000..0cc653b2c
--- /dev/null
+++ b/examples/framework-svelte/.npmrc
@@ -0,0 +1,2 @@
+## force pnpm to hoist 
+shamefully-hoist = true
+\ No newline at end of file
diff --git a/examples/framework-svelte/README.md b/examples/framework-svelte/README.md
new file mode 100644
index 000000000..a6c995ac4
--- /dev/null
+++ b/examples/framework-svelte/README.md
@@ -0,0 +1,5 @@
+# Using Svelte with Astro
+
+This example showcases Astro's built-in support for [Svelte](https://svelte.dev/).
+
+No configuration is needed to enable Svelte support—just start writing Svelte components in `src/components`.
diff --git a/examples/framework-svelte/package.json b/examples/framework-svelte/package.json
new file mode 100644
index 000000000..6489eb581
--- /dev/null
+++ b/examples/framework-svelte/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@astrojs/example-framework-svelte",
+  "private": true,
+  "version": "0.0.1",
+  "scripts": {
+    "start": "astro dev",
+    "build": "astro build"
+  },
+  "devDependencies": {
+    "astro": "^0.15.1"
+  },
+  "snowpack": {
+    "workspaceRoot": "../.."
+  }
+}
diff --git a/examples/framework-svelte/src/components/Counter.svelte b/examples/framework-svelte/src/components/Counter.svelte
new file mode 100644
index 000000000..9aaf421c1
--- /dev/null
+++ b/examples/framework-svelte/src/components/Counter.svelte
@@ -0,0 +1,20 @@
+<script>
+  let count = 0;
+
+  function add() {
+    count += 1;
+  }
+
+  function subtract() {
+    count -= 1;
+  }
+</script>
+
+<div class="counter">
+  <button on:click={subtract}>-</button>
+  <pre>{ count }</pre>
+  <button on:click={add}>+</button>
+</div>
+<div class="children">
+  <slot />
+</div>
diff --git a/examples/framework-svelte/src/pages/index.astro b/examples/framework-svelte/src/pages/index.astro
new file mode 100644
index 000000000..5a0c1039d
--- /dev/null
+++ b/examples/framework-svelte/src/pages/index.astro
@@ -0,0 +1,38 @@
+---
+import Counter from '../components/Counter.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>
+      <Counter:visible>
+        <h1>Hello Svelte!</h1>
+      </Counter:visible>
+    </main>
+  </body>
+</html>