Unlock seamless workflows and faster delivery with our latest releases – get the details

Early Access

Live Content API

Content is the lifeblood of applications. Ensure fresh content is served to all users—even at massive scale—without specialized infrastructure or dedicated engineering teams using the Live Content API.

Read docs Deploy a demo

Build live experiences in a few lines of code

Live Content API powers subscriptions of fine-grained changes to the response of any query, when mutations of any kind happen in any relevant document.

This code example shows the minimum required setup in Next.js using the next-sanity package.

The documentation contains more details for installation in other frameworks.

Install next-sanity→

import { client } from "@/sanity/client";
import { defineLive } from "next-sanity";

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

export default async function Page() {
  const {data: products} = await sanityFetch({ query: PRODUCTS_QUERY });

  return (
    <section>
      {products.map((product) => (
        <article key={product._id}>
          <a href={`/product/${product.slug}`}>{product.title}</a>
        </article>
      ))}
      <SanityLive />
    </section>
  );
}

API-fresh, CDN-fast

The days of pressing refresh to get the latest products, promotions, news stories, or anything else are over.

Live content is pushed, not pulled. The content of your application should change when content at the source changes. The Live Content API makes it so.

End-to-end fresh

The Live Content API sends events when fine-grained changes occur, so that the CDN is only partly invalidated. This change is propagated throughout the CDN as well as to individual end-users.

Even under high-traffic scenarios with fast-moving such as Black Friday sales or limited edition releases – your application's data will be as fresh as the source from which it is consumed.

sanity live cdn diagram

Learn more

Explore the Next.js track on Sanity Learn

Build a functional, content-driven and dynamic web application that best serves your end-users, fellow developers and content authors.

Start learning→

illustration of Sanity Learn interface

Course by Sonny Sangha

Build a Real-Time E-Commerce App with the Live Content API

Learn from Sonny Sangha how to integrate Sanity's Live Content API with Next.js 15 to create a dynamic, production-ready e-commerce application

Watch the course→

Get started in minutes

Get started with a free Sanity project or contact our sales team for a personalized demo.

Start building Contact sales

import { client } from "@/sanity/client";
import { defineLive } from "next-sanity";

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

export default async function Page() {
  const {data: products} = await sanityFetch({ query: PRODUCTS_QUERY });

  return (
    <section>
      {products.map((product) => (
        <article key={product._id}>
          <a href={`/product/${product.slug}`}>{product.title}</a>
        </article>
      ))}
      <SanityLive />
    </section>
  );
}