How to use the Sanity Live Content API in various frameworks

These examples are intended to demonstrate how the Live Content API (LCAPI) works, and interacts with data loading and invalidation. They use @sanity/client alone. For some of these examples we deliver fully baked utils that you should use, for example Next.js 14 & 15 projects on App Router should use:

import {createClient, defineLive} from 'next-sanity'

const client = createClient({
  projectId: 'your-project-id',
  dataset: 'your-dataset',
  apiVersion: '2024-01-17',
  useCdn: true,
})

export const {sanityFetch, SanityLive} = defineLive({client})

instead of defining your own sanityFetch function and SanityLive component.

Examples that are done

• Astro – [https://lcapi-examples-astro.sanity.dev]
• TanStack Start – [https://lcapi-examples-tanstack-start.sanity.dev]
• SvelteKit – [https://lcapi-examples-sveltekit.sanity.dev]
• Nuxt – [https://lcapi-examples-nuxt.sanity.dev]
• Next.js 13 Pages Router – [https://lcapi-examples-next-13.sanity.dev]
• Next.js 14 App Router – [https://lcapi-examples-next-14.sanity.dev]
• Next.js 15 App Router – [https://lcapi-examples-next-15.sanity.dev]
• Next.js 15 canary with the 'use cache' directive - [https://lcapi-examples-next-canary.sanity.dev/]
• Next.js with Enterprise grade revalidation efficiency - [https://lcapi-examples-next-enterprise.sanity.dev] – uses Next.js 15, but doesn't require it, and the technique could be used in any framework that supports on-demand revalidation similar to ISR in Next.js on Vercel.

TODO

• Remix