# HyperReactXML Live Demo Guide

The repository includes a complete user-management demo:

- `src/examples/user-management.xml.ts`
- `src/examples/user-management.example.tsx`
- `src/examples/user.service.ts`

## Connect Demo In A React App

```tsx
import { createRoot } from 'react-dom/client';
import { UserManagementExample } from './src/examples/user-management.example';

createRoot(document.getElementById('root')!).render(<UserManagementExample />);
```

## What The Demo Shows

- XML driven page layout
- Search form controls
- Data source loading
- Table filters
- Table sorting
- Pagination
- Row actions
- Bulk export action
- Modal edit form
- Custom status badge renderer
- Permissions
- Toast callbacks
- Theme customization

## Demo Data Flow

1. XML declares the UI.
2. `HyperReactXMLRenderer` parses XML and renders React components.
3. `dataSources.users` receives `{ values, filters, page, pageSize, sort }`.
4. `actions` receive the current form values, selected rows, row data, and helpers.
5. UI updates through controlled form state and data reloads.

## Local Development

Run checks:

```bash
npm run typecheck
npm run build
```

If you create a local Vite app, import `UserManagementExample` and render it as shown above.