diff --git a/packages/sfc-playground/src/App.vue b/packages/sfc-playground/src/App.vue
index 4b62519ce6e..7a9561183a9 100644
--- a/packages/sfc-playground/src/App.vue
+++ b/packages/sfc-playground/src/App.vue
@@ -12,7 +12,7 @@ const setVH = () => {
 window.addEventListener('resize', setVH)
 setVH()
 
-const useSSRMode = ref(false)
+const useSSRMode = ref<boolean | null>(false)
 
 const { productionMode, vueVersion, importMap } = useVueImportMap({
   runtimeDev: import.meta.env.PROD
@@ -71,6 +71,20 @@ const store = useStore(
 // @ts-expect-error
 globalThis.store = store
 
+let { mainFile } = store
+
+if (mainFile === 'src/App.vue') {
+  const firstFile = Object.keys(store.getFiles())[0]
+  if (['index.html', 'main.js', 'main.ts'].includes(firstFile)) {
+    mainFile = `src/${firstFile}`
+    store.setFiles(store.getFiles(), mainFile)
+  }
+}
+
+if (!mainFile.endsWith('.vue')) {
+  useSSRMode.value = null
+}
+
 // persist state
 watchEffect(() => {
   const newHash = store
@@ -121,7 +135,7 @@ onMounted(() => {
     :editor="Monaco"
     @keydown.ctrl.s.prevent
     @keydown.meta.s.prevent
-    :ssr="useSSRMode"
+    :ssr="useSSRMode === true"
     :store="store"
     :showCompileOutput="true"
     :autoResize="true"
diff --git a/packages/sfc-playground/src/Header.vue b/packages/sfc-playground/src/Header.vue
index 6506ad7bab2..127fa40b0d3 100644
--- a/packages/sfc-playground/src/Header.vue
+++ b/packages/sfc-playground/src/Header.vue
@@ -13,7 +13,7 @@ import VersionSelect from './VersionSelect.vue'
 const props = defineProps<{
   store: ReplStore
   prod: boolean
-  ssr: boolean
+  ssr: boolean | null
 }>()
 const emit = defineEmits([
   'toggle-theme',
@@ -100,6 +100,7 @@ function toggleDark() {
         <span>{{ prod ? 'PROD' : 'DEV' }}</span>
       </button>
       <button
+        v-if="ssr != null"
         title="Toggle server rendering mode"
         class="toggle-ssr"
         :class="{ enabled: ssr }"
@@ -118,6 +119,7 @@ function toggleDark() {
         <Reload />
       </button>
       <button
+        v-if="!store.mainFile.endsWith('.html')"
         title="Download project files"
         class="download"
         @click="downloadProject(store)"
diff --git a/packages/sfc-playground/src/download/download.ts b/packages/sfc-playground/src/download/download.ts
index f981134a701..ee6358f733c 100644
--- a/packages/sfc-playground/src/download/download.ts
+++ b/packages/sfc-playground/src/download/download.ts
@@ -1,7 +1,7 @@
 import { saveAs } from 'file-saver'
 
-import index from './template/index.html?raw'
-import main from './template/main.js?raw'
+import indexTemplate from './template/index.html?raw'
+import mainTemplate from './template/main.js?raw'
 import pkg from './template/package.json?raw'
 import config from './template/vite.config.js?raw'
 import readme from './template/README.md?raw'
@@ -15,6 +15,13 @@ export async function downloadProject(store: ReplStore) {
   const { default: JSZip } = await import('jszip')
   const zip = new JSZip()
 
+  const mainFile = store.mainFile.replace(/^.*\//, '')
+  const isMainFileJs = mainFile.endsWith('.js') || mainFile.endsWith('.ts')
+
+  const index = isMainFileJs
+    ? indexTemplate.replace('/src/main.js', `/src/${mainFile}`)
+    : indexTemplate
+
   // basic structure
   zip.file('index.html', index)
   zip.file('package.json', pkg)
@@ -23,7 +30,14 @@ export async function downloadProject(store: ReplStore) {
 
   // project src
   const src = zip.folder('src')!
-  src.file('main.js', main)
+
+  if (!isMainFileJs) {
+    const main = mainFile.endsWith('.vue')
+      ? mainTemplate.replace('./App.vue', `./${mainFile}`)
+      : mainTemplate
+
+    src.file('main.js', main)
+  }
 
   const files = store.getFiles()
   for (const file in files) {