Set Up Sanity CMS

This guide walks you through setting up Sanity.io as your headless CMS for Vyuh React applications. Sanity provides a flexible content platform that works seamlessly with Vyuh’s content-driven approach.

Why Sanity?

Vyuh works well with Sanity because:

Schema as code: Define your content models in TypeScript rather than a GUI
Customizable Studio: Tailor the editing experience for content creators
Real-time updates: Content changes appear instantly in your app
Powerful query language: GROQ lets you fetch exactly the data you need

Getting Started with Sanity

1. Create a Sanity project

Install the Sanity CLI and create a new project:

# Install the Sanity CLI globally
pnpm add -g @sanity/cli

# Create a new Sanity project
pnpx create-sanity@latest

During setup:

Choose “Create a new project”
Give your project a name
Use the default dataset configuration
Select “Clean project with no predefined schemas” as your template

2. Install Vyuh Sanity plugins

Add the Vyuh Sanity plugins to your project:

# Navigate to your Sanity project directory
cd your-sanity-project

# Install Vyuh Sanity plugins
pnpm add @vyuh/sanity-plugin-structure @vyuh/sanity-schema-core @vyuh/sanity-schema-system

3. Configure Sanity for Vyuh

Update your sanity.config.ts file to use the Vyuh structure plugin:

import { defineConfig } from 'sanity'
import { vyuh } from '@vyuh/sanity-plugin-structure'
import { system } from '@vyuh/sanity-schema-system'

export default defineConfig({
  name: 'default',
  title: 'Your Project Name',

  projectId: 'your-project-id',
  dataset: 'production',

  plugins: [
    vyuh({
      features: [
        system,
        // You'll add your custom features here later
      ],
    }),
  ],
})

4. Create a blog feature

Create a new directory for your blog feature:

mkdir -p features/blog

Create a blog post schema file:

import { defineType, defineField } from 'sanity'

export const blogPost = defineType({
  name: 'blog.post',
  title: 'Blog Post',
  type: 'object',
  fields: [
    defineField({
      name: 'title',
      title: 'Title',
      type: 'string',
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: 'publishDate',
      title: 'Publish Date',
      type: 'datetime',
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: 'author',
      title: 'Author',
      type: 'string',
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: 'featuredImage',
      title: 'Featured Image',
      type: 'image',
      options: {
        hotspot: true,
      },
    }),
    defineField({
      name: 'tags',
      title: 'Tags',
      type: 'array',
      of: [{ type: 'string' }],
    }),
    defineField({
      name: 'content',
      title: 'Content',
      type: 'vyuh.portableText',
    }),
  ],
  preview: {
    select: {
      title: 'title',
      author: 'author',
      date: 'publishDate',
      media: 'featuredImage',
      tags: 'tags',
    },
    prepare({ title, author, date, media, tags }) {
      const formattedDate = date
        ? new Date(date).toLocaleDateString()
        : 'No date'
      const tagList = tags && tags.length > 0 ? tags.join(', ') : 'No tags'

      return {
        title: title || 'Untitled Post',
        subtitle: `By ${author || 'Unknown'} • ${formattedDate} • ${tagList}`,
        media: media,
      }
    },
  },
})

5. Create a blog feature descriptor

Create a feature descriptor file to organize your blog schemas:

import { FeatureDescriptor } from '@vyuh/sanity-schema-core'
import { BuiltContentSchemaBuilder } from '@vyuh/sanity-schema-core'
import { blogPost } from './post'

export const blog = new FeatureDescriptor({
  name: 'blog',
  title: 'Blog Feature',
  description: 'Blog content types and schemas',
  contentSchemaBuilders: [new BuiltContentSchemaBuilder(blogPost)],
})

6. Register your blog feature

Update your sanity.config.ts file to include your blog feature:

import { defineConfig } from 'sanity'
import { vyuh } from '@vyuh/sanity-plugin-structure'
import { system } from '@vyuh/sanity-schema-system'
import { blog } from './features/blog'

export default defineConfig({
  name: 'default',
  title: 'Your Project Name',

  projectId: 'your-project-id',
  dataset: 'production',

  plugins: [
    vyuh({
      features: [
        system,
        blog, // Add your blog feature here
      ],
    }),
  ],
})

7. Start your Sanity Studio

Run your Sanity Studio to see your new schemas in action:

npm run dev

Your Sanity Studio should now be running at http://localhost:3333 🔗 with your blog schemas available.

8. Create API tokens

To connect your React app to Sanity, you’ll need API tokens:

Go to manage.sanity.io 🔗
Select your project
Navigate to API > Tokens
Create a new token with “Read” permissions for your frontend
Save this token securely - you’ll need it for your React app

Next Steps

Now that you have Sanity set up with your blog schemas, you’re ready to:

Create some sample blog posts in your Sanity Studio
Connect your React app to Sanity using the Vyuh content provider
Render your blog content in your React application

Continue to Rendering Content with Vyuh React to learn how to display your Sanity content in your React app.