Integrate Sanity with Croct

This integration connects your Sanity project to Croct. Sanity keeps managing your static content, while Croct renders dynamic content on top of it, so you can run AB tests and personalize experiences without migrating your CMS or restructuring your schemas.

How it works

Croct sits alongside Sanity rather than in front of it. Your app fetches content from a slot. When an experience targets the visitor, Croct returns the dynamic variant. If the request fails, the component renders your original Sanity content as the fallback. That makes the integration additive: pages keep working exactly as they do today until you launch your first experience.

No CMS migration

Your schemas, documents, and editing workflow stay exactly as they are. Croct reads nothing from Sanity and writes nothing back to it, so you can adopt it one component at a time and roll back by removing a single fetchContent call.

Prerequisites

Before you start, make sure you have:

• A Croct account with a workspace and application set up.
• A Sanity project with a schema and at least one document set up.

Set up the integration

If you are starting from scratch, this demo gives you an example of a working project.

From your project, run the CLI. It detects your setup, installs the SDK, and wires the provider and middleware for you.

npx croct@latest init

If you prefer to set things up by hand, choose your SDK and follow the manual instructions.

Create components and slots

A Croct component defines the content structure that mirrors your Sanity schema, and the slot is the placeholder your application fetches content from. Follow this tutorial to create both for each module you want to make dynamic.

Implement the slots

For each slot, pass your Sanity content as the fallback when fetching it:

import {fetchContent} from '@croct/plug-next/server';
export async function HomeHero() {  const sanityHero = await getSanityHero();  const {content} = await fetchContent('home-hero', {    fallback: sanityHero,  });
  return <Hero {...content} />;}

Verify the integration

Once the SDK is running, confirm that dynamic content reaches your site:

1. Open your application

   Load a page that renders the connected component. You should see the default content.

2. Launch a personalized experience

   Create and publish a personalized experience or an AB test targeting the connected slot.

3. Confirm dynamic content

   Reload the page as a visitor who matches your audience. You should see the dynamic content instead of the default.