How to use Sanity with Astro

How to use Sanity with Astro: what to keep in Sanity and what in code, the setup step by step, rebuilds on publish, images, roles and what it costs.

Written by: Matthew Bishop
Published: 23 October 2026
Reading time: 6 minutes

To use Sanity with Astro, create a Sanity project, add the official @sanity/astro integration, model the content your team updates often as documents, and query it in your Astro pages. Then have Sanity tell your host to rebuild the site whenever someone publishes. Your marketing team edits in Sanity Studio, a form-based editing app, and the site stays fast static pages. We use this setup on client sites such as Generate, whose blog and Summit speakers live in Sanity.

What goes in Sanity, and what stays in code

The decision that matters most isn’t technical: it’s which content goes in the CMS. Our rule is simple. Content your team adds or updates every week goes in Sanity, as structured documents. Pages that change rarely, or need design work when they do, stay as code.

Generate: the blog and the Summit’s speakers are in Sanity, so the team can add posts and update speakers from one Summit to the next. The Summit landing page stays as code, where design changes are quicker and safer.
G Plus, a site we’re building now: studios, classes, events, team and FAQs are in Sanity, because they change all the time.
Our own site: no CMS at all. We trialled Sanity and Keystatic and went back to Markdown files, because the people writing are the people building.

If you’re still choosing a CMS, start with the best CMS for Astro. This guide assumes you’ve chosen Sanity.

How the pieces fit together

Piece	What it does
Content Lake	Sanity’s hosted database, where your content lives
Sanity Studio	The editing app your team uses, built from your content model
Astro	Fetches the content when the site builds and turns it into pages
Your host	Rebuilds and publishes the site when Sanity says content has changed

How to set it up

1. Create a project and a dataset

Sign up at Sanity and create a project. A dataset holds your content: most marketing sites need one, called production. The free plan includes two public datasets (Sanity). Public is fine for marketing content, which ends up on your website anyway.

2. Add the integration

Run npx astro add @sanity/astro @astrojs/react, then set your projectId and dataset in astro.config.mjs. React is only needed if you embed Sanity Studio in the site. For a static site, set useCdn: false, so every build reads the latest published content (Sanity on GitHub).

3. Model content as documents, not pages

Describe each kind of content once, with its fields:

A speaker with a name, role, company, photo and bio.
An event with a date, venue and the speakers it references.
A post with a title, author, cover, summary and body.

Model what the content is, not where it appears. A speaker entered once can then appear on the agenda, on a speaker page and in a post, and an update shows everywhere. Keep fields specific: a “job title” field your team fills in beats a free-text block they format by hand.

4. Put Studio where your team will use it

Studio can run inside your site, at a route such as /admin, using the studioBasePath option (Sanity on GitHub). Or you can deploy it separately and host it with Sanity. Embedding keeps everything in one project; a separate Studio keeps the site’s build simpler.

5. Query the content in your pages

Import the client with import { sanityClient } from "sanity:client" and fetch content with GROQ, Sanity’s query language. For a page per post or speaker, Astro’s getStaticPaths() creates one page for each document when the site builds. Rich text arrives as Portable Text, which you map to your own components, so a post’s body uses the site’s typography and design.

6. Serve images from Sanity’s CDN

Images uploaded to Sanity come from its global CDN, and you resize them by adding parameters to the URL: w and h for size, fit to control cropping, and auto=format to send the best format each browser supports (Sanity). Ask for the size each layout actually needs, so a phone never downloads a desktop image.

7. Rebuild the site when someone publishes

A static Astro site only shows new content after it rebuilds. Sanity’s GROQ-powered webhooks send a request whenever documents are created, updated or deleted, filtered to the content you choose (Sanity). Point one at your host’s deploy hook, such as Vercel’s, and every publish starts a build. The change goes live when that build finishes.

If your team wants to click on a page and edit it in place, that’s Sanity’s visual editing. It only works on pages rendered on request, so those pages need server output and an adapter for your host (Sanity on GitHub). Most marketing sites are fine with fast rebuilds.

8. Set up roles

On the free plan, project members are Administrators or Viewers. The Growth plan adds Editor, Developer and Contributor, who can write but not publish, which suits a review step before content goes live (Sanity).

Generate’s blog on a phone: “Fresh thinking. Good company.” above a featured story

Generate’s blog. Its posts are written in Sanity and built into the Astro site.

What it costs

As of 23 October 2026, Sanity’s free plan includes up to 20 user seats, two public datasets, 10,000 documents, 1 million API CDN requests and 250,000 API requests a month, and 100GB each of bandwidth and assets. Growth is US$15 per seat a month (Sanity). A static site fetches content when it builds, not on every visit, so it uses far fewer requests than a site that queries Sanity on every page view.

Hosting the Astro site is a separate cost, paid to your host.

Questions we get asked

Is Sanity better than WordPress?

For a marketing site built with Astro, usually yes: Sanity holds structured content and Astro turns it into fast pages, with no plugins or themes to keep updated. WordPress suits teams who want one system for editing and hosting, or need its plugins. It can also feed an Astro site as a headless CMS.

Which Astro CMS is the best?

For a marketing team that updates content every week, we use Sanity. For developer- or AI-edited sites, Astro’s own content collections are enough. Keystatic and TinaCMS suit a free editor that saves to Git, and Storyblok suits visual page-building. We compare them in the best CMS for Astro.

Is Sanity free or paid?

Both. As of October 2026, the free plan covers up to 20 seats and 10,000 documents, which is enough for many marketing sites. The Growth plan is US$15 per seat a month and adds roles such as Editor and Contributor. Enterprise pricing is custom.

Is Sanity a good CMS?

Yes, for structured content that a team updates often. Its editing app is built from your own content model, so editors fill in clear fields instead of formatting pages. It needs a developer to set up, and teams who want to design whole pages themselves may prefer a visual builder such as Webflow.

Sanity is one part of a wider move to Astro. For the rest, see how to build a website with Astro, Astro SEO, Astro vs Next.js, migrating from WordPress or from Webflow, and our guide to Astro web development. If you’d like a site built this way, see our Webflow and custom development service, or tell us about your site.