The framework for
content-driven
Flutter
apps.

Go from an MVP Super App with the power of
Modular Features, Plugins & CMS-driven UI.

A new paradigm

Introducing Vyuh

Vyuh is a framework for building content-driven Flutter apps. It provides a powerful approach to rapidly build, scale and maintain your apps.

CMS-driven UI

Use any headless-CMS to remotely control screens, content, user-journeys, themes and much more. Deploy with Zero releases. No more waiting for App Store approvals. ^*Also called Server Driven UI (SDUI)

Modular Features

Build and test features as independent modules and assemble into the App when ready. Escape the trap of a monolithic App and scale quickly from Idea to MVP to Production and beyond.

Capabilities as Plugins

All third-party integrations are Plugins with standard interfaces, and available to all features.
Auth, Analytics, Storage, etc. are all plugins.

Open Source

The core of Vyuh is Open Source.
It leverages community-voted libraries such as go_router, mobx, flutter_mobx, get_it, http and many others.

Core Technologies

Flutter

Powerful Cross-Platform UI framework

Sanity

Headless CMS for Structured Content

React

The UI library for building previews and components inside Sanity Studio.

Dynamic Experience

Let your CMS drive the App Experience

Instantly deploy changes to your user-journeys, content, themes, and more without any App Store releases.

Content-blocks

Break up your App into a set of content-blocks and assemble them into pages. Change layouts and themes on the fly.

Declarative page-flows

Setup the navigation and page flows directly inside your CMS

Actions and Behaviors

Navigate to Pages and Urls. Open dialogs, trigger animations and much more with Actions.

Conditional Control

Use conditions to control the visibility of content, features, and user-journeys.

No-Code for Business, Full-Code for Engineering

The CMS becomes a No-Code tool for business users with Flutter being the Full-Code tool for developers. This provides the perfect balance of simplicity and power with neither team having to compromise.

CMS

IDE

Modularity

Build Modular Features

Build and test features as independent modules and assemble into the App when ready.

Team Independence

Eliminate the co-ordination hassles of the app development process. Build without falling into the trap of a monolithic app.

Atomic & Transferable

Features can be built once and shared across a family of Vyuh-enabled Apps.

Ready for Scale

A modular architecture helps you grow from an MVP to a Super App, without re-writing the whole app.

Gallery of Reusability

Build a gallery of industry specific modules to rapidly develop your apps.

Compose your Apps with a Scalable architecture

A framework that can help you grow from a Single app to a Family of apps or to a Platform for white-labeled apps. Leverage modularity and compose-ability for Enterprise scale.

Plugins

Integrations via Plugins

The shared capabilities of your application become plugins and are available to all features.

Fundamentals Ready

The cross-cutting functionality of any App such as Auth, Analytics, Storage, etc. are all plugins and available to all features.

Standard Interfaces

Easily swap out one plugin for another without changing the feature code. All plugins adhere to a standard interface.

Custom Integrations

Add new third-party integrations at will and expand coverage over time.

Growing Library

We are actively expanding the set of integrations to be more comprehensive.

Explore Plugins

Open Source

Powered by Open Source

Relies on proven Open Source packages with no vendor lock-in.

Open Core

The core building blocks of the framework is open source.

Community Voted packages

Uses battle-tested and mature packages from the Open Source ecosystem.

Developer Tools

Use the built-in Developer Tools feature to get an X-Ray view of your application.

In Action

How it works

Let's build a simple Movie Detail section that can be configured from the CMS and rendered with Flutter.

Scaffold a new Project with the Vyuh CLI

Generate a new project with the default CMS (Sanity.io) and a fresh new Flutter App.

codecli

Define content-schemas for the CMS

Define a new content schema for the Movie Detail Section and expose various properties for configuration.

Add it to your CMS, via a FeatureDescriptor, to use in your pages.

codetypescriptcms

import { MdOutlineMovieFilter as Icon } from 'react-icons/md';
import { defineField, defineType } from 'sanity';

export const movieDetailSection = defineType({
  name: 'tmdb.movie.detailSection',
  title: 'Movie Detail Section',
  type: 'object',
  icon: Icon,
  fields: [
    defineField({
      name: 'representation',
      title: 'Representation',
      type: 'string',
      initialValue: 'short',
      options: {
        list: [
          { value: 'short', title: 'Short List' },
          { value: 'long', title: 'Long List' },
        ],
      },
    }),
    defineField({
      name: 'type',
      title: 'Type',
      type: 'string',
      options: {
        list: [
          { value: 'hero', title: 'Hero' },
          { value: 'cast', title: 'Cast' },
          { value: 'crew', title: 'Crew' },
          { value: 'statistics', title: 'Statistics' },
          { value: 'gallery', title: 'Image Gallery' },
          { value: 'recommendations', title: 'Recommendations' },
          { value: 'reviews', title: 'Reviews' },
          { value: 'footer', title: 'Footer' },
          { value: 'trailer', title: 'Trailer' },
        ],
      },
    }),
  ],
  preview: {
    select: {
      type: 'type',
    },
    prepare({ type }) {
      return {
        title: 'Movie Detail Section',
        subtitle: type,
      };
    },
  },
});

Create Flutter counterparts for the content-schemas

Build the counterpart for the Movie Detail schema in Flutter. This renders the section with a default Layout and adapts based on the configuration.

Just like before we need to expose it with the FeatureDescriptor.

codedartflutterui

part 'movie_detail_section.g.dart';

@JsonSerializable()
final class MovieDetailSection extends ContentItem {
  static const schemaName = 'tmdb.movie.detailSection';

  static final typeDescriptor = TypeDescriptor(
    schemaType: schemaName,
    title: 'Movie Detail Section',
    fromJson: MovieDetailSection.fromJson,
  );

  static final contentBuilder = ContentBuilder(
    content: typeDescriptor,
    defaultLayout: MovieDetailSectionLayout(),
    defaultLayoutDescriptor: MovieDetailSectionLayout.typeDescriptor,
  );

  final MovieDetailSectionType type;
  final ListRepresentation representation;

  MovieDetailSection({
    this.type = MovieDetailSectionType.hero,
    this.representation = ListRepresentation.short,
    super.layout,
  }) : super(schemaType: schemaName);

  factory MovieDetailSection.fromJson(Map<String, dynamic> json) =>
      _$MovieDetailSectionFromJson(json);
}

enum MovieDetailSectionType {
  hero,
  cast,
  crew,
  statistics,
  gallery,
  recommendations,
  reviews,
  footer,
  trailer,
}

@JsonSerializable()
final class MovieDetailSectionLayout
    extends LayoutConfiguration<MovieDetailSection> {
  static const schemaName = '${MovieDetailSection.schemaName}.layout.default';

  static final typeDescriptor = TypeDescriptor(
    schemaType: schemaName,
    title: 'Movie Detail Section Layout',
    fromJson: MovieDetailSectionLayout.fromJson,
  );

  MovieDetailSectionLayout() : super(schemaType: schemaName);

  factory MovieDetailSectionLayout.fromJson(Map<String, dynamic> json) =>
      _$MovieDetailSectionLayoutFromJson(json);

  @override
  Widget build(BuildContext context, MovieDetailSection content) {
    switch (content.type) {
      case MovieDetailSectionType.hero:
        return const HeroSection(mode: BrowseMode.movies);
      case MovieDetailSectionType.statistics:
        return const StatisticsSection(mode: BrowseMode.movies);
      case MovieDetailSectionType.cast:
        return PeopleSectionView(
          mode: BrowseMode.movies,
          representation: content.representation,
          isCast: true,
        );
      case MovieDetailSectionType.crew:
        return PeopleSectionView.crew(
          mode: BrowseMode.movies,
          representation: content.representation,
          isCast: false,
        );
      case MovieDetailSectionType.gallery:
        return const GallerySection(mode: BrowseMode.movies);
      case MovieDetailSectionType.recommendations:
        final store = vyuh.di.get<TMDBStore>();
        final movieId = GoRouterState.of(context).movieId();

        if (movieId == null) {
          return empty;
        }

        return FeaturedPreviewListSection(
          mode: BrowseMode.movies,
          movieType: MovieDetailSectionType.recommendations,
          mediaCardType: MediaCardType.recommendation,
          representation: content.representation,
          cacheKey: (id) => '$id.movie.recommendations',
          futureBuilder: () {
            store.selectMovie(movieId);
            return store.getFuture('$movieId.movie.recommendations');
          },
        );
      case MovieDetailSectionType.reviews:
        return ReviewSection(
          mode: BrowseMode.movies,
          representation: content.representation,
        );
      case MovieDetailSectionType.footer:
        return const FooterSection(mode: BrowseMode.movies);
      case MovieDetailSectionType.trailer:
        return const TrailersSection(mode: BrowseMode.movies);
    }
  }
}

Assemble pages and journeys on the CMS

Now place some of these Movie Detail Sections on a page and order them the way you see fit.

no-codecmssanity

Preview on the Simulator or Device

Set up your Vyuh app with the movie feature and other necessary plugins. See your CMS content live on your simulator or device.

Reorder sections on the CMS and see them update on the App. Now iterate, refine and publish when ready.

no-codecmsflutterui

Explore integrations to fast track

Subscribe to the Enterprise Planand get access to our growing set of integrations for fast tracking App development.

vyuhfeaturesplugins

Connect with the community

GitHub

Post issues, file bugs or send in a PR.

Twitter

Discord

Join our Discord server to learn and share.

FAQs

Frequently Asked Questions

Several ways to start building with the Vyuh Framework.

What kind of apps can I build with Vyuh?

Vyuh is a framework for building Flutter Apps. Any App that can be built with Flutter can be built with Vyuh as well. This includes apps for iOS, Android, Web and Desktop. Rather than starting from scratch with Flutter, you start with a solid foundation and build on top of it. The basics of any production-grade App are built-in, and you can focus on your business logic right away.
The framework was built to scale your apps over time. In that regard, it takes an approach where you break down your application into a set of features that can be added or removed like atomic blocks.

What kind of support can I get for my team?

We can help setup your App and get you running quickly. Thinking of your App in terms of its building-blocks can be a mindset shift. We will help you get up to speed on this. You will soon see how it completely unlocks a new type of freedom in building Flutter Apps.

Is it open source?

Yes. The core of the Vyuh framework is open source and is available today.
If you are interested to get a demo or understand more, please Contact Us.

Do I really need a CMS?

You could also build Vyuh-based apps without a CMS. If your app does not need dynamic content, feel free to skip the CMS. You still have the power of rest of the framework such as:

Modular Features
Integrations via Plugins
Team Independence
And many more...

What if I have an existing App? Do you help in migrating it?

Yes, we can help you migrate an existing app. The effort require to migrate will depend on the business complexity and the type of experience you are aiming for. There could be many things involved in the migration and requires a deeper understanding of the business context.
Contact Us for a focused discussion.

The Vyuh Framework

Build Modular, CMS-driven Flutter Apps. At Scale.

Get Started