✨ add preload prop to warm up VS Code session before slide is visited

Author: mickaelalvs

README.md

@@ -82,6 +82,16 @@ Use `disableInitialFocus` to prevent VS Code from stealing keyboard focus when y
 
 Focus is held on the slide for 5 seconds after VS Code loads, then released normally. The user can interact with VS Code freely after that.
 
+## ⚡ Preload
+
+Use `preload` to warm up the VS Code session before the user reaches the slide. Slidev mounts adjacent slides in the background, so the session can start while the user is still on the previous slide:
+
+```md
+<Editor session="demo" preload />
+```
+
+Combine with `disableInitialFocus` for a seamless experience — the IDE is ready and keyboard navigation still works on slide entry.
+
 ## 🔒 Keep the session alive across navigation
 
 By default, navigating away from a slide stops the session. Use `persist` to keep it running:
@@ -124,6 +134,7 @@ Per-component props override these values.
 | `hideStatusBar`   | `boolean`           | `false` | Hide the VS Code status bar (bottom bar).                                       |
 | `height`          | `string`            | `100%`  | CSS height of the editor container.                                             |
 | `persist`         | `boolean`           | `false` | Keep the session alive when navigating away.                                    |
+| `preload`         | `boolean`           | `false` | Start the session while the slide is not yet active (requires Slidev preload).  |
 | `port`            | `number`            | auto    | Force a specific port for this session.                                         |
 | `startTimeout`    | `number`            | `30000` | Max startup time in ms before the session is marked as failed.                  |
 | `zoom`            | `number`            | `1`     | Scale factor for the VS Code UI (e.g. `0.8` for 80%).                          |

components/Editor.vue

@@ -14,6 +14,7 @@ const props = withDefaults(defineProps<EditorProps>(), {
   hideMinimap: false,
   hideStatusBar: false,
   persist: false,
+  preload: false,
   zoom: 1,
 })
 
@@ -37,6 +38,7 @@ const attrs = useAttrs()
 const isDisableInitialFocus = computed(() =>
   !!props.disableInitialFocus || 'disableInitialFocus' in attrs || 'disable-initial-focus' in attrs,
 )
+const isPreload = computed(() => !!props.preload || 'preload' in attrs)
 
 const session = shallowRef<SessionEntry | null>(registry.get(sessionId) ?? null)
 
@@ -94,17 +96,22 @@ async function retry(): Promise<void> {
 
 const isActive = useIsSlideActive()
 
+let hasBeenActive = false
+
 watch(
   isActive,
   async (active) => {
     if (active) {
+      hasBeenActive = true
       const existing = registry!.get(sessionId)
       if (existing) {
         session.value = existing
         return
       }
       await start()
-    } else if (!props.persist) {
+    } else if (isPreload.value && !hasBeenActive && !registry!.get(sessionId)) {
+      await start()
+    } else if (!props.persist && hasBeenActive) {
       requestStop(sessionId)
       registry!.teardown(sessionId)
       session.value = null

showcase/slides.md

@@ -48,7 +48,7 @@ livecode:
 Add `<Editor />` to any slide. Use `session` to identify it and `defaultFolder` to set the workspace.
 
 <div class="flex-1 mt-2 rounded-xl overflow-hidden border border-gray-200">
-  <Editor session="basic" />
+  <Editor session="basic" preload disableInitialFocus />
 </div>
 
 ---
@@ -58,7 +58,7 @@ Add `<Editor />` to any slide. Use `session` to identify it and `defaultFolder`
 Use `persist` to keep the session alive when navigating away — state is preserved when you come back.
 
 <div class="flex-1 mt-2 rounded-xl overflow-hidden border border-gray-200">
-  <Editor session="persistent" persist />
+  <Editor session="persistent" persist preload disableInitialFocus />
 </div>
 
 ---
@@ -68,7 +68,7 @@ Use `persist` to keep the session alive when navigating away — state is preser
 Use `:zoom` to scale down VS Code for a better fit. Can also be set globally in the frontmatter with `livecode.zoom`.
 
 <div class="flex-1 mt-2 rounded-xl overflow-hidden border border-gray-200">
-  <Editor session="zoomed" :zoom="0.7" />
+  <Editor session="zoomed" :zoom="0.7" preload disableInitialFocus />
 </div>
 
 ---
@@ -78,7 +78,7 @@ Use `:zoom` to scale down VS Code for a better fit. Can also be set globally in
 Use `colorScheme` to force a dark or light theme. Follows Slidev's `colorSchema` automatically if not set.
 
 <div class="flex-1 mt-2 rounded-xl overflow-hidden border border-gray-200">
-  <Editor session="dark-theme" colorScheme="dark" />
+  <Editor session="dark-theme" colorScheme="dark" preload disableInitialFocus />
 </div>
 
 ---
@@ -88,7 +88,7 @@ Use `colorScheme` to force a dark or light theme. Follows Slidev's `colorSchema`
 Use `fontSize`, `hideMinimap`, `hideActivityBar` and `hideStatusBar` to clean up the UI for a focused demo.
 
 <div class="flex-1 mt-2 rounded-xl overflow-hidden border border-gray-200">
-  <Editor session="presentation" :fontSize="18" hideMinimap hideActivityBar hideStatusBar />
+  <Editor session="presentation" :fontSize="18" hideMinimap hideActivityBar hideStatusBar preload disableInitialFocus />
 </div>
 
 ---
@@ -98,5 +98,5 @@ Use `fontSize`, `hideMinimap`, `hideActivityBar` and `hideStatusBar` to clean up
 Use `disableInitialFocus` to prevent VS Code from stealing keyboard focus on slide entry — arrow keys keep working.
 
 <div class="flex-1 mt-2 rounded-xl overflow-hidden border border-gray-200">
-  <Editor session="focus-guard" disableInitialFocus />
+  <Editor session="focus-guard" disableInitialFocus preload />
 </div>

types.ts

@@ -11,6 +11,7 @@ export interface EditorProps {
   hideStatusBar?: boolean
   persist?: boolean
   port?: number
+  preload?: boolean
   session?: string
   startTimeout?: number
   zoom?: number