fix: add visual editing components, bump api version

Author: rdunk

sveltekit-app/src/lib/sanity/api.ts

@@ -16,6 +16,6 @@ export const dataset = assertEnvVar(PUBLIC_SANITY_DATASET, 'PUBLIC_SANITY_DATASE
 
 export const projectId = assertEnvVar(PUBLIC_SANITY_PROJECT_ID, 'PUBLIC_SANITY_PROJECT_ID')
 
-export const apiVersion = PUBLIC_SANITY_API_VERSION || '2024-03-15'
+export const apiVersion = PUBLIC_SANITY_API_VERSION || '2025-10-22'
 
 export const studioUrl = PUBLIC_SANITY_STUDIO_URL || 'http://localhost:3333'

sveltekit-app/src/routes/+layout.svelte

@@ -1,51 +1,56 @@
 <script lang="ts">
-  import {PreviewMode} from '@sanity/sveltekit'
+  import {PreviewMode, QueryLoader, VisualEditing} from '@sanity/sveltekit'
   import type {LayoutProps} from './$types'
   import {page} from '$app/state'
   import {resolve} from '$app/paths'
+  import {client} from '$lib/sanity/client'
   const {children, data}: LayoutProps = $props()
   const {previewEnabled} = data
 </script>
 
 <PreviewMode enabled={previewEnabled}>
-  {#if previewEnabled}
-    <a
-      href={resolve('/preview/disable', {
-        redirect: page.url.pathname,
-      })}
-      class="preview-toggle"
-    >
-      <span>Preview Enabled</span>
-      <span>Disable Preview</span>
-    </a>
-  {/if}
-
-  <div class="container">
-    <header class="header">
-      <a class="header__title" href="/">SvelteKit + Sanity</a>
-    </header>
-    <main>
-      {@render children()}
-    </main>
-    <footer class="footer">
-      <p class="footer__text">
-        Made with <svg
-          data-sanity-icon="heart-filled"
-          width="1em"
-          height="1em"
-          viewBox="0 0 25 25"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          ><path
-            d="M17 16C15.8 17.3235 12.5 20.5 12.5 20.5C12.5 20.5 9.2 17.3235 8 16C5.2 12.9118 4.5 11.7059 4.5 9.5C4.5 7.29412 6.1 5.5 8.5 5.5C10.5 5.5 11.7 6.82353 12.5 8.14706C13.3 6.82353 14.5 5.5 16.5 5.5C18.9 5.5 20.5 7.29412 20.5 9.5C20.5 11.7059 19.8 12.9118 17 16Z"
-            fill="currentColor"
-            stroke="currentColor"
-            stroke-width="1.2"
-          /></svg
-        > at Sanity
-      </p>
-    </footer>
-  </div>
+  <VisualEditing enabled={previewEnabled}>
+    <QueryLoader enabled={previewEnabled} {client}>
+      {#if previewEnabled}
+        <a
+          href={resolve('/preview/disable', {
+            redirect: page.url.pathname,
+          })}
+          class="preview-toggle"
+        >
+          <span>Preview Enabled</span>
+          <span>Disable Preview</span>
+        </a>
+      {/if}
+
+      <div class="container">
+        <header class="header">
+          <a class="header__title" href="/">SvelteKit + Sanity</a>
+        </header>
+        <main>
+          {@render children()}
+        </main>
+        <footer class="footer">
+          <p class="footer__text">
+            Made with <svg
+              data-sanity-icon="heart-filled"
+              width="1em"
+              height="1em"
+              viewBox="0 0 25 25"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              ><path
+                d="M17 16C15.8 17.3235 12.5 20.5 12.5 20.5C12.5 20.5 9.2 17.3235 8 16C5.2 12.9118 4.5 11.7059 4.5 9.5C4.5 7.29412 6.1 5.5 8.5 5.5C10.5 5.5 11.7 6.82353 12.5 8.14706C13.3 6.82353 14.5 5.5 16.5 5.5C18.9 5.5 20.5 7.29412 20.5 9.5C20.5 11.7059 19.8 12.9118 17 16Z"
+                fill="currentColor"
+                stroke="currentColor"
+                stroke-width="1.2"
+              /></svg
+            > at Sanity
+          </p>
+        </footer>
+      </div>
+    </QueryLoader>
+  </VisualEditing>
 </PreviewMode>
 
 <style>