Skip to content
Docs
Blog

Get Started

Adding Vyuh to your React project is straightforward with your favorite package manager. We will be installing the following packages:

  • npm: Core package for Vyuh React
  • npm: Extension for working with CMS content
  • npm: Core feature for working with a CMS
  • npm: Content provider for Sanity.io
Terminal window
pnpm add @vyuh/react-core @vyuh/react-extension-content @vyuh/react-feature-system @vyuh/react-plugin-content-provider-sanity

Then integrate it with your React application:

import { PluginDescriptor, VyuhProvider } from '@vyuh/react-core'
import {
  RouteLoader,
  DefaultContentPlugin,
} from '@vyuh/react-extension-content'
import { SanityContentProvider } from '@vyuh/react-plugin-content-provider-sanity'
import { systemFeature } from '@vyuh/react-feature-system'
import { blogFeature } from './features/blog'


/**
 * Plugin configuration
 */
const plugins = new PluginDescriptor({
  content: new DefaultContentPlugin(
    new SanityContentProvider({
      projectId: '<your-project-id>',
      dataset: 'production',
      perspective: 'drafts',
      useCdn: false,
      token: '<your-token>',
    }),
  ),
})


const getFeatures = () => [systemFeature, blogFeature]


function App() {
  return (
    <VyuhProvider features={getFeatures} plugins={plugins}>
      <YourAppComponent />
    </VyuhProvider>
  )
}


// For rendering CMS-driven blog pages
function BlogPostPage() {
  return <RouteLoader path="/blog/my-first-post" live={true} />
}

Notice the use of the RouteLoader component that allows you to load a document at a path. You can also pass it the live property and make this route automatically update whenever there are changes to that particular document. The blogFeature feature is a custom feature that exposes components for managing blog posts on the Studio, and rendered on the React app.

The Vyuh framework includes a host of functionality for building custom features, with actions, conditions, layouts for different content items and also custom plugins. We’ll explore all of these as we expand our documentation.

What’s Next?

Now that you’ve installed the basic Vyuh React packages, you’re ready to build a CMS-driven blog application:

Set Up Sanity CMS Learn how to configure Sanity.io as your headless CMS and create blog post schemas for your Vyuh React application.
Rendering Content with Vyuh React Discover how to fetch and display blog posts in your React components with live updates.

How Vyuh Renders CMS Content

The power of Vyuh comes from its ability to seamlessly connect your React components to CMS content:

  1. Content Definition: You’ll define blog post schemas in Sanity that specify fields like title, author, and content
  2. Component Mapping: Vyuh maps CMS content types to your React components through features like blogFeature
  3. Dynamic Rendering: The RouteLoader component fetches content from specific paths in your CMS
  4. Live Updates: With the live={true} prop, your UI automatically updates when content changes in the CMS

This approach gives content editors the freedom to update blog posts without developer intervention, while developers maintain control over the presentation layer through React components.

Join the Vyuh Community

We’re excited to see what you build with Vyuh React! The framework is designed to make content-driven applications easier to develop and maintain, giving your team the flexibility to iterate quickly.

Whether you’re building a blog, e-commerce site, or complex web application, Vyuh React provides the tools you need to create dynamic, CMS-driven experiences with minimal effort.

Happy coding!