Sanity

1
npx create-next-app@latest my-app --yes
2
cd my-app
3
vercel link

1
vercel link # If you didn't link to Vercel in the previous step
2
vercel env pull .env.local

1
npm create sanity@latest -- --dataset production --typescript --template clean

1
// ./sanity/schemaTypes/postType.ts
2
import { defineField, defineType } from 'sanity'
3

4
export const postType = defineType({
5
  name: 'post',
6
  title: 'Post',
7
  type: 'document',
8
  fields: [
9
    defineField({ name: 'title', type: 'string' }),
10
    defineField({ name: 'body', type: 'array', of: [{ type: 'block' }] }),
11
  ],
12
})

1
// ./sanity/schemaTypes/index.ts
2
import { type SchemaTypeDefinition } from 'sanity'
3
import { postType } from './postType'
4

5
export const schema: { types: SchemaTypeDefinition[] } = {
6
  types: [postType],
7
}

1
npm run dev

1
// src/app/page.tsx
2
import { client } from "@/sanity/lib/client";
3

4
type Post = {
5
  _id: string;
6
  title: string;
7
};
8

9
export default async function Home() {
10
  const posts = await client.fetch<Post[]>(`*[_type == "post"]{ _id, title }`);
11
  return (
12
    <ul>
13
      {posts.map((post) => (
14
        <li key={post._id}>{post.title}</li>
15
      ))}
16
    </ul>
17
  );
18
}

1
npm create astro@latest my-app -- --template basics --install --git
2
cd my-app
3
vercel link

1
vercel link # If you didn't link to Vercel in the previous step
2
vercel env pull .env.local

1
npx astro add @sanity/astro @astrojs/react

1
// astro.config.mjs
2
import { defineConfig } from "astro/config";
3
import { loadEnv } from "vite";
4

5
import sanity from "@sanity/astro";
6
import react from "@astrojs/react";
7

8
// Load environment variables
9
const { PUBLIC_SANITY_PROJECT_ID, PUBLIC_SANITY_DATASET } = loadEnv(process.env.NODE_ENV, process.cwd(), "");
10

11
export default defineConfig({
12
  integrations: [
13
    sanity({
14
      projectId: PUBLIC_SANITY_PROJECT_ID,
15
      dataset: PUBLIC_SANITY_DATASET,
16
      useCdn: false,
17
      studioBasePath: "/studio", // Required for an embedded Sanity Studio
18
    }),
19
    react(),
20
  ],
21
});

1
// sanity.config.ts
2
import { defineConfig } from "sanity";
3
import { structureTool } from "sanity/structure";
4
import { schemaTypes } from "./schemaTypes/index";
5

6
export default defineConfig({
7
  projectId: import.meta.env.PUBLIC_SANITY_PROJECT_ID,
8
  dataset: import.meta.env.PUBLIC_SANITY_DATASET,
9
  plugins: [structureTool()],
10
  schema: { types: schemaTypes },
11
});

1
{
2
  "compilerOptions": {
3
    "types": ["@sanity/astro/module"]
4
  }
5
}

1
// schemaTypes/postType.ts
2
import { defineField, defineType } from "sanity";
3

4
export const postType = defineType({
5
  name: "post",
6
  title: "Post",
7
  type: "document",
8
  fields: [
9
    defineField({ name: "title", type: "string" }),
10
    defineField({ name: "body", type: "array", of: [{ type: "block" }] }),
11
  ],
12
});

1
// schemaTypes/index.ts
2
import { postType } from "./postType";
3

4
export const schemaTypes = [postType];

1
npm run dev

1
// src/pages/index.astro
2
---
3
import type { SanityDocument } from "@sanity/client";
4
import { sanityClient } from "sanity:client";
5
import Layout from "../layouts/Layout.astro";
6

7
const posts = await sanityClient.fetch<SanityDocument[]>(
8
  `*[_type == "post"]{ _id, title }`,
9
);
10
---
11

12
<Layout>
13
  <h1>Posts</h1>
14
  <ul>
15
    {posts.map((post) => <li>{post.title}</li>)}
16
  </ul>
17
</Layout>

1
npx sv create --template minimal --types ts --install npm my-app
2
cd my-app

1
vercel link # If you didn't link to Vercel in the previous step
2
vercel env pull .env.local

1
npm i @sanity/sveltekit sanity -D

1
// src/lib/sanity/sanity.config.ts
2
import { defineConfig } from "sanity";
3
import { structureTool } from "sanity/structure";
4
import {
5
  PUBLIC_SANITY_PROJECT_ID as projectId,
6
  PUBLIC_SANITY_DATASET as dataset,
7
} from "$env/static/public";
8
import { schemaTypes } from "./schemaTypes";
9

10
export default defineConfig({
11
  basePath: "/studio", // `basePath` must match the route of your Studio
12
  projectId,
13
  dataset,
14
  plugins: [structureTool()],
15
  schema: { types: schemaTypes },
16
});

1
// src/routes/studio/[...catchall]/+page.svelte
2
<script lang="ts">
3
  import config from "$lib/sanity/sanity.config";
4
  import { SanityStudio } from "@sanity/sveltekit";
5
</script>
6

7
<SanityStudio {config} />

1
// src/lib/sanity/schemaTypes/postType.ts
2
import { defineField, defineType } from "sanity";
3

4
export const postType = defineType({
5
  name: "post",
6
  title: "Post",
7
  type: "document",
8
  fields: [
9
    defineField({ name: "title", type: "string" }),
10
    defineField({ name: "body", type: "array", of: [{ type: "block" }] }),
11
  ],
12
});

1
// src/lib/sanity/schemaTypes/index.ts
2
import { postType } from "./postType";
3

4
export const schemaTypes = [postType];

1
npm run dev

1
// sveltekit-app/src/lib/sanity.ts
2
import { createClient } from "@sanity/client";
3
import {
4
  PUBLIC_SANITY_PROJECT_ID,
5
  PUBLIC_SANITY_DATASET,
6
} from "$env/static/public";
7

8
export const client = createClient({
9
  projectId: PUBLIC_SANITY_PROJECT_ID,
10
  dataset: PUBLIC_SANITY_DATASET,
11
  apiVersion: "2026-01-01",
12
  useCdn: true,
13
  // token: process.env.SANITY_API_TOKEN, // Required if your dataset is private.  Set token at https://www.sanity.io/manage
14
});

1
// src/routes/+page.server.ts
2
import type { PageServerLoad } from "./$types";
3
import { client } from "$lib/sanity/client";
4

5
export const load: PageServerLoad = async () => {
6
  const posts = await client.fetch(`*[_type == "post"]{ _id, title }`);
7
  return { posts };
8
};
9

1
<!-- src/routes/+page.svelte -->
2
<script lang="ts">
3
  import type { PageProps } from "./$types";
4

5
  let { data }: PageProps = $props();
6
</script>
7

8
<h1>Posts:</h1>
9
<ul>
10
  {#each data.posts as post}
11
    <li>{post.title}</li>
12
  {/each}
13
</ul>

1
npm create nuxt@latest my-app -- --modules sanity --template minimal
2
cd my-app
3
vercel link

1
cd../
2
npm create sanity@latest -- --output-path studio --template clean --typescript --dataset production

1
├── my-app/       # Nuxt app
2
└── studio/       # Sanity Studio

1
// studio/schemaTypes/postType.ts
2
import { defineField, defineType } from "sanity";
3

4
export const postType = defineType({
5
  name: "post",
6
  title: "Post",
7
  type: "document",
8
  fields: [
9
    defineField({ name: "title", type: "string" }),
10
    defineField({ name: "body", type: "array", of: [{ type: "block" }] }),
11
  ],
12
});

1
// studio/schemaTypes/index.ts
2
import { postType } from "./postType";
3

4
export const schemaTypes = [postType];

1
npm run dev

1
cd ../my-app
2
vercel link # If you didn't link to Vercel in the previous step
3
vercel env pull .env

1
// nuxt.config.ts
2
export default defineNuxtConfig({
3
  compatibilityDate: "2026-01-26",
4
  devtools: { enabled: true },
5
  modules: ["@nuxtjs/sanity"],
6
  sanity: {
7
    projectId: process.env.NUXT_PUBLIC_SANITY_PROJECT_ID,
8
    dataset: process.env.NUXT_PUBLIC_SANITY_DATASET,
9
    apiVersion: "2026-01-01",
10
  },
11
  vite: {
12
    optimizeDeps: {
13
      include: ["react-compiler-runtime", "react", "react-dom"],
14
    },
15
  },
16
});

1
# in my-app/
2
npm run dev

1
<!-- app/pages/index.vue -->
2
<script setup lang="ts">
3
interface Post {
4
  _id: string;
5
  title: string;
6
}
7

8
const query = groq`*[_type == "post"]{ _id, title }`;
9
const { data: posts } = await useSanityQuery<Post[]>(query);
10
</script>
11

12
<template>
13
  <div>
14
    <h1>Posts</h1>
15
    <ul>
16
      <li v-for="post in posts" :key="post._id">
17
        {{ post.title }}
18
      </li>
19
    </ul>
20
  </div>
21
</template>

1
<!-- app/app.vue -->
2
<template>
3
  <div>
4
    <NuxtRouteAnnouncer />
5
    <NuxtPage /> <!-- Add this -->
6
  </div>
7
</template>

1
# in studio/
2
npx sanity deploy

1
npx create-react-router@latest my-app -y
2
cd my-app
3
vercel link

1
cd ../
2
npm create sanity@latest -- --output-path studio --template clean --typescript --dataset production

1
├── my-app/       # React Router app
2
└── studio/       # Sanity Studio

1
// studio/schemaTypes/postType.ts
2
import { defineField, defineType } from "sanity";
3

4
export const postType = defineType({
5
  name: "post",
6
  title: "Post",
7
  type: "document",
8
  fields: [
9
    defineField({ name: "title", type: "string" }),
10
    defineField({ name: "body", type: "array", of: [{ type: "block" }] }),
11
  ],
12
});

1
// studio/schemaTypes/index.ts
2
import { postType } from "./postType";
3

4
export const schemaTypes = [postType];

1
# in studio/
2
npm run dev

1
cd ../my-app
2
vercel link # If you didn't link to Vercel in the previous step
3
vercel env pull .env

1
# in my-app/
2
npm install @sanity/client

1
// app/sanity/client.ts
2
import { createClient } from "@sanity/client";
3

4
export const client = createClient({
5
  projectId: process.env.SANITY_PROJECT_ID,
6
  dataset: process.env.SANITY_DATASET,
7
  apiVersion: "2026-01-01",
8
  useCdn: true,
9
});

1
# in my-app/
2
npm run dev

1
// app/routes/home.tsx
2
import type { SanityDocument } from "@sanity/client";
3
import { client } from "~/sanity/client";
4
import type { Route } from "./+types/home";
5

6
const POSTS_QUERY = `*[_type == "post"]{ _id, title }`;
7

8
export async function loader() {
9
  const posts = await client.fetch<SanityDocument[]>(POSTS_QUERY);
10
  return { posts };
11
}
12

13
export default function Home({ loaderData }: Route.ComponentProps) {
14
  const { posts } = loaderData;
15

16
  return (
17
    <main>
18
      <h1>Posts</h1>
19
      <ul>
20
        {posts.map((post) => (
21
          <li key={post._id}>{post.title}</li>
22
        ))}
23
      </ul>
24
    </main>
25
  );
26
}
27

1
# in studio/
2
npx sanity deploy