Skip to content
Sanity
Get started
  • Sanity Studio - Flexible editing environment
  • Content Lake - Real-time database
  • Developer experience - Tooling you love
  • Structured content - The philosophy behind Sanity
  • Review changes - View edits & rollback instantly
  • Image pipeline - On-demand transformations
  • E-commerce - Better shopping experiences
  • Marketing sites - Control your story
  • Products & services - Innovate and automate
  • Mobile apps - Content backend for every OS
  • Aether - Unique digital shopping experience
  • Morning Brew - Omnichannel media distribution
  • InVision - Delivering exceptional customer experiences
  • DataStax - Personalization for global audience
  • React
  • Gatsby
  • Next
  • Nuxt
  • Eleventy
  • Netlify
  • Vercel
  • Algolia
  • Documentation
  • Reference
  • Guides
  • Resource library
  • Headless CMS
  • Tools & plugins
  • Project showcase
  • Schemas & snippets
  • Agency partners
  • Technology partners
  • Get support
  • Share your work
  • 5 Disadvantages Of Wordpress That Are Holding You Back
EnterprisePricing
Contact salesLog inGet started

Voted #1 by developers

The Best CMS Built With React

Sanity is an open-source API-based CMS built with React.js.

With Sanity you can define your own content models in JavaScript and customize the editing interface with your own React.js components.

Get startedContact sales
React JS logo in blue

Powering exceptional digital experiences everywhere

NetlifyNikeFigmaCloudflareSonosFlexMovemberreMarkableCondé NastSkimsBrex
  • React from front to back

    React from front to back

    Manage all your code with the same framework and component-based way of thinking. Plays well with popular frontend frameworks like Next.js and Remix.

  • Fully customizable editor

    Fully customizable editor

    Start with a great default editor and customize it with official plugins or your own custom plugin to create an editing experience authors will rave about.

  • Powerful APIs

    Powerful APIs

    Filter, sort, and transform your data however you need with the most powerful and friendly APIs of any headless CMS. Query documents with GraphQL and GROQ.

  • Image optimization

    Image optimization

    Never worry about image optimization again. Crop, blur, hotspot, grayscale and more. Sanity’s asset pipeline handles it all. All backed by a global CDN.

  • Embeddable studio

    Embeddable studio

    Sanity is a standalone React application and can be embedded wherever you need it. No more awkward URLs. Just content editing where you want it.

  • Framework integrations

    Framework integrations

    Sanity has an official toolkit for NextJS and robust support for other major React frameworks like Hydrogen, Remix and Gatsby. Happy paths for all.

Full-stack React templates

Get your ideas live with Vercel or Netlify within minutes.

Our popular templates give you a complete React backend and frontend using frameworks like Next.js and Gatsby.

Blog with Built-in Content Editing

A Sanity-powered blog with built-in content editing and instant previews.

  • Vercel
  • Next.js

Personal Website with Built-in Content Editing

A Sanity-powered personal website with built-in content editing and instant previews.

  • Vercel
  • Next.js

Clean Next.js site with Sanity Studio

A clean example of Next.js with embedded Sanity ready for recomposition.

  • Next.js
  • Vercel
Browse all templates
Workspaces

Deeply customizable environments

Sanity Studio enables you to create content using unique components for specific use cases, such as social media preview cards, or work with integrated tooling to orchestrate complex content workflows, such as creating localized content.

Each workspace can be defined for unique content use cases, such as by readiness, region, product area, and more. Your workspace definition can specify distinct tooling, themes, and plugins, and it can be readily shared with anyone in your organization.

Powerful APIs and query languages

Sanity offers the most flexible and powerful APIs of any Content Management System. They're not only great at reading, writing, and patching, but they let you do it in real-time, so you don’t have to worry about document locking and race conditions.

Query documents with the popular GraphQL, or our very own GROQ: which lets you get exactly what you need, in any way or form you need it.

Welcoming community

React developers love working with Sanity

Read what our community has been saying about Sanity and React.

Michael Edelman

Solutions Architect @ Apollo GraphQL

It’s just SO easy. I made both the site and CMS in about half a day total. Modelled the ThemeUI and content schema in GraphQL SDL, wrote the custom bits for the editor in React, and barely had to do anything on the Gatsby side. I don’t know how the DX could be much better!?

Read tweet

Zahra Dargahi

Senior Frontend Developer @ IAG

I started using Sanity for a friend's startup project. As I am using react components. Loving it! It allows developers to define a simple schema for content that is easily deployed using command line interface.

Read tweet

Kevin McAloon

Frontend Developer @ Compassion International

After playing around with different JAMstack combos, headless CMS, SSGs for React, etc... I think I've finally landed on my ultimate, seamless, buzzworded, undefeatable ultra stack: Sanity as a CMS, Create React App, React Snap (SSR) + Netlify (pre-rendering).

Read tweet

Brent Robbins

Full Stack React Developer

The CMS is made with React and it’s open source so you can extend/tweak it unlike competitors like Contentful. Content modeling is flexible and powerful. It has a generous free tier and after that you pay only what extra you need.

Read case study
Join the Sanity community on Slack
Portable Text

Total presentational control to help you go far

Rich text within Sanity is stored in an open-source format called Portable Text. Portable Text uses JSON arrays to store data, decoupling your content from your frontend code.

Separating content and code like this gives you complete control over how and where that content will ultimately be presented.

Sanity maintains a helper library called Portable Text to React which streamlines transforming your content into React components.

Framework integrations

Build your own React CMS

Ready to go? Sanity Studio pairs perfectly with modern frontend frameworks like Next.js, SvelteKit and Gatsby.

Sanity empowers you to build a custom React CMS backend that your entire team will love using.

Here are some guides to get going:

→ Follow the Next.js + Sanity tutorial

→ Watch the Sanity crash course

→ Build a Remix + Sanity website

Or do it yourself with the Sanity CLI:

npm create sanity@latest

Voted #1 by developers

In the 2022 JAMStack Community Survey, Sanity has the highest satisfaction score for content platforms.

It's the fastest, most flexible way to structure and deliver content to digital products.

Find out why and get started in minutes.

Get started and find out why

The benefits of using a React-based Headless CMS

Version control your backend

Sanity is configured and customized entirely in code meaning you can version control your backend and store it in git just like your frontend. No more GUI

Real-time collaboration

Our dynamic React-based editing environment is fully real-time; every keystroke is stored and shared in an instant. It also tracks changes, retains a detailed history, and offers one-click restores.

Respond to editor needs

You have the freedom to structure Sanity Studio however you like. Use React patterns to group content types in meaningful ways, hide the stuff you don’t use every day, combine rich document list-views from any field, and brand the studio in your own image.

Reuse content across multiple channels

You don’t have to get by with managing content in different places. We provide scalable storage, flexible APIs, and best-in-class tools for structuring content so you can build exactly what you need, then fetch and query it for any channel you like.

Open source

The Sanity Studio ships as an open-source single page React app. Install plugins from npm or build your own. You can also integrate Sanity in your own applications.

Easily combine rich-text with data

Sanity treats your content as data, and data as content. There’s no HTML, just JSON from beginning to end. Add semantic metadata to any field, annotate any text or inline object, and access everything from an edge-cached global CDN.

Enhance content through third-party APIs

You can connect Sanity with API-based 3rd party services for better content workflows. Send content back and forth between services places like Slack and Hubspot to get more done and reduce management tasks.

Iterate faster

Sanity’s flexible modeling and UI customization capabilities let you iterate quickly and evolve as you go. So you can reduce your time to market and work with content from day one.

Serve content from a global CDN

Your content lives on a fully-managed data store hosted in the cloud and a global asset CDN. So you can focus on building great content and experiences instead of worrying about servers, space and bandwidth.

Sanity has helped us transform the way we deliver content. It’s easy to customize and extend to meet our growing business needs.

Adina Ong

Web Development Manager, Cornerstone OnDemand

How does a React CMS work?

React is the leading JavaScript library for building highly interactive online experiences. It popularized the now ubiquitous idea of using components to structure an app and provides a well-known API for managing state in your application.

Ultimately, this gives React the power to control what is rendered on the screen based on how state changes. This interactivity and composability make React the perfect choice for building a CMS.

In a React CMS, React acts as the bridge between the raw database servers and the user interface an editor sees. React can react to changes in the user interface or the database and then take a related action.

Imagine you complete your next great blog post and hit publish. React is responsible for reacting to this publish event and then doing something like updating the document status to published. React will also then handle passing this changed document status onto the database itself.

Try Sanity React.js CMS

Generous quota included. Pay-as-you-go for users, usage and features on all plans.

Get StartedContact sales

Workspaces

Sweet DX

Powerful customization framework

Real-time editing and previews

Dark mode

Ultralight code foundation

Composable forms & plugins

Embeddable Studio

Last updated March 30, 2023

Platform

Structured ContentDeveloper experienceContent LakeSanity StudioSecurity & Compliance
  • Sanity vs Contentful
  • Sanity vs Strapi
  • Sanity vs Wordpress
  • Sanity vs Adobe Experience Manager
  • Sanity vs Hygraph
  • Sanity vs Sitecore
  • Sanity vs Storyblok
  • Sanity vs Contentstack
  • Sanity vs Prismic
  • Sanity vs Drupal
  • Sanity vs ButterCMS

Resources

Documentation
  • React Blog
  • Gatsby Blog
  • Next.js Landing Pages
  • Progressive Web Application
  • Single Page Application
  • Svelte & Typescript App
  • Vue & Tailwind Blog
  • Developer Portfolio Templates
  • Form validation with Yup
  • Live Preview with Next.js and Sanity.io
Resource library
  • Agency partners
  • Technology partners
  • Blog Template
  • Personal Website Template
  • Developer Portfolio Templates
  • All Templates
Case Studies
  • Headless CMS
  • What is an API CMS
  • Static Sites 101
  • Headless SEO
  • Localization
  • GraphQL vs REST
  • What is a DXP?
  • Typescript 101
  • Content as a Service
  • Ecommerce SEO
  • React CMS
  • Next.JS CMS
  • CMS for Shopify
  • Content platform
  • Multilingual CMS
  • Static Site CMS
  • Gatsby CMS
  • Node CMS
  • E-commerce CMS
  • Vue CMS
  • Angular CMS
  • GraphQL CMS
  • Newspaper CMS
  • Magazine CMS
  • CMS for apps
  • Remix CMS

Company

Contact SalesEnterpriseCareersTerms of ServiceAccessibility Statement

Stay connected

  • GitHub
  • Slack
  • Twitter
  • YouTube
  • Stack Overflow
  • Blog RSS
  • Newsletter
©Sanity 2023