The Official Sanity toolkit for SvelteKit applications.
npm install @sanity/sveltekitThe Official Sanity toolkit for SvelteKit applications.
Inside your existing SvelteKit application, install @sanity/sveltekit:
``bash`
npm install @sanity/sveltekit
See the Visual Editing with SvelteKit guide for a full implementation.
Create and populate a .env.local file at the root of your application if it does not already exist.
`bash`.env.local
PUBLIC_SANITY_PROJECT_ID=
PUBLIC_SANITY_DATASET=
Create a sanity.config.ts file.
`ts
// src/lib/sanity/sanity.config.ts
import { defineConfig } from 'sanity';
import { structureTool } from 'sanity/structure';
import {
PUBLIC_SANITY_PROJECT_ID as projectId,
PUBLIC_SANITY_DATASET as dataset
} from '$env/static/public';
export default defineConfig({
basePath: '/studio', // basePath must match the route of your Studio`
projectId,
dataset,
plugins: [structureTool()],
schema: { types: [] }
});
Next, create a catch all route using rest parameters
`svelte
`
Note: When embedding a studio in your application, you should wrap the rest of your routes in a (group)>) to separate your studio and user-facing application layouts.
@sanity/sveltekit exports Sanity client and groq related helper functions directly, no need to install separate dependencies.
`ts``
import { createClient, defineQuery, groq } from '@sanity/sveltekit';