VVibeFlui

Introduction

VibeFlui is a schema-driven React UI runtime for building forms, tables, actions, feedback, layout surfaces, and dashboard-style screens. Instead of hard-coding every form field and table column in TSX, you describe the screen in a schema and let VibeFlui render the matching UI.

VibeFlui is designed to be AI-friendly. It helps AI assistants work with smaller, clearer files: schemas describe UI intent, registries connect runtime behavior, and React pages handle wiring. This makes collaboration between developers, VibeFlui, and AI tools more predictable than asking an AI to rewrite large TSX screens.

Because most UI changes can be expressed as compact schema changes, VibeFlui can also help reduce token usage during AI-assisted development. Instead of sending a full component tree for every change, you can ask the AI to update focused schema, registry, or helper files.

Conceptual framework

TXT
schema + data + registry -> rendered UI

The schema is declarative. It should stay portable and JSON-friendly.

The registry is runtime code. It holds functions, React components, validators, transformers, option loaders, permissions, messages, hooks, events, and computed values.

The React page wires everything together with FluiKit and optionally FluiKitProvider.

When to use VibeFlui

Use VibeFlui when a page is mostly:

  • table-driven CRUD
  • admin or back-office UI
  • form-heavy workflow
  • resource detail and edit screens
  • repeated internal tools
  • schema-generated screens from AI or configuration
  • teams that want AI assistants to generate smaller, reviewable UI changes

What VibeFlui does not replace

VibeFlui does not replace backend validation, authorization, persistence, auditing, routing, database design, or business workflow rules. It renders UI and executes configured client-side/runtime flows; the backend still owns final security and data integrity.

First concept

A minimal resource schema needs a resource and whatever UI area you want to render:

schemas/users/users.schema.ts

TS
export const usersSchema = {
  version: "1.0.0",
  resource: "users",
  table: {
    columns: ["name", "email", "status"]
  },
  actions: false
} as const;

actions: false keeps this first table read-only. If you omit it, VibeFlui enables the default create, edit, delete, and detail actions.

Render it with data:

app/users/page.tsx

TSX
<FluiKit schema={usersSchema} data={users} />