diff --git a/packages/create-app/CHANGELOG.md b/packages/create-app/CHANGELOG.md
index 1b606e86810dcf..819b2b433ce439 100644
--- a/packages/create-app/CHANGELOG.md
+++ b/packages/create-app/CHANGELOG.md
@@ -1,3 +1,12 @@
+# [2.2.0](https://github.com/vitejs/vite/compare/create-app@2.1.0...create-app@2.2.0) (2021-03-16)
+
+
+### Features
+
+* **create-app:** add 'svelte' and 'svelte-ts' options ([#2537](https://github.com/vitejs/vite/issues/2537)) ([e441f23](https://github.com/vitejs/vite/commit/e441f23e187eec0834704949da492515cd25f8cd))
+
+
+
 # [2.1.0](https://github.com/vitejs/vite/compare/create-app@2.0.2...create-app@2.1.0) (2021-03-15)
 
 
diff --git a/packages/create-app/README.md b/packages/create-app/README.md
index c4ab2e42728621..f3b4b76b598121 100644
--- a/packages/create-app/README.md
+++ b/packages/create-app/README.md
@@ -43,6 +43,8 @@ Currently supported template presets include:
 - `preact-ts`
 - `lit-element`
 - `lit-element-ts`
+- `svelte`
+- `svelte-ts`
 
 ## Community Templates
 
diff --git a/packages/create-app/index.js b/packages/create-app/index.js
index 0cc1af168e6bfd..2613a66ab50cf2 100755
--- a/packages/create-app/index.js
+++ b/packages/create-app/index.js
@@ -11,6 +11,7 @@ const {
   cyan,
   magenta,
   lightRed,
+  red,
   stripColors
 } = require('kolorist')
 
@@ -25,7 +26,9 @@ const TEMPLATES = [
   magenta('preact'),
   magenta('preact-ts'),
   lightRed('lit-element'),
-  lightRed('lit-element-ts')
+  lightRed('lit-element-ts'),
+  red('svelte'),
+  red('svelte-ts')
 ]
 
 const renameFiles = {
diff --git a/packages/create-app/package.json b/packages/create-app/package.json
index 485f1df180cc2c..8f3524b5030e03 100644
--- a/packages/create-app/package.json
+++ b/packages/create-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/create-app",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "license": "MIT",
   "author": "Evan You",
   "bin": {
diff --git a/packages/create-app/template-preact-ts/package.json b/packages/create-app/template-preact-ts/package.json
index 26469d50809d7f..50b2ab0a60e20a 100644
--- a/packages/create-app/template-preact-ts/package.json
+++ b/packages/create-app/template-preact-ts/package.json
@@ -7,10 +7,10 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "preact": "^10.5.9"
+    "preact": "^10.5.13"
   },
   "devDependencies": {
-    "@prefresh/vite": "^2.0.0",
+    "@preact/preset-vite": "^2.0.0",
     "typescript": "^4.1.3",
     "vite": "^2.1.0"
   }
diff --git a/packages/create-app/template-preact-ts/vite.config.ts b/packages/create-app/template-preact-ts/vite.config.ts
index 35560da39ca851..e3bdaffe854595 100644
--- a/packages/create-app/template-preact-ts/vite.config.ts
+++ b/packages/create-app/template-preact-ts/vite.config.ts
@@ -1,12 +1,7 @@
 import { defineConfig } from 'vite'
-import preactRefresh from '@prefresh/vite'
+import preact from '@preact/preset-vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  esbuild: {
-    jsxFactory: 'h',
-    jsxFragment: 'Fragment',
-    jsxInject: `import { h, Fragment } from 'preact'`
-  },
-  plugins: [preactRefresh()]
+  plugins: [preact()]
 })
diff --git a/packages/create-app/template-preact/package.json b/packages/create-app/template-preact/package.json
index 7eaa2d46ac2a7c..247311f78d3bd7 100644
--- a/packages/create-app/template-preact/package.json
+++ b/packages/create-app/template-preact/package.json
@@ -7,10 +7,10 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "preact": "^10.5.9"
+    "preact": "^10.5.13"
   },
   "devDependencies": {
-    "@prefresh/vite": "^2.0.0",
+    "@preact/preset-vite": "^2.0.0",
     "vite": "^2.1.0"
   }
 }
\ No newline at end of file
diff --git a/packages/create-app/template-preact/vite.config.js b/packages/create-app/template-preact/vite.config.js
index 35560da39ca851..e3bdaffe854595 100644
--- a/packages/create-app/template-preact/vite.config.js
+++ b/packages/create-app/template-preact/vite.config.js
@@ -1,12 +1,7 @@
 import { defineConfig } from 'vite'
-import preactRefresh from '@prefresh/vite'
+import preact from '@preact/preset-vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  esbuild: {
-    jsxFactory: 'h',
-    jsxFragment: 'Fragment',
-    jsxInject: `import { h, Fragment } from 'preact'`
-  },
-  plugins: [preactRefresh()]
+  plugins: [preact()]
 })
diff --git a/packages/create-app/template-svelte-ts/.vscode/extensions.json b/packages/create-app/template-svelte-ts/.vscode/extensions.json
new file mode 100644
index 00000000000000..bdef82015138f5
--- /dev/null
+++ b/packages/create-app/template-svelte-ts/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode"]
+}
diff --git a/packages/create-app/template-svelte-ts/README.md b/packages/create-app/template-svelte-ts/README.md
new file mode 100644
index 00000000000000..2e42916edc251b
--- /dev/null
+++ b/packages/create-app/template-svelte-ts/README.md
@@ -0,0 +1,11 @@
+# Svelte + TS + Vite
+
+This template should help get you started developing with Svelte and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
diff --git a/packages/create-app/template-svelte-ts/_gitignore b/packages/create-app/template-svelte-ts/_gitignore
new file mode 100644
index 00000000000000..126fe84d533f52
--- /dev/null
+++ b/packages/create-app/template-svelte-ts/_gitignore
@@ -0,0 +1,4 @@
+/node_modules/
+/dist/
+/.vscode/
+.DS_Store
diff --git a/packages/create-app/template-svelte-ts/globals.d.ts b/packages/create-app/template-svelte-ts/globals.d.ts
new file mode 100644
index 00000000000000..4078e7476a2eaf
--- /dev/null
+++ b/packages/create-app/template-svelte-ts/globals.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
diff --git a/packages/create-app/template-svelte-ts/index.html b/packages/create-app/template-svelte-ts/index.html
new file mode 100644
index 00000000000000..d2f6839bab176c
--- /dev/null
+++ b/packages/create-app/template-svelte-ts/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Svelte + TS + Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/packages/create-app/template-svelte-ts/package.json b/packages/create-app/template-svelte-ts/package.json
new file mode 100644
index 00000000000000..ddef4dc160de8f
--- /dev/null
+++ b/packages/create-app/template-svelte-ts/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "vite-svelte-ts-starter",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "devDependencies": {
+    "@svitejs/vite-plugin-svelte": "^0.11.1",
+    "svelte": "^3.35.0",
+    "svelte-preprocess": "^4.6.9",
+    "typescript": "^4.2.3",
+    "vite": "^2.1.0"
+  }
+}
\ No newline at end of file
diff --git a/packages/create-app/template-svelte-ts/public/favicon.ico b/packages/create-app/template-svelte-ts/public/favicon.ico
new file mode 100644
index 00000000000000..d75d248ef0b150
Binary files /dev/null and b/packages/create-app/template-svelte-ts/public/favicon.ico differ
diff --git a/packages/create-app/template-svelte-ts/src/App.svelte b/packages/create-app/template-svelte-ts/src/App.svelte
new file mode 100644
index 00000000000000..624bfb36d2d837
--- /dev/null
+++ b/packages/create-app/template-svelte-ts/src/App.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+  import logo from './assets/svelte.png'
+  import Counter from './lib/Counter.svelte'
+</script>
+
+<main>
+  <img src={logo} alt="Svelte Logo" />
+  <h1>Hello Typescript!</h1>
+
+  <Counter id="0" />
+
+  <p>
+    Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte
+    apps.
+  </p>
+
+  <p>
+    Check out <a href="https://github.com/sveltejs/kit#readme">SvelteKit</a> for
+    the officially supported framework, also powered by Vite!
+  </p>
+</main>
+
+<style>
+  :root {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  }
+
+  main {
+    text-align: center;
+    padding: 1em;
+    margin: 0 auto;
+  }
+
+  img {
+    height: 16rem;
+    width: 16rem;
+  }
+
+  h1 {
+    color: #ff3e00;
+    text-transform: uppercase;
+    font-size: 4rem;
+    font-weight: 100;
+    line-height: 1.1;
+    margin: 2rem auto;
+    max-width: 14rem;
+  }
+
+  p {
+    max-width: 14rem;
+    margin: 1rem auto;
+    line-height: 1.35;
+  }
+
+  @media (min-width: 480px) {
+    h1 {
+      max-width: none;
+    }
+
+    p {
+      max-width: none;
+    }
+  }
+</style>
diff --git a/packages/create-app/template-svelte-ts/src/assets/svelte.png b/packages/create-app/template-svelte-ts/src/assets/svelte.png
new file mode 100644
index 00000000000000..e673c91c7bcb0e
Binary files /dev/null and b/packages/create-app/template-svelte-ts/src/assets/svelte.png differ
diff --git a/packages/create-app/template-svelte-ts/src/lib/Counter.svelte b/packages/create-app/template-svelte-ts/src/lib/Counter.svelte
new file mode 100644
index 00000000000000..da35d76dafe7d3
--- /dev/null
+++ b/packages/create-app/template-svelte-ts/src/lib/Counter.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { getStore } from './hmr-stores'
+  export let id: string
+
+  const count = getStore(id, 0)
+  const increment = () => {
+    $count += 1
+  }
+</script>
+
+<button {id} on:click={increment}>
+  Clicks: {$count}
+</button>
+
+<style>
+  button {
+    font-family: inherit;
+    font-size: inherit;
+    padding: 1em 2em;
+    color: #ff3e00;
+    background-color: rgba(255, 62, 0, 0.1);
+    border-radius: 2em;
+    border: 2px solid rgba(255, 62, 0, 0);
+    outline: none;
+    width: 200px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  button:focus {
+    border: 2px solid #ff3e00;
+  }
+
+  button:active {
+    background-color: rgba(255, 62, 0, 0.2);
+  }
+</style>
diff --git a/packages/create-app/template-svelte-ts/src/lib/hmr-stores.ts b/packages/create-app/template-svelte-ts/src/lib/hmr-stores.ts
new file mode 100644
index 00000000000000..2b2ef88b53edd9
--- /dev/null
+++ b/packages/create-app/template-svelte-ts/src/lib/hmr-stores.ts
@@ -0,0 +1,21 @@
+// Customized HMR-safe stores
+// Based off https://github.com/svitejs/svite/blob/ddec6b9/packages/playground/hmr/src/stores/hmr-stores.js
+import { writable } from 'svelte/store'
+import type { Writable } from 'svelte/store'
+
+let stores: Record<string, Writable<any>> = {}
+
+export function getStore<T>(id: string, initialValue: T): Writable<T> {
+  return stores[id] || (stores[id] = writable(initialValue))
+}
+
+// preserve the store across HMR updates
+if (import.meta.hot) {
+  if (import.meta.hot.data.stores) {
+    stores = import.meta.hot.data.stores
+  }
+  import.meta.hot.accept()
+  import.meta.hot.dispose(() => {
+    import.meta.hot.data.stores = stores
+  })
+}
diff --git a/packages/create-app/template-svelte-ts/src/main.ts b/packages/create-app/template-svelte-ts/src/main.ts
new file mode 100644
index 00000000000000..0dfb1eefa5c33b
--- /dev/null
+++ b/packages/create-app/template-svelte-ts/src/main.ts
@@ -0,0 +1,7 @@
+import App from './App.svelte'
+
+const app = new App({
+  target: document.body
+})
+
+export default app
diff --git a/packages/create-app/template-svelte-ts/svelte.config.cjs b/packages/create-app/template-svelte-ts/svelte.config.cjs
new file mode 100644
index 00000000000000..0b32783a0c9940
--- /dev/null
+++ b/packages/create-app/template-svelte-ts/svelte.config.cjs
@@ -0,0 +1,7 @@
+const sveltePreprocess = require('svelte-preprocess')
+
+module.exports = {
+  // Consult https://github.com/sveltejs/svelte-preprocess
+  // for more information about preprocessors
+  preprocess: sveltePreprocess()
+}
diff --git a/packages/create-app/template-svelte-ts/tsconfig.json b/packages/create-app/template-svelte-ts/tsconfig.json
new file mode 100644
index 00000000000000..63a55db19f9b89
--- /dev/null
+++ b/packages/create-app/template-svelte-ts/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "target": "esnext",
+    "module": "esnext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "importsNotUsedAsValues": "error",
+    "isolatedModules": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true
+  },
+  /**
+   * Use globals.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["globals.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
+}
diff --git a/packages/create-app/template-svelte-ts/vite.config.js b/packages/create-app/template-svelte-ts/vite.config.js
new file mode 100644
index 00000000000000..0f1999654603c9
--- /dev/null
+++ b/packages/create-app/template-svelte-ts/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import svelte from '@svitejs/vite-plugin-svelte'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [svelte()]
+})
diff --git a/packages/create-app/template-svelte/.vscode/extensions.json b/packages/create-app/template-svelte/.vscode/extensions.json
new file mode 100644
index 00000000000000..bdef82015138f5
--- /dev/null
+++ b/packages/create-app/template-svelte/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode"]
+}
diff --git a/packages/create-app/template-svelte/README.md b/packages/create-app/template-svelte/README.md
new file mode 100644
index 00000000000000..6bf819e309a7b7
--- /dev/null
+++ b/packages/create-app/template-svelte/README.md
@@ -0,0 +1,11 @@
+# Svelte + Vite
+
+This template should help get you started developing with Svelte in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
diff --git a/packages/create-app/template-svelte/_gitignore b/packages/create-app/template-svelte/_gitignore
new file mode 100644
index 00000000000000..126fe84d533f52
--- /dev/null
+++ b/packages/create-app/template-svelte/_gitignore
@@ -0,0 +1,4 @@
+/node_modules/
+/dist/
+/.vscode/
+.DS_Store
diff --git a/packages/create-app/template-svelte/globals.d.ts b/packages/create-app/template-svelte/globals.d.ts
new file mode 100644
index 00000000000000..4078e7476a2eaf
--- /dev/null
+++ b/packages/create-app/template-svelte/globals.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
diff --git a/packages/create-app/template-svelte/index.html b/packages/create-app/template-svelte/index.html
new file mode 100644
index 00000000000000..4a3886b62cf793
--- /dev/null
+++ b/packages/create-app/template-svelte/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Svelte + Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/packages/create-app/template-svelte/jsconfig.json b/packages/create-app/template-svelte/jsconfig.json
new file mode 100644
index 00000000000000..69e281112333b4
--- /dev/null
+++ b/packages/create-app/template-svelte/jsconfig.json
@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "target": "esnext",
+    "module": "esnext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "importsNotUsedAsValues": "error",
+    "isolatedModules": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable this if you'd like to use dynamic types.
+     */
+    "checkJs": true
+  },
+  /**
+   * Use globals.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["globals.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}
diff --git a/packages/create-app/template-svelte/package.json b/packages/create-app/template-svelte/package.json
new file mode 100644
index 00000000000000..167693d21dc824
--- /dev/null
+++ b/packages/create-app/template-svelte/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "vite-svelte-starter",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "devDependencies": {
+    "@svitejs/vite-plugin-svelte": "^0.11.1",
+    "svelte": "^3.35.0",
+    "vite": "^2.1.0"
+  }
+}
\ No newline at end of file
diff --git a/packages/create-app/template-svelte/public/favicon.ico b/packages/create-app/template-svelte/public/favicon.ico
new file mode 100644
index 00000000000000..d75d248ef0b150
Binary files /dev/null and b/packages/create-app/template-svelte/public/favicon.ico differ
diff --git a/packages/create-app/template-svelte/src/App.svelte b/packages/create-app/template-svelte/src/App.svelte
new file mode 100644
index 00000000000000..a2c7aca292e139
--- /dev/null
+++ b/packages/create-app/template-svelte/src/App.svelte
@@ -0,0 +1,65 @@
+<script>
+  import logo from './assets/svelte.png'
+  import Counter from './lib/Counter.svelte'
+</script>
+
+<main>
+  <img src={logo} alt="Svelte Logo" />
+  <h1>Hello world!</h1>
+
+  <Counter id="0" />
+
+  <p>
+    Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte
+    apps.
+  </p>
+
+  <p>
+    Check out <a href="https://github.com/sveltejs/kit#readme">SvelteKit</a> for
+    the officially supported framework, also powered by Vite!
+  </p>
+</main>
+
+<style>
+  :root {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  }
+
+  main {
+    text-align: center;
+    padding: 1em;
+    margin: 0 auto;
+  }
+
+  img {
+    height: 16rem;
+    width: 16rem;
+  }
+
+  h1 {
+    color: #ff3e00;
+    text-transform: uppercase;
+    font-size: 4rem;
+    font-weight: 100;
+    line-height: 1.1;
+    margin: 2rem auto;
+    max-width: 14rem;
+  }
+
+  p {
+    max-width: 14rem;
+    margin: 1rem auto;
+    line-height: 1.35;
+  }
+
+  @media (min-width: 480px) {
+    h1 {
+      max-width: none;
+    }
+
+    p {
+      max-width: none;
+    }
+  }
+</style>
diff --git a/packages/create-app/template-svelte/src/assets/svelte.png b/packages/create-app/template-svelte/src/assets/svelte.png
new file mode 100644
index 00000000000000..e673c91c7bcb0e
Binary files /dev/null and b/packages/create-app/template-svelte/src/assets/svelte.png differ
diff --git a/packages/create-app/template-svelte/src/lib/Counter.svelte b/packages/create-app/template-svelte/src/lib/Counter.svelte
new file mode 100644
index 00000000000000..5224771e987640
--- /dev/null
+++ b/packages/create-app/template-svelte/src/lib/Counter.svelte
@@ -0,0 +1,37 @@
+<script>
+  import { getStore } from './hmr-stores'
+  /** @type { string } */
+  export let id
+
+  const count = getStore(id, 0)
+  const increment = () => {
+    $count += 1
+  }
+</script>
+
+<button {id} on:click={increment}>
+  Clicks: {$count}
+</button>
+
+<style>
+  button {
+    font-family: inherit;
+    font-size: inherit;
+    padding: 1em 2em;
+    color: #ff3e00;
+    background-color: rgba(255, 62, 0, 0.1);
+    border-radius: 2em;
+    border: 2px solid rgba(255, 62, 0, 0);
+    outline: none;
+    width: 200px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  button:focus {
+    border: 2px solid #ff3e00;
+  }
+
+  button:active {
+    background-color: rgba(255, 62, 0, 0.2);
+  }
+</style>
diff --git a/packages/create-app/template-svelte/src/lib/hmr-stores.js b/packages/create-app/template-svelte/src/lib/hmr-stores.js
new file mode 100644
index 00000000000000..9cd6d0e7005880
--- /dev/null
+++ b/packages/create-app/template-svelte/src/lib/hmr-stores.js
@@ -0,0 +1,29 @@
+// Customized HMR-safe stores
+// Based off https://github.com/svitejs/svite/blob/ddec6b9/packages/playground/hmr/src/stores/hmr-stores.js
+import { writable } from 'svelte/store'
+
+/**
+ * @type { Record<string, import('svelte/store').Writable<any>> }
+ */
+let stores = {}
+
+/**
+ * @template T
+ * @param { string } id
+ * @param { T } initialValue
+ * @returns { import('svelte/store').Writable<T> }
+ */
+export function getStore(id, initialValue) {
+  return stores[id] || (stores[id] = writable(initialValue))
+}
+
+// preserve the store across HMR updates
+if (import.meta.hot) {
+  if (import.meta.hot.data.stores) {
+    stores = import.meta.hot.data.stores
+  }
+  import.meta.hot.accept()
+  import.meta.hot.dispose(() => {
+    import.meta.hot.data.stores = stores
+  })
+}
diff --git a/packages/create-app/template-svelte/src/main.js b/packages/create-app/template-svelte/src/main.js
new file mode 100644
index 00000000000000..0dfb1eefa5c33b
--- /dev/null
+++ b/packages/create-app/template-svelte/src/main.js
@@ -0,0 +1,7 @@
+import App from './App.svelte'
+
+const app = new App({
+  target: document.body
+})
+
+export default app
diff --git a/packages/create-app/template-svelte/vite.config.js b/packages/create-app/template-svelte/vite.config.js
new file mode 100644
index 00000000000000..0f1999654603c9
--- /dev/null
+++ b/packages/create-app/template-svelte/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import svelte from '@svitejs/vite-plugin-svelte'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [svelte()]
+})
diff --git a/packages/vite/src/node/optimizer/scan.ts b/packages/vite/src/node/optimizer/scan.ts
index b6449239c20819..bb1a256faa28d7 100644
--- a/packages/vite/src/node/optimizer/scan.ts
+++ b/packages/vite/src/node/optimizer/scan.ts
@@ -219,7 +219,7 @@ function esbuildScanPlugin(
         // <script setup> may contain TLA which is not true TLA but esbuild
         // will error on it, so replace it with another operator.
         if (js.includes('await')) {
-          js = js.replace(/\bawait\s/g, 'void ')
+          js = js.replace(/\bawait(\s)/g, 'void$1')
         }
 
         if (!js.includes(`export default`)) {
diff --git a/packages/vite/src/node/server/sourcemap.ts b/packages/vite/src/node/server/sourcemap.ts
index 431233bca8245d..864082bc7b766b 100644
--- a/packages/vite/src/node/server/sourcemap.ts
+++ b/packages/vite/src/node/server/sourcemap.ts
@@ -12,7 +12,7 @@ export async function injectSourcesContent(
   await Promise.all(
     map.sources.map(async (sourcePath, i) => {
       map.sourcesContent![i] = await fs.readFile(
-        path.resolve(sourceRoot, sourcePath),
+        path.resolve(sourceRoot, decodeURI(sourcePath)),
         'utf-8'
       )
     })
diff --git a/packages/vite/src/node/ssr/ssrTransform.ts b/packages/vite/src/node/ssr/ssrTransform.ts
index 440d43eea47455..52bdd48b4d13ce 100644
--- a/packages/vite/src/node/ssr/ssrTransform.ts
+++ b/packages/vite/src/node/ssr/ssrTransform.ts
@@ -33,7 +33,7 @@ export async function ssrTransform(
 
   const ast = parser.parse(code, {
     sourceType: 'module',
-    ecmaVersion: 2020,
+    ecmaVersion: 2021,
     locations: true
   }) as any