Role-based Example

Purpose

examples/role-based is the smallest role-to-rules mapping example in the repository. It shows the classic "pick a role, load its permissions, and render UI from that snapshot" flow without extra framework layers.

What it demonstrates

• a typed Permix template with post and user entities
• one selected role mapped to one static ruleset
• a React hook for reading permissions in components
• the Check component for declarative UI gating

How the example works

The example defines admin and user role rules up front and selects one of them inside setupPermissions(). That makes it a good baseline for understanding the original single-role pattern before moving to merged multi-role rules.

const rolesMap = {
  admin: adminPermissions,
  user: userPermissions,
}

export function setupPermissions() {
  const role = 'admin'
  const permissions = rolesMap[role]

  return permix.setup(permissions)
}

Run it

cd examples/role-based
pnpm dev

Key files

• src/lib/permix.ts: typed template, role map, and setup function
• src/hooks/use-permissions.ts: React hook wrapper around usePermix
• src/App.tsx: role-based checks rendered in the UI

When to use it

Start here if you want to understand the original role-based ergonomics in the smallest possible surface area. If you need multiple roles to merge, use the newer Next.js demos instead of copying this exact single-role shape.

Source code

Browse the example on GitHub