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.