diff --git a/CHANGELOG.md b/CHANGELOG.md
index c555e1e2..420170ff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,19 @@
+## [4.4.1](https://github.com/vuejs/repl/compare/v4.4.0...v4.4.1) (2024-09-08)
+
+
+### Bug Fixes
+
+* cancel creating new file ([#281](https://github.com/vuejs/repl/issues/281)) ([7467f38](https://github.com/vuejs/repl/commit/7467f38f65e4b05dacc389644a8001b24f86fcdb))
+* type error ([6653d0e](https://github.com/vuejs/repl/commit/6653d0e4b0b30eeee4bfe0c0c92bf00a84c0c753))
+
+
+### Features
+
+* add `autoSave` toggle button ([#283](https://github.com/vuejs/repl/issues/283)) ([83d8e48](https://github.com/vuejs/repl/commit/83d8e487de724261cf709c5648cc2512b4c33732))
+* export `languageToolsVersion` ([5a92a92](https://github.com/vuejs/repl/commit/5a92a9259da01da4aa30b09ed6dcedfb4503c71d))
+
+
+
 # [4.4.0](https://github.com/vuejs/repl/compare/v4.3.1...v4.4.0) (2024-09-07)
 
 
diff --git a/package.json b/package.json
index 1f3714b7..fe1436ca 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/repl",
-  "version": "4.4.0",
+  "version": "4.4.1",
   "description": "Vue component for editing Vue components",
   "packageManager": "pnpm@9.9.0",
   "type": "module",
diff --git a/src/Repl.vue b/src/Repl.vue
index a317615b..f07465ba 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -17,7 +17,6 @@ export interface Props {
   editor: EditorComponentType
   store?: Store
   autoResize?: boolean
-  autoSave?: boolean // auto save and compile, default to true, if false, user need to press ctrl + s to save and compile
   showCompileOutput?: boolean
   showImportMap?: boolean
   showTsConfig?: boolean
@@ -37,17 +36,18 @@ export interface Props {
     showRuntimeWarning?: boolean
   }
   editorOptions?: {
-    showErrorText?: string
+    showErrorText?: string | false
+    autoSaveText?: string | false
     monacoOptions?: monaco.editor.IStandaloneEditorConstructionOptions
   }
 }
 
+const autoSave = defineModel<boolean>({ default: true })
 const props = withDefaults(defineProps<Props>(), {
   theme: 'light',
   previewTheme: false,
   store: () => useStore(),
   autoResize: true,
-  autoSave: true,
   showCompileOutput: true,
   showImportMap: true,
   showTsConfig: true,
@@ -70,10 +70,13 @@ props.store.init()
 const editorSlotName = computed(() => (props.layoutReverse ? 'right' : 'left'))
 const outputSlotName = computed(() => (props.layoutReverse ? 'left' : 'right'))
 
-provide(injectKeyProps, toRefs(props))
+provide(injectKeyProps, {
+  ...toRefs(props),
+  autoSave,
+})
 provide(
   injectKeyPreviewRef,
-  computed(() => outputRef.value?.previewRef?.container),
+  computed(() => outputRef.value?.previewRef?.container ?? null),
 )
 
 /**
diff --git a/src/editor/EditorContainer.vue b/src/editor/EditorContainer.vue
index 2d8b2fad..76e543aa 100644
--- a/src/editor/EditorContainer.vue
+++ b/src/editor/EditorContainer.vue
@@ -3,7 +3,7 @@ import FileSelector from './FileSelector.vue'
 import Message from '../Message.vue'
 import { debounce } from '../utils'
 import { inject, ref, watch } from 'vue'
-import MessageToggle from './MessageToggle.vue'
+import ToggleButton from './ToggleButton.vue'
 import { type EditorComponentType, injectKeyProps } from '../types'
 
 const SHOW_ERROR_KEY = 'repl_show_error'
@@ -12,7 +12,7 @@ const props = defineProps<{
   editorComponent: EditorComponentType
 }>()
 
-const { store } = inject(injectKeyProps)!
+const { store, autoSave, editorOptions } = inject(injectKeyProps)!
 const showMessage = ref(getItem())
 
 const onChange = debounce((code: string) => {
@@ -42,7 +42,19 @@ watch(showMessage, () => {
       @change="onChange"
     />
     <Message v-show="showMessage" :err="store.errors[0]" />
-    <MessageToggle v-model="showMessage" />
+
+    <div class="editor-floating">
+      <ToggleButton
+        v-if="editorOptions?.showErrorText !== false"
+        v-model="showMessage"
+        :text="editorOptions?.showErrorText || 'Show Error'"
+      />
+      <ToggleButton
+        v-if="editorOptions?.autoSaveText !== false"
+        v-model="autoSave"
+        :text="editorOptions?.autoSaveText || 'Auto Save'"
+      />
+    </div>
   </div>
 </template>
 
@@ -52,4 +64,18 @@ watch(showMessage, () => {
   overflow: hidden;
   position: relative;
 }
+
+.editor-floating {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  z-index: 11;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  gap: 8px;
+  background-color: var(--bg);
+  color: var(--text-light);
+  padding: 8px;
+}
 </style>
diff --git a/src/editor/FileSelector.vue b/src/editor/FileSelector.vue
index 2946cae2..6c81bf7d 100644
--- a/src/editor/FileSelector.vue
+++ b/src/editor/FileSelector.vue
@@ -58,6 +58,11 @@ function focus({ el }: VNode) {
 
 function doneNameFile() {
   if (!pending.value) return
+  if (!pendingFilename.value) {
+    pending.value = false
+    return
+  }
+
   // add back the src prefix
   const filename = 'src/' + pendingFilename.value
   const oldFilename = pending.value === true ? '' : pending.value
diff --git a/src/editor/MessageToggle.vue b/src/editor/ToggleButton.vue
similarity index 64%
rename from src/editor/MessageToggle.vue
rename to src/editor/ToggleButton.vue
index f993122f..2d6fa01d 100644
--- a/src/editor/MessageToggle.vue
+++ b/src/editor/ToggleButton.vue
@@ -1,14 +1,11 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { injectKeyProps } from '../../src/types'
-
-const { editorOptions } = inject(injectKeyProps)!
-const visible = defineModel<boolean>()
+defineProps<{ text: string }>()
+const active = defineModel<boolean>()
 </script>
 
 <template>
-  <div class="wrapper" @click="visible = !visible">
-    <span>{{ editorOptions?.showErrorText || 'Show Error' }}</span>
+  <div class="wrapper" @click="active = !active">
+    <span>{{ text }}</span>
     <div class="toggle" :class="[{ active: modelValue }]">
       <div class="indicator" />
     </div>
@@ -17,19 +14,12 @@ const visible = defineModel<boolean>()
 
 <style scoped>
 .wrapper {
-  position: absolute;
-  bottom: 8px;
-  right: 15px;
-  z-index: 11;
   display: flex;
   align-items: center;
-  background-color: var(--bg);
-  color: var(--text-light);
   cursor: pointer;
-  padding: 4px 8px;
-  border-radius: 2px;
   user-select: none;
 }
+
 .toggle {
   display: inline-block;
   margin-left: 4px;
diff --git a/src/index.ts b/src/index.ts
index 5ccf83bd..e35cbe95 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -12,3 +12,4 @@ export { useVueImportMap, mergeImportMap, type ImportMap } from './import-map'
 export { compileFile } from './transform'
 export type { Props as ReplProps } from './Repl.vue'
 export type { OutputModes } from './types'
+export { version as languageToolsVersion } from '@vue/language-service/package.json'
diff --git a/src/types.ts b/src/types.ts
index af62caaa..19b8c609 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -15,8 +15,9 @@ export type EditorComponentType = Component<EditorProps>
 
 export type OutputModes = 'preview' | EditorMode
 
-export const injectKeyProps: InjectionKey<ToRefs<Required<Props>>> =
-  Symbol('props')
+export const injectKeyProps: InjectionKey<
+  ToRefs<Required<Props & { autoSave: boolean }>>
+> = Symbol('props')
 export const injectKeyPreviewRef: InjectionKey<
-  ComputedRef<HTMLDivElement | undefined>
+  ComputedRef<HTMLDivElement | null>
 > = Symbol('preview-ref')
diff --git a/test/main.ts b/test/main.ts
index 52885620..85cce24f 100644
--- a/test/main.ts
+++ b/test/main.ts
@@ -68,6 +68,7 @@ const App = {
         // showCompileOutput: false,
         // showImportMap: false
         editorOptions: {
+          autoSaveText: '💾',
           monacoOptions: {
             // wordWrap: 'on',
           },