ReactJS is a leading Javascript framework for use in developing rich, interactive user interfaces. As one of the most popular and in-demand frameworks in web development, it's increasingly important to add React to your developer toolkkit. Enjoy these guides, tools, plugins, and projects written in React, for use with Sanity studio. There's a lot more here than guides to frontend frameworks! Sanity itself is written in React, so learning the framework in a frontend context (i.e., building React websites) can easily transfer over for use in Sanity, and there are a wide variety of custom React components and plugins for use in Sanity as well.

Guides, plugins and other developer resources for ReactJS - the popular open source Javascript framework.

ReactJS resources

Plugins, guides, starters and other developer resources for ReactJS - the popular open source Javascript framework.

React & Sanity.io | Developer resources

React

Oliver White

Creating custom component is great, but sometimes, it is hard to follow every fields changes, and assure data stability.

Handling complex state in a custom component

Mawla | Jamstack Agency

See how we use Sanity and Headless CMS to allow B2B SaaS companies to control their whole site.

Swap a €30k Budget for Just 5 Days Worth of Dev Time: Relaunching Fresco Cooks.

Tinloof

We go over different SEO elements that make Shopify stores we build at Tinloof rank on search engines.

10 Shopify SEO best practices with Sanity and Remix

We create an optimized translation workflow that combines Shopify and Sanity

Translating Shopify stores with Sanity

Saskia Bobinska

This Guide will lead you through the all the steps you need to level-up your use of Portable Text: from setting up block content, adding custom blocks and renderers for the Portable Text Editor in your studio. But also help you query for everything and render your awesome content in React!

Adding things to Portable Text - From block content schema to React component

Leverage Netlify Scheduled Functions to automate tasks.

How to create a Netlify cron job that crawls data and saves it on Sanity

In this article we explain how we use Sanity and Remix to dynamically create sitemaps. The example used is from Heavybit, a developer tools VC in San Francisco.

How to dynamically create a sitemap with Sanity and Remix

Andrew Kumar

In this guide, we'll cover live preview, edit in context, local development, and deploy processes with Stackbit and Sanity.

[Architecture] Stackbit + Sanity: architecture overview

Sean C Davis

Learn how Content Ops and Marketers using Sanity can get full DXC (Digital Experience Composition) capabilities like live previews, in-context ("on-the-glass") editing, component library, page assembly, and page templates. 

[Docs] Sanity visual authoring, editing, and page building by Stackbit.

A tutorial and other useful information when using Sanity as your content source.

[Tutorial] Stackbit: using Sanity as a Content Source

Arjen Scherff-de Water

Fresco Cooks make software for smart appliances

Fresco Cooks

Corey Ward

Website for Config, the global design conference by Figma.

Figma Config

Paul Brickles

Podcast website, plus blog and custom player. Built with Gatsby with a custom source plugin for TransistorFM.

Why Mums Don't Jump

Thomas Z Lukoma

A quickly spun-up marketing site for church activities related to Black History Month themes to help centralize all the information for the congregation.

Black History Month Church Activities Micro-Site

14islands

Neko

Boring Money

Boring Money is an independent business which has been set up to help normal people who don't have PhDs in finance make some smart investment decisions - quickly and painlessly.

Michael Fanuzzi

Moses Gunesch

Alice Freda

Make a Daily Difference helps you give back any day of the year, pairing international days of celebration and remembrance with organizations doing work in that field.

Make a Daily Difference

Remy Hunter

Unique site built for Jaeyoung Cheong's UX Design portfolio

cheongjaeyoung.com 💧

Alan Catozzi

The Online Destination for Italian Handmade Décor

Artemest Storefront

Ryan Spencer

S'More Info

Robin Pyon

Nina Andal Aarvik

Rita Dias

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

Personal Website with Built-in Content Editing

Cody Olsen

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

Blog with Built-in Content Editing

Bolaji Ayodeji

Alessandro Casazza

A multi-country ecommerce store built with Sanity Studio, Commerce Layer, Next.js, and deployed to Netlify.

Commerce Layer Sanity Template

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

Clean Sanity + Next.js app

Miguel Afonso

With this plugin, you can check document references

Check Document References

Implements a slider component for number ranges

Input Slider

Rein Undheim

Allows you to use the remove.bg api from the studio to remove the background from your images

Remove.bg Asset Source

Natalie Marleny

Plugin to see which documents reference a particular document 

Referenced By

Sogody

Susam integrates Sanity asset management with Shopify. As soon as you install it, you will be able to fully utilise Shopify content distribution from your Sanity environment.

SUSAM

Andy Fitzgerald

Create and manage SKOS compliant taxonomies, thesauri, and classification schemes in Sanity Studio.

Taxonomy Manager

P Christopher Bowers

A multi-tag input for sanity studio. Fully featured with autocomplete capabilities, live updates, predefined tag options, style and component customizability, and much more.

Gustavo Bremm

This plugin allows content editors to quickly view, approve and reject documents in draft mode (not published).