Sanity Best Practices

npx sv@latest create my-app --template minimal --types ts --no-add-ons --install npm
cd my-app

npm install @sanity/sveltekit @sanity/image-url @portabletext/svelte

PUBLIC_SANITY_PROJECT_ID=your-project-id
PUBLIC_SANITY_DATASET=production
PUBLIC_SANITY_API_VERSION=2026-05-15
PUBLIC_SANITY_STUDIO_URL=http://localhost:3333
SANITY_API_READ_TOKEN=

import {
  PUBLIC_SANITY_DATASET,
  PUBLIC_SANITY_PROJECT_ID,
  PUBLIC_SANITY_API_VERSION,
  PUBLIC_SANITY_STUDIO_URL,
} from '$env/static/public'

function assertEnvVar<T>(value: T | undefined, name: string): T {
  if (value === undefined || value === '') {
    throw new Error(`Missing environment variable: ${name}`)
  }
  return value
}

export const dataset = assertEnvVar(PUBLIC_SANITY_DATASET, 'PUBLIC_SANITY_DATASET')
export const projectId = assertEnvVar(PUBLIC_SANITY_PROJECT_ID, 'PUBLIC_SANITY_PROJECT_ID')
export const apiVersion = PUBLIC_SANITY_API_VERSION || '2026-05-15'
export const studioUrl = PUBLIC_SANITY_STUDIO_URL || 'http://localhost:3333'

import {createClient} from '@sanity/sveltekit'
import {apiVersion, projectId, dataset, studioUrl} from '$lib/sanity/api'

export const client = createClient({
  projectId,
  dataset,
  apiVersion,
  useCdn: true,
  stega: {studioUrl},
})

import {SANITY_API_READ_TOKEN} from '$env/static/private'
import {client} from '$lib/sanity/client'

export const serverClient = client.withConfig({
  token: SANITY_API_READ_TOKEN,
  useCdn: false,
  stega: true,
})

import {groq} from '@sanity/sveltekit'

export const postsQuery = groq`*[_type == "post" && defined(slug.current)] | order(_createdAt desc){
  _id, _createdAt, title, slug, excerpt, mainImage, body
}`

export const postQuery = groq`*[_type == "post" && slug.current == $slug][0]{
  _id, _createdAt, title, slug, excerpt, mainImage, body
}`

export interface Post {
  _id: string
  _createdAt: string
  title?: string
  slug: {current: string}
  excerpt?: string
  mainImage?: unknown
  body?: unknown[]
}

import {createImageUrlBuilder} from '@sanity/image-url'
import {client} from './client'

const builder = createImageUrlBuilder(client)

export function urlFor(source: unknown) {
  return builder.image(source as never)
}

import {handlePreviewMode, handleQueryLoader, setServerClient} from '@sanity/sveltekit'
import {redirect} from '@sveltejs/kit'
import {sequence} from '@sveltejs/kit/hooks'
import {serverClient} from '$lib/sanity/client.server'

setServerClient(serverClient)

export const handle = sequence(
  handlePreviewMode({
    client: serverClient,
    preview: {redirect},
  }),
  handleQueryLoader(),
)

import type {SanityLocals} from '@sanity/sveltekit'

declare global {
  namespace App {
    interface Locals extends SanityLocals {}
  }
}

export {}

import type {LayoutServerLoad} from './$types'

export const load: LayoutServerLoad = (event) => {
  const {previewEnabled} = event.locals.sanity
  return {previewEnabled}
}

<script lang="ts">
  import {PreviewMode, QueryLoader, VisualEditing} from '@sanity/sveltekit'
  import type {LayoutProps} from './$types'
  import {client} from '$lib/sanity/client'
  const {children, data}: LayoutProps = $props()
  // svelte-ignore state_referenced_locally
  const {previewEnabled} = data
</script>

<PreviewMode enabled={previewEnabled}>
  <VisualEditing enabled={previewEnabled}>
    <QueryLoader enabled={previewEnabled} {client}>
      {@render children()}
    </QueryLoader>
  </VisualEditing>
</PreviewMode>

import {postsQuery as query, type Post} from '$lib/sanity/queries'
import type {PageServerLoad} from './$types'

export const load: PageServerLoad = async ({locals}) => {
  const {loadQuery} = locals.sanity
  const initial = await loadQuery<Post[]>(query)
  return {query, options: {initial}}
}

<script lang="ts">
  import {useQuery} from '@sanity/sveltekit'
  import type {Post} from '$lib/sanity/queries'
  import type {PageProps} from './$types'

  const {data}: PageProps = $props()
  const query = $derived(useQuery<Post[]>(data))
  const posts = $derived($query.data)
</script>

<h1>Posts</h1>
{#if posts?.length}
  <ul>
    {#each posts as post (post._id)}
      <li><a href={`/post/${post.slug.current}`}>{post.title}</a></li>
    {/each}
  </ul>
{:else}
  <p>No posts yet.</p>
{/if}

import {postQuery as query, type Post} from '$lib/sanity/queries'
import type {PageServerLoad} from './$types'

export const load: PageServerLoad = async ({locals, params}) => {
  const {loadQuery} = locals.sanity
  const {slug} = params
  const initial = await loadQuery<Post>(query, {slug})
  return {query, params: {slug}, options: {initial}}
}

<script lang="ts">
  import {useQuery} from '@sanity/sveltekit'
  import {PortableText} from '@portabletext/svelte'
  import {urlFor} from '$lib/sanity/image'
  import type {Post} from '$lib/sanity/queries'
  import type {PageProps} from './$types'

  const {data}: PageProps = $props()
  const query = $derived(useQuery<Post>(data))
  const post = $derived($query.data)
</script>

{#if post}
  <article>
    <h1>{post.title}</h1>
    {#if post.mainImage}
      <img src={urlFor(post.mainImage).width(800).url()} alt={post.title ?? ''} />
    {/if}
    {#if post.body}
      <PortableText value={post.body} />
    {/if}
  </article>
{:else}
  <p>Post not found.</p>
{/if}

import {stegaClean} from '@sanity/sveltekit'
// …
if (stegaClean(slug) === 'home') { /* … */ }