bknd features an integrated Admin UI that can be used to:
fully manage your backend visually when run in db mode
manage your database contents
manage your media contents
In case you're using bknd with a React framework and render the Admin as React component, you can go further and customize the Admin UI to your liking.
With the entities option, you can customize the Admin UI for each entity. You can override the header, footer, add additional actions, and override each field rendering.
export type BkndAdminEntityContext = "list" | "create" | "update";export type BkndAdminEntitiesOptions = { [E in keyof DB]?: BkndAdminEntityOptions<E>;};export type BkndAdminEntityOptions<E extends keyof DB | string> = { /** * Header to be rendered depending on the context */ header?: ( context: BkndAdminEntityContext, entity: Entity, data?: DB[E], ) => ReactNode | void | undefined; /** * Footer to be rendered depending on the context */ footer?: ( context: BkndAdminEntityContext, entity: Entity, data?: DB[E], ) => ReactNode | void | undefined; /** * Actions to be rendered depending on the context */ actions?: ( context: BkndAdminEntityContext, entity: Entity, data?: DB[E], ) => { /** * Primary actions are always visible */ primary?: (ButtonProps | undefined | null | false)[]; /** * Context actions are rendered in a dropdown */ context?: DropdownProps["items"]; }; /** * Field UI overrides */ fields?: { [F in keyof DB[E]]?: BkndAdminEntityFieldOptions<E>; };};export type BkndAdminEntityFieldOptions<E extends keyof DB | string> = { /** * Override the rendering of a certain field */ render?: ( context: BkndAdminEntityContext, entity: Entity, field: Field, ctx: { data?: DB[E]; value?: DB[E][keyof DB[E]]; handleChange: (value: any) => void; }, ) => ReactNode | void | undefined;};