Vyuh for React

Build Modular, Scalable, CMS-driven React Applications

Docs | Website

Core Packages

Package	Description
	Core platform and architecture
	Content management system
	System-level features and components
	Sanity.io content provider

Feature Packages

Package	Description
	Marketing components and layouts
	Blog components and content types
	Authentication components and flows

Hi there! 👋

Vyuh for React brings the powerful architecture of the Vyuh Flutter framework to the React ecosystem. It provides a comprehensive solution for building CMS-driven React applications with a focus on modularity, scalability, and developer experience.

Building on the success of Vyuh for Flutter, this React implementation gives no-code flexibility to Business teams (via the CMS), and the full-code power to Engineering teams. This puts the right control at the right place without any compromise.

🤔 Why did we build this?

A common problem when building large scale applications is the need to stay modular as you keep growing the feature set. You also want different teams to work in parallel without stepping on each other. The typical approach of creating a single project and building all the functionality in it does not scale very well over time.

Additionally, modern web applications are very content-oriented and need to be dynamic. This means your journeys, page content, themes, etc. should be remotely controllable. In other words, making your app Server-driven.

Separation of Concerns

Combining all these capabilities requires a holistic approach, which is only possible when you build a cohesive framework.

Vyuh is that framework.

It allows you to create the perfect balance of simple, modular components on the CMS, with powerful React counterparts that take care of all the complexity.

The teams (Business teams) managing the content and experience don't have to worry about UI Design, pixel precision or performance and focus more on building the screen journeys and page content instead. The React engineering teams handle the complexity of the components along with its performance.

This clear separation allows a phenomenal flexibility in building simple to large scale apps. It also gives the right tools to the right teams and makes them more productive.

The Framework

The Vyuh for React framework has some powerful built-in capabilities such as:

• Building features atomically and in a modular fashion
• Features as transferable and reusable units of functionality
• Remote configuration of content, enabling Server-Driven UI
• Extensible Plugin-based approach to add new third-party integrations
• Team Independence
• Decentralised development
• Creating a family of apps with reusable features
• A growing set of integrations to make app development faster

🔩 The Building Blocks

The core building blocks that enable all of this include:

• Features: Build user-facing functionality in a modular, reusable, atomic manner. Features can be composed together to create the entire app or a family of apps.

• Plugins: All third party integrations are handled in a cross-cutting manner using Plugins. Authentication, Networking, CMS, Storage, Permissions, etc. are all plugins that are available to all features.

• CMS-Driven UI: Also known as Server-Driven UI, the entire app experience can be driven from a CMS. This includes the screen journeys, page content, themes, etc. The CMS itself is a standard plugin with custom Providers.

Note

The default CMS we use is Sanity.io.

Getting Started 🚀

Basic Setup

import { VyuhProvider, PluginDescriptor } from '@vyuh/react-core';
import { DefaultContentPlugin } from '@vyuh/react-extension-content';
import { SanityContentProvider } from '@vyuh/react-plugin-content-provider-sanity';
import { feature as systemFeature } from '@vyuh/react-feature-system';

// Configure your content provider
const contentProvider = new SanityContentProvider({
  projectId: 'your-project-id',
  dataset: 'production',
  perspective: 'published',
  useCdn: true,
});

// Configure plugins
const plugins = new PluginDescriptor({
  content: new DefaultContentPlugin(contentProvider),
});

// Define your features
const getFeatures = () => [
  systemFeature,
  // Your custom features
];

// Set up your application
function App() {
  return (
    <VyuhProvider features={getFeatures} plugins={plugins}>
      <YourApp />
    </VyuhProvider>
  );
}

Using the Vyuh Hook

import { useVyuh } from '@vyuh/react-core';

function MyComponent() {
  const { features, plugins } = useVyuh();

  // Access content plugin
  const contentPlugin = plugins.content;

  // Render content
  return (
    <div>
      {contentPlugin.render({
        _type: 'myContentType',
        title: 'Hello World',
        // ...other content properties
      })}
    </div>
  );
}

Example Features

The Vyuh React framework includes modular features that demonstrate different content patterns and use cases. Here's an overview of two key features:

Marketing Feature

The Marketing feature (@vyuh/react-feature-marketing) provides components for building marketing pages:

• Feature Sections: Display product features with different layouts:
  • simple variant: Text-based feature lists with icons
  • with-media variant: Features with accompanying media (images, videos, code examples)
• Banner Sections: Announcement components with customizable content
• Bento Grid Layouts: Flexible grid components for visual content organization
• CTA Sections: Call-to-action components with configurable buttons
• FAQ Sections: Expandable question and answer components
• Header & Footer: Navigation and site information components
• Hero Sections: Page introduction components with various layouts
• Logo Sections: Brand showcase components
• Newsletter Sections: Email signup components
• Pricing Sections: Product/service pricing displays
• Stats Sections: Numerical data visualization components
• Team Sections: Team member profile components
• Testimonials Sections: Customer quote components

Each component is implemented as a content builder that can be rendered through the content plugin system.

Blog Feature

The Blog feature (@vyuh/react-feature-blog) offers components for content publishing:

• Blog Group: Collections of blog posts with customizable layouts
• Blog Post Summary: Preview components for individual blog posts

Reference Implementation Patterns

These features serve as reference implementations that demonstrate scalable patterns for building your own features:

1. Content Type Definition: How to structure and validate content schemas
2. Component Layouts: Implementing multiple layouts for the same content type
3. Content Descriptors: Extending and customizing content descriptors for a type
4. Content Builders: Connecting components to the content system
5. Feature Composition: Organizing related components into cohesive features
6. Plugin Integration: Leveraging core plugins for authentication, routing, etc.
7. Conditional Rendering: Displaying content based on user state or other conditions
8. Content Relationships: Managing references between different content types

The patterns demonstrated in these features can be applied to build more complex features like e-commerce systems, user dashboards, or interactive applications. They provide a foundation that scales from simple content display to sophisticated, data-driven experiences.

By studying these reference implementations, developers can understand how to structure their own features in a way that maintains separation of concerns while enabling business teams to control content through the CMS.

Contact

Follow us, stay up to date or reach out on:

• @vyuh_tech
• LinkedIn
• Discord
• Email

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Pavan Podila 💻 📖 ⚠️

Navneet Nagpal 🐛

This project follows the all-contributors specification. Contributions of any kind welcome!

Want to Contribute? 🤗

We welcome contributions from the community! Please check out our CONTRIBUTING.md for detailed guidelines on how to contribute to the Vyuh Framework.

---

Made with ❤️ by Vyuh