Use Sanity with Astro

Integrate Sanity with your Astro app

Astro and Sanity pair to offer fast static pages, visual editing, and the flexibility to build with components from a variety of frameworks.

The basics

Start here

Discover the different ways to integrate Astro and Sanity

Astro quickstart

New to Sanity and Astro? Follow these step-by-step instructions to set up your site and Studio.

Visual Editing with Astro

Configure Sanity’s Presentation Tool, draft mode, and visual editing overlays to work with an Astro 6 server-rendered frontend.

Configuration

Configure @sanity/astro

Integration options, the sanity:client virtual module, environment variables, and client customization.

Embedding Studio in Astro

Mount Sanity Studio as a route using studioBasePath.

Content delivery

Query content

Fetch Sanity content with GROQ queries in Astro components.

Images and Portable Text

Render images with CDN transforms and rich text with Portable Text.

Static and server rendering

Choose the right rendering mode for your Astro + Sanity project.