Sanity integration
Sanity is a headless CMS: editors work in Sanity Studio and the site pulls content through its API. We connect it to Astro with the official @sanity/astro integration and to Next.js with next-sanity, which adds live content and visual editing. Framer and Webflow can only import from Sanity through a sync or custom API work, so we usually pair Sanity with a coded site.
| Complexity | High |
|---|---|
| Method |
|
| Typical setup | 3 to 6 days |
| What we do | We model the content with you, build the schema and Studio, wire the site and set up preview and publish webhooks. |
| Category | CMS |
Setup by platform
How we set up Sanity
Framer
- Native
A third-party Framer plugin (Sanity Sync) imports chosen document types into Framer CMS collections. It is a one-way sync you re-run after edits, and the Framer domain has to be added to Sanity’s CORS origins.
Webflow
- API
- Zapier or Make
There is no official Sanity app for Webflow. We sync content into Webflow CMS with a small script on the Webflow Data API, or fetch it client-side in a Code Embed when the content can be public.
Astro
- Native
- API
The official @sanity/astro gives a configured client (sanity:client) and can embed Studio at /admin with @astrojs/react. Static builds query GROQ and a webhook rebuilds on publish; Visual Editing needs server rendering and reloads on each edit.
Next.js
- Native
- API
next-sanity gives the client, the embedded Studio and defineLive for the Live Content API, so published changes refresh only the queries they affect. Draft Mode plus the Presentation tool gives editors click-to-edit preview.
Use cases
What teams use it for
Marketing site content
Pages, posts, case studies and team members as structured content, no developer needed.
Live preview for editors
See a change on the real page before publishing, and click a heading to jump to its field.
One source for many surfaces
One source feeds the site, the product and emails, so a price or legal line changes once.
Before you add it
What to watch out for
Security
Keep tokens on the server
Read tokens for drafts and preview belong in server environment variables. Anything in the browser should be a public dataset or a viewer-only token.
Performance
Use the image pipeline
Sanity’s image URLs can resize and switch to WebP or AVIF with auto=format. Request the size you render instead of shipping originals.
Data layer
Model content before design ends
A schema built from the page designs (sections, references, slugs) saves rework. We draft it alongside the wireframes, not after.
FAQ
Questions about Sanity
Can editors use Sanity inside our website?
Yes. Both @sanity/astro and next-sanity can mount Sanity Studio on a route of your site, for example /admin, so editors log in on your own domain.
Does Sanity sync natively into Framer?
Not with a plugin from Framer or Sanity. The sync plugins on the Framer Marketplace are made by third parties and import content one way into Framer CMS. If you want Sanity as the source of truth, a coded Astro or Next.js site is the cleaner fit.
Will the site update when we publish?
On Next.js, the Live Content API pushes changes to the affected queries. On a static Astro site, a Sanity webhook triggers a rebuild on your host, which usually takes a minute or two.
Keep exploring
Compare platforms
Other integrations
- ContentfulAn API-first headless CMS for teams that publish across many sites, brands and channels.
- VercelThe hosting platform built by the Next.js team, with previews for every branch and cookieless analytics.
- NotionWrite in Notion, publish on your site: blogs, changelogs and job boards from a database.
You've reached the end, so now…
Tell us what you’re building.
We’ll help you map the right scope, team, timeline, and next steps.
Book a call