{"id":27380173,"url":"https://github.com/vyuh-tech/vyuh-react","last_synced_at":"2026-03-02T08:01:52.130Z","repository":{"id":285575780,"uuid":"949053150","full_name":"vyuh-tech/vyuh-react","owner":"vyuh-tech","description":"Build Modular, Scalable, CMS-driven React Apps","archived":false,"fork":false,"pushed_at":"2025-05-20T14:23:12.000Z","size":4434,"stargazers_count":2,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-20T15:39:08.829Z","etag":null,"topics":["apps","cms","framework","react","vyuh"],"latest_commit_sha":null,"homepage":"https://vyuh.tech","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vyuh-tech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-03-15T15:12:29.000Z","updated_at":"2025-05-20T14:25:28.000Z","dependencies_parsed_at":"2025-04-01T14:41:23.861Z","dependency_job_id":"afaa7d12-ae2c-48e1-82ed-e3b8b6f6a6e5","html_url":"https://github.com/vyuh-tech/vyuh-react","commit_stats":null,"previous_names":["vyuh-tech/vyuh-react"],"tags_count":239,"template":false,"template_full_name":null,"purl":"pkg:github/vyuh-tech/vyuh-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vyuh-tech%2Fvyuh-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vyuh-tech%2Fvyuh-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vyuh-tech%2Fvyuh-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vyuh-tech%2Fvyuh-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vyuh-tech","download_url":"https://codeload.github.com/vyuh-tech/vyuh-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vyuh-tech%2Fvyuh-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29995910,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-02T01:47:34.672Z","status":"online","status_checked_at":"2026-03-02T02:00:07.342Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apps","cms","framework","react","vyuh"],"created_at":"2025-04-13T14:19:26.208Z","updated_at":"2026-03-02T08:01:52.104Z","avatar_url":"https://github.com/vyuh-tech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://vyuh.tech\"\u003e\n    \u003cimg src=\"https://github.com/vyuh-tech.png\" alt=\"Vyuh Logo\" height=\"128\" /\u003e\n  \u003c/a\u003e\n  \u003ch1 align=\"center\"\u003eVyuh for React\u003c/h1\u003e\n  \u003cp align=\"center\"\u003eBuild Modular, Scalable, CMS-driven React Applications\u003c/p\u003e\n  \u003ch4 align=\"center\"\u003e\n    \u003ca href=\"https://docs.vyuh.tech/react\"\u003eDocs\u003c/a\u003e |\n    \u003ca href=\"https://vyuh.tech\"\u003eWebsite\u003c/a\u003e\n  \u003c/h4\u003e\n\u003c/p\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=for-the-badge)](#contributors-)\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n[![Discord](https://img.shields.io/discord/1198906057502769252?style=for-the-badge\u0026logo=discord)](https://discord.gg/b49sbjqszG)\n\n## Core Packages\n\n| Package                                                                                                                                                                                                                                                                                                   | Description                          |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |\n| [![@vyuh/react-core](https://img.shields.io/npm/v/%40vyuh%2Freact-core.svg?logo=npm\u0026label=%40vyuh%2Freact-core\u0026style=for-the-badge\u0026color=cb3837)](https://www.npmjs.com/package/@vyuh/react-core)                                                                                                         | Core platform and architecture       |\n| [![@vyuh/react-extension-content](https://img.shields.io/npm/v/%40vyuh%2Freact-extension-content.svg?logo=npm\u0026label=%40vyuh%2Freact-extension-content\u0026style=for-the-badge\u0026color=cb3837)](https://www.npmjs.com/package/@vyuh/react-extension-content)                                                     | Content management system            |\n| [![@vyuh/react-feature-system](https://img.shields.io/npm/v/%40vyuh%2Freact-feature-system.svg?logo=npm\u0026label=%40vyuh%2Freact-feature-system\u0026style=for-the-badge\u0026color=cb3837)](https://www.npmjs.com/package/@vyuh/react-feature-system)                                                                 | System-level features and components |\n| [![@vyuh/react-plugin-content-provider-sanity](https://img.shields.io/npm/v/%40vyuh%2Freact-plugin-content-provider-sanity.svg?logo=npm\u0026label=%40vyuh%2Freact-plugin-content-provider-sanity\u0026style=for-the-badge\u0026color=cb3837)](https://www.npmjs.com/package/@vyuh/react-plugin-content-provider-sanity) | Sanity.io content provider           |\n\n## Feature Packages\n\n| Package                                                                                                                                                                                                                                                                                                   | Description                          |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |\n| [![@vyuh/react-feature-marketing](https://img.shields.io/npm/v/%40vyuh%2Freact-feature-marketing.svg?logo=npm\u0026label=%40vyuh%2Freact-feature-marketing\u0026style=for-the-badge\u0026color=cb3837)](https://www.npmjs.com/package/@vyuh/react-feature-marketing)                                                     | Marketing components and layouts     |\n| [![@vyuh/react-feature-blog](https://img.shields.io/npm/v/%40vyuh%2Freact-feature-blog.svg?logo=npm\u0026label=%40vyuh%2Freact-feature-blog\u0026style=for-the-badge\u0026color=cb3837)](https://www.npmjs.com/package/@vyuh/react-feature-blog)                                                                         | Blog components and content types    |\n| [![@vyuh/react-feature-auth](https://img.shields.io/npm/v/%40vyuh%2Freact-feature-auth.svg?logo=npm\u0026label=%40vyuh%2Freact-feature-auth\u0026style=for-the-badge\u0026color=cb3837)](https://www.npmjs.com/package/@vyuh/react-feature-auth)                                                                         | Authentication components and flows  |\n\n## Hi there! 👋\n\n**Vyuh for React** brings the powerful architecture of the Vyuh Flutter\nframework to the React ecosystem. It provides a comprehensive solution for\nbuilding CMS-driven React applications with a focus on modularity, scalability,\nand developer experience.\n\nBuilding on the success of Vyuh for Flutter, this React implementation gives\n**no-code** flexibility to Business teams (via the CMS), and the **full-code**\npower to Engineering teams. This puts the right control at the right place\nwithout any compromise.\n\n## 🤔 Why did we build this?\n\nA common problem when building large scale applications is the _need to stay\nmodular_ as you keep growing the feature set. You also want different teams to\n_work in parallel_ without stepping on each other. The typical approach of\ncreating a single project and building all the functionality in it does not\nscale very well over time.\n\nAdditionally, modern web applications are very content-oriented and need to be\ndynamic. This means your journeys, page content, themes, etc. should be remotely\ncontrollable. In other words, making your app _Server-driven_.\n\n### Separation of Concerns\n\nCombining all these capabilities requires a holistic approach, which is only\npossible when you build a cohesive framework.\n\n\u003e **Vyuh** is that framework.\n\u003e\n\u003e It allows you to create the perfect balance of simple, modular components on\n\u003e the `CMS`, with powerful `React` counterparts that take care of all the\n\u003e complexity.\n\nThe teams (Business teams) managing the content and experience don't have to\nworry about UI Design, pixel precision or performance and focus more on\n_building the screen journeys and page content_ instead. The React engineering\nteams handle the complexity of the components along with its performance.\n\nThis clear separation allows a phenomenal flexibility in building simple to\nlarge scale apps. It also gives _the right tools to the right teams_ and makes\nthem more productive.\n\n## The Framework\n\nThe **Vyuh for React** framework has some powerful built-in capabilities such\nas:\n\n- [x] Building features atomically and in a modular fashion\n- [x] Features as transferable and reusable units of functionality\n- [x] Remote configuration of content, enabling Server-Driven UI\n- [x] Extensible Plugin-based approach to add new third-party integrations\n- [x] Team Independence\n- [x] Decentralised development\n- [x] Creating a family of apps with reusable features\n- [x] A growing set of integrations to make app development faster\n\n## 🔩 The Building Blocks\n\nThe core building blocks that enable all of this include:\n\n- **Features**: Build user-facing functionality in a modular, reusable, atomic\n  manner. Features can be composed together to create the entire app or a family\n  of apps.\n\n- **Plugins**: All third party integrations are handled in a cross-cutting\n  manner using Plugins. Authentication, Networking, CMS, Storage, Permissions,\n  etc. are all plugins that are available to all features.\n\n- **CMS-Driven UI**: Also known as Server-Driven UI, the entire app experience\n  can be driven from a CMS. This includes the screen journeys, page content,\n  themes, etc. The CMS itself is a standard plugin with custom Providers.\n\n\u003e [!NOTE]\n\u003e\n\u003e The default CMS we use is [Sanity.io](https://sanity.io).\n\n## Getting Started 🚀\n\n### Basic Setup\n\n```tsx\nimport { VyuhProvider, PluginDescriptor } from '@vyuh/react-core';\nimport { DefaultContentPlugin } from '@vyuh/react-extension-content';\nimport { SanityContentProvider } from '@vyuh/react-plugin-content-provider-sanity';\nimport { feature as systemFeature } from '@vyuh/react-feature-system';\n\n// Configure your content provider\nconst contentProvider = new SanityContentProvider({\n  projectId: 'your-project-id',\n  dataset: 'production',\n  perspective: 'published',\n  useCdn: true,\n});\n\n// Configure plugins\nconst plugins = new PluginDescriptor({\n  content: new DefaultContentPlugin(contentProvider),\n});\n\n// Define your features\nconst getFeatures = () =\u003e [\n  systemFeature,\n  // Your custom features\n];\n\n// Set up your application\nfunction App() {\n  return (\n    \u003cVyuhProvider features={getFeatures} plugins={plugins}\u003e\n      \u003cYourApp /\u003e\n    \u003c/VyuhProvider\u003e\n  );\n}\n```\n\n### Using the Vyuh Hook\n\n```tsx\nimport { useVyuh } from '@vyuh/react-core';\n\nfunction MyComponent() {\n  const { features, plugins } = useVyuh();\n\n  // Access content plugin\n  const contentPlugin = plugins.content;\n\n  // Render content\n  return (\n    \u003cdiv\u003e\n      {contentPlugin.render({\n        _type: 'myContentType',\n        title: 'Hello World',\n        // ...other content properties\n      })}\n    \u003c/div\u003e\n  );\n}\n```\n\n## Example Features\n\nThe Vyuh React framework includes modular features that demonstrate different\ncontent patterns and use cases. Here's an overview of two key features:\n\n### [Marketing Feature](./packages/react-feature-marketing)\n\n![](./_images/marketing-feature.png)\n\nThe Marketing feature (`@vyuh/react-feature-marketing`) provides components for\nbuilding marketing pages:\n\n- **Feature Sections**: Display product features with different layouts:\n  - `simple` variant: Text-based feature lists with icons\n  - `with-media` variant: Features with accompanying media (images, videos, code\n    examples)\n- **Banner Sections**: Announcement components with customizable content\n- **Bento Grid Layouts**: Flexible grid components for visual content\n  organization\n- **CTA Sections**: Call-to-action components with configurable buttons\n- **FAQ Sections**: Expandable question and answer components\n- **Header \u0026 Footer**: Navigation and site information components\n- **Hero Sections**: Page introduction components with various layouts\n- **Logo Sections**: Brand showcase components\n- **Newsletter Sections**: Email signup components\n- **Pricing Sections**: Product/service pricing displays\n- **Stats Sections**: Numerical data visualization components\n- **Team Sections**: Team member profile components\n- **Testimonials Sections**: Customer quote components\n\nEach component is implemented as a content builder that can be rendered through\nthe content plugin system.\n\n### [Blog Feature](./packages/react-feature-blog)\n\nThe Blog feature (`@vyuh/react-feature-blog`) offers components for content\npublishing:\n\n![](./_images/blog-feature.png)\n\n- **Blog Group**: Collections of blog posts with customizable layouts\n- **Blog Post Summary**: Preview components for individual blog posts\n\n### Reference Implementation Patterns\n\nThese features serve as reference implementations that demonstrate scalable\npatterns for building your own features:\n\n1. **Content Type Definition**: How to structure and validate content schemas\n2. **Component Layouts**: Implementing multiple layouts for the same content\n   type\n3. **Content Descriptors**: Extending and customizing content descriptors for a\n   type\n4. **Content Builders**: Connecting components to the content system\n5. **Feature Composition**: Organizing related components into cohesive features\n6. **Plugin Integration**: Leveraging core plugins for authentication, routing,\n   etc.\n7. **Conditional Rendering**: Displaying content based on user state or other\n   conditions\n8. **Content Relationships**: Managing references between different content\n   types\n\nThe patterns demonstrated in these features can be applied to build more complex\nfeatures like e-commerce systems, user dashboards, or interactive applications.\nThey provide a foundation that scales from simple content display to\nsophisticated, data-driven experiences.\n\nBy studying these reference implementations, developers can understand how to\nstructure their own features in a way that maintains separation of concerns\nwhile enabling business teams to control content through the CMS.\n\n## Contact\n\nFollow us, stay up to date or reach out on:\n\n- [@vyuh_tech](https://x.com/vyuh_tech)\n- [LinkedIn](https://www.linkedin.com/company/vyuh-tech)\n- [Discord](https://discord.gg/b49sbjqszG)\n- [Email](mailto:ask@vyuh.tech)\n\n## Contributors ✨\n\nThanks goes to these wonderful people\n([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://vyuh.tech/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/156846?v=4?s=100\" width=\"100px;\" alt=\"Pavan Podila\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePavan Podila\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vyuh-tech/vyuh-react/commits?author=pavanpodila\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/vyuh-tech/vyuh-react/commits?author=pavanpodila\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/vyuh-tech/vyuh-react/commits?author=pavanpodila\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://navneetnagpal.wordpress.com/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/5485403?v=4?s=100\" width=\"100px;\" alt=\"Navneet Nagpal\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eNavneet Nagpal\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vyuh-tech/vyuh-react/issues?q=author%3Anavneetnagpal\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the\n[all-contributors](https://github.com/all-contributors/all-contributors)\nspecification. Contributions of any kind welcome!\n\n## Want to Contribute? 🤗\n\nWe welcome contributions from the community! Please check out our\n[CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines on how to contribute\nto the Vyuh Framework.\n\n---\n\n\u003cp align=\"center\"\u003eMade with ❤️ by \u003ca href=\"https://vyuh.tech\"\u003eVyuh\u003c/a\u003e\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvyuh-tech%2Fvyuh-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvyuh-tech%2Fvyuh-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvyuh-tech%2Fvyuh-react/lists"}