VVibeFlui

Backend vs Frontend Responsibility

VibeFlui renders UI from schema. It does not replace backend application logic.

Frontend schema responsibility

The schema may describe:

  • Which fields appear.
  • Which columns appear.
  • Which actions are visible.
  • Which endpoint or handler key an action references.
  • Which validation key to use for client-side UX.
  • Which option loader key to use.
  • Which permission key to ask for.
  • Which feedback mode to display.
  • Which class names and renderers to apply.

Backend responsibility

The backend must own:

  • Authentication.
  • Authorization.
  • Business logic.
  • Database reads and writes.
  • Final validation.
  • Workflow transitions.
  • Audit logs.
  • Rate limits.
  • Security-sensitive decisions.

Example boundary

Schema can describe a delete action:

schemas/users/users.schema.ts

TS
export const usersSchema = {
  version: "1.0.0",
  resource: "users",
  actions: {
    delete: {
      enabled: true,
      label: "Delete",
      icon: "lucide:trash-2",
      variant: "danger",
      handler: "users.delete",
      permission: "users.canDelete",
      confirm: {
        title: "Delete user?",
        description: "This action cannot be undone.",
        confirmLabel: "Delete"
      }
    }
  }
} as const;

The backend must still decide whether deletion is allowed:

JSON
{
  "status": false,
  "code": 403,
  "message": "You do not have permission to delete this user"
}

Do not put secrets in schemas

Do not store these values in schema files:

  • Access tokens.
  • API secrets.
  • Database credentials.
  • Private workflow rules.
  • SQL queries.
  • Internal service URLs that should not be public.

Validation boundary

Client validation improves the user experience.

schemas/users/user-fields.ts

TS
export const emailField = {
  name: "email",
  label: "Email",
  type: "email",
  required: true,
  validator: "users.email"
} as const;

The backend must still validate the submitted email before writing data.

Demo safety

Use static examples and mock responses for demos. Examples should not create real backend services, API gateways, database connections, queues, workers, or runtime infrastructure.