ReactJS resources

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

9 React tools

sanity-plugin-computed-field

A field based on other fields; memoization in your Sanity model. Field value is recomputed with the click of a button, using a GROQ query referencing the current document being edited, and a reducing function to produce the single value from the GROQ result.

Sean H
Go to sanity-plugin-computed-field

SUPER Pane

The Sanity Desk Tool Pane with Super Powers

Rico Kahler
Go to SUPER Pane

React Portable Text

An easy way to render Portable Text block content in React applications.

Corey Ward
Go to React Portable Text

Next.js Sanity Image

Utility for using responsive images hosted on the Sanity.io CDN with the Next.js image component.

Lorenzo de Jong
Go to Next.js Sanity Image

Media Library

The missing media library for Sanity. With support for filters per tag and extension. And it's fully themeable! 🔥

Dennis Passway
Go to Media Library

Autocomplete Tags

This plugin creates a custom tags input field for Sanity Studio. This custom input field allows users to type tags, select existing ones from the dropdown or create new ones. This is handy if you want to offer authors an experience of "type, hit Enter, repeat" for adding tags.

Art Rosnovsky
Go to Autocomplete Tags

Mobile preview

The mobile preview plugin makes it possible to preview how a website looks on a mobile phone.

Jesper Paulsen
Go to Mobile preview

9 React starters

HeySugar (Gatsby)

An open-source, self hosted, blood sugar tracker for type one and type two diabetics. Developed with Sanity and built with Gatsby.

Jamie Bradley
Go to HeySugar (Gatsby)

Kitchen Sink

Official(made by Sanity team)

Sanity.io’s ever-evolving feature-rich demonstration studio. Fully customizable examples of page building, blog template and more examples with a React.js front-end.

Go to Kitchen Sink

Blog with Gatsby

Official(made by Sanity team)

Fully customizable blog template with a Gatsby & React.js front-end.

Go to Blog with Gatsby

Commerce Layer Starter

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

Go to Commerce Layer Starter

Next.js Landing Pages

Official(made by Sanity team)

SEO friendly page builder in React.js. Heroes, sign-up forms and calls to action.

Go to Next.js Landing Pages

Gatsby Portfolio

Official(made by Sanity team)

A clean Gatsby & React.js starting point for portfolios, project listings or case studies.

Go to Gatsby Portfolio

Next.js Ecommerce Starter

Official(made by Sanity team)

An e-commerce starter that features a studio with a simple Next.js frontend. This starter uses the Next.js toolkit for Sanity.io.

Go to Next.js Ecommerce Starter

Next.js Blog with Comments

Official(made by Sanity team)

A blog site with posts and comments stored together for management. Build using Next.js, Sanity.io, and Vercel.

Bryan Robinson
Go to Next.js Blog with Comments

10 React guides

View all

Top 5 rich-text React components

This post discusses top 5 rich-text components for React.js, the pros and cons and how to use each in your next project

William Ugonna Imoh
Go to Top 5 rich-text React components

Make a Progressive Web App with React

Learn how to create a PWA with Sanity and React. This is a step-by-step tutorial to help you go from idea to deployment. First, we'll define what PWAs are and how Sanity can help you power one, and then… a full tutorial!

Rico Kahler
Go to Make a Progressive Web App with React

Custom Commerce.js input field for Sanity.io

Pair your headless content with headless commerce! Select your Commerce.js products directly from Sanity Studio.

This is an external link at:commercejs.com
Nikita Kakuev
Go to Custom Commerce.js input field for Sanity.io

Using Theme UI with SANITY.io

Learn how to integrate SANITY.io block content with Theme UI styles on your frontend

This is an external link at:www.erichowey.dev
Eric Howey
Go to Using Theme UI with SANITY.io

26 React projects made with Sanity

View all

Figma Config

Website for Config, the global design conference by Figma.

Corey Ward
Go to Figma Config

Why Mums Don't Jump

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

Paul Brickles
Go to Why Mums Don't Jump

Black History Month Church Activities Micro-Site

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

Thomas Z Lukoma
Go to Black History Month Church Activities Micro-Site

Portfolio

A sample portfolio to learn more about Sanity.io and GROQ

Sara Gray
Go to Portfolio

Takeout Tracker

We keep track of Austin, TX restaurants open during the covid-19 health crisis. Please patronize them, tip well, and be patient and understanding about any shortages or mishaps.

Go to Takeout Tracker

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.

Choose a starter
OR install Sanity with:
λ npm install -g @sanity/cli
λ sanity init

Other frameworks

All frameworks