Sanity Template Astro Clean

Sanity Template Astro Clean is a boilerplate that pairs the Astro static-site framework with Sanity's hosted Content Lake, giving developers a preconfigured blog starter with visual editing out of the box.

What is Sanity Template Astro Clean?

Sanity Template Astro Clean is an open-source starter template maintained by Sanity (under the sanity-io GitHub organization) that combines an Astro frontend in /frontend with a Sanity Studio in /studio. It accepts content authored in the Studio as input and produces a statically generated blog website with SEO tags, optimized images, and a custom 404 page as output. The template runs on Astro for rendering and connects to the Sanity Content Lake for data fetching. It is available as a GitHub repository with 179 stars.

Key Features

• Visual Editing — The template integrates the Sanity Presentation tool to provide click-to-edit overlays on the Astro site, with stega encoding that automatically marks string fields like title and excerpt.
• Portable Text rendering — Block content from Sanity is rendered on the Astro side using Portable Text, supporting the standard rich-text structure.
• Optimized images — Sanity Image URLs generate responsive srcset with automatic WebP/AVIF format selection and no layout shift (CLS).
• SEO-ready pages — Every page includes <meta> description, Open Graph, and Twitter Card tags, with per-post overrides via a dedicated SEO field in the Studio.
• Custom 404 page — Missing posts and invalid routes fall back to a styled 404 page instead of the default Astro error page.
• Environment-variable controls — PUBLIC_SANITY_STUDIO_URL and PUBLIC_SANITY_VISUAL_EDITING_ENABLED toggle the visual-editing system and stega encoding in production.
• TypeScript — Both the Astro frontend and the Sanity Studio are written in TypeScript.

Who is it for?

• Astro developers — They get a working Astro + Sanity integration without wiring up the content API manually, so they can focus on customizing the frontend.
• Content teams — Editors and writers can log into Sanity Studio to create and publish Post documents, and see changes reflected in the Astro app instantly via visual editing.
• Indie bloggers — Individuals who want a fast, SEO-optimized blog with a hosted CMS can deploy the template to Vercel and manage posts from the Studio.

What can you do with it?

• Launch a blog quickly — Initialize with npm create sanity and you have a blog with a Post schema, Studio, and Astro frontend ready to run locally in minutes.
• Extend the content model — Add new document types by editing studio/src/schemaTypes/documents/post.ts and the Astro templates that render them.
• Collaborate with editors — Invite project members through Sanity Manage, and they can access the deployed Studio to create content without touching code.

How does it work?

1. Run npm create sanity@latest -- --template sanity-io/sanity-template-astro-clean to initialize the template.
2. Navigate into the directory and run npm run dev to start both the Astro app on http://localhost:4321 and the Studio on http://localhost:3333.
3. Sign in to the Studio, create a Post document, publish it, and it appears in the Astro app.
4. Deploy the Studio with npx sanity deploy, then deploy the Astro app to Vercel by setting the root directory to /frontend and configuring environment variables.

FAQ

Is Sanity Template Astro Clean free?

The template is open source under the sanity-io GitHub organization; the Astro and Sanity Studio code is free to use. You will need a Sanity project, which offers a free tier with usage limits, but the template itself has no licensing cost.

How does visual editing work in production?

Visual editing is enabled by setting PUBLIC_SANITY_VISUAL_EDITING_ENABLED to "true". In production, the template recommends leaving it unset or "false" so users see the published content perspective, stega encoding is disabled, and data-sanity attributes are removed from the HTML.

What environment variables are required?

The template uses PUBLIC_SANITY_STUDIO_URL (which defaults to http://localhost:3333 for local dev) and PUBLIC_SANITY_VISUAL_EDITING_ENABLED. Before deploying, set PUBLIC_SANITY_STUDIO_URL to your live Studio URL (for example https://your-studio.sanity.studio).

Can I deploy the Astro app to any hosting provider?

Yes. The template documentation covers Vercel deployment with a GitHub repository, but the Astro frontend is static and can be hosted anywhere Astro supports, since it only relies on environment variables for the Sanity connection.