Sanity Live Content

Relevant source files

The following files were used as context for generating this wiki page:

• sanity/lib/live.ts
• sanity/lib/client.ts
• app/(personal)/layout.tsx
• sanity.config.ts
• app/(personal)/projects/[slug]/page.tsx
• README.md

Sanity Live Content refers to the suite of features and configurations within this project that enable real-time content updates, visual editing, and live revalidation without requiring full site rebuilds. It bridges the Sanity Content Lake with the Next.js frontend, allowing authors to see changes instantly as they type in the Sanity Studio.

The implementation relies on the next-sanity/live library to provide a seamless "native authoring experience." This includes real-time collaboration, side-by-side instant previews, and the use of Content Source Maps (stega) to link frontend elements directly back to their source fields in the CMS.
Sources: README.md:5-10, README.md:16-18

Live Data Fetching and Revalidation

The core of the live content system is the sanityFetch function and the SanityLive component. Unlike standard fetch calls, sanityFetch is configured to handle live revalidation, ensuring that the latest content from the Sanity Content Lake is always available to the application components.

Implementation Details

The live fetching mechanism is initialized in sanity/lib/live.ts using the defineLive function. It utilizes a shared client and both server and browser tokens to maintain a secure, real-time connection.

import {defineLive} from 'next-sanity/live'
import {client} from './client'
import {token} from './token'

export const {SanityLive, sanityFetch} = defineLive({
  client,
  serverToken: token,
  browserToken: token,
})

Sources: sanity/lib/live.ts:1-10

Data Flow Diagram

The following diagram illustrates how data flows from the Sanity Content Lake to the frontend via the Live Content system.

Visual Editing and Stega

Visual Editing allows content creators to interact with the frontend and navigate directly to the corresponding field in Sanity Studio. This is achieved through "stega," which embeds invisible Content Source Maps into the strings returned by the API.

Configuration

The Sanity client is specifically configured to enable stega and point to the Studio URL. It includes a filter to determine which properties should include these source maps.

Option	Value / Description	Source
studioUrl	/studio	sanity/lib/api.ts:28
stega.studioUrl	Derived from sanity/lib/api.ts	sanity/lib/client.ts:11
stega.filter	Returns true if path ends in 'title' or uses default	sanity/lib/client.ts:13-19
perspective	published (default for standard client)	sanity/lib/client.ts:9

Sources: sanity/lib/client.ts:4-21, sanity/lib/api.ts:28

Integration in Components

Components use the createDataAttribute utility to generate data-sanity attributes. These attributes are recognized by the Visual Editing overlay to highlight editable areas.

const dataAttribute = data?._id && data._type
  ? createDataAttribute({
      baseUrl: studioUrl,
      id: data._id,
      type: data._type,
    })
  : null

Sources: app/(personal)/projects/[slug]/page.tsx:64-70

Presentation Tool and Draft Mode

The presentationTool is a Sanity Studio plugin that enables the side-by-side preview. It works in tandem with Next.js Draft Mode to display unpublished changes.

Sequence of Enabling Preview

This diagram shows the interaction between the Sanity Studio Presentation tool and the Next.js backend when enabling draft mode for live updates.

Studio Configuration

The Studio is mounted at /studio and incorporates the presentationTool with a specific resolution strategy for mapping document types to frontend routes.

• Main Documents: Maps project and page types to /projects/:slug and /:slug.
• Locations: Provides "locations" for singletons like home and settings, appearing in the Studio to inform the editor where content is used.
  Sources: sanity.config.ts:49-52, sanity/plugins/resolve.ts:10-48

Component Architecture for Live Content

To support live updates across the site, the SanityLive component is placed at the root of the layout.

Component	Responsibility	File Path
SanityLive	Listens for content changes and refreshes the current page's data.	app/(personal)/layout.tsx:78
VisualEditing	Provides the interactive UI overlay for clicking-to-edit content.	app/(personal)/layout.tsx:92
DraftModeToast	Notifies the user they are viewing drafts and provides a way to exit.	app/(personal)/layout.tsx:81-91
NextStudio	Mounts the Sanity authoring environment within the Next.js app.	app/studio/[[...index]]/page.tsx:18

Sources: app/(personal)/layout.tsx:75-95, app/studio/[[...index]]/page.tsx:15-20

Summary

Sanity Live Content provides a real-time bridge between the Sanity Studio and the Next.js application. By utilizing sanityFetch for data retrieval and SanityLive for revalidation, the project achieves an instant feedback loop for content editors. The system is further enhanced by Stega-powered Visual Editing, which allows for direct interaction with content fields through the frontend interface.
Sources: README.md:15-20, sanity/lib/live.ts:5-10