UI State Matrix Generator
Build a component-by-state coverage matrix for loading, empty, error, success, offline, and permission states. Export a UI checklist without AI.
State specification
UI state coverage requirements
Data table
- Loading: Preserve context, communicate progress, and prevent duplicate actions.
- Empty: Explain why there is nothing here and offer a useful next action.
- Error: Explain the failed action, preserve safe input, and offer a recovery path.
- No permission: Explain missing access and offer a safe destination. Enforce authorization on the server.
Form
- Loading: Preserve context, communicate progress, and prevent duplicate actions.
- Error: Explain the failed action, preserve safe input, and offer a recovery path.
- Success: Confirm the completed action and make the resulting state clear.
- Offline: Explain the connection issue, preserve safe local input, and provide a retry path.
These are required states, not verified implementations. Use existing components and validate the final behavior with real data and keyboard navigation.
Export text stays in English; your input is kept as entered.
No signup. No AI credits. This tool assembles your output in your browser.
From an idea to something useful.
- 01
Select the components in your screen.
- 02
Toggle the states that apply to each component.
- 03
Copy the state-by-state implementation checklist.
A little context.
Different components need different recovery paths. A form needs validation feedback; a data table needs loading, no results, and retry states. Curated defaults provide a starting point, and you can change every cell. Selected states mean required coverage, not completed implementation.
Good questions.
Are selected states already implemented?
No. Checked states are requirements to design and test. This tool does not inspect your application.
Can I remove irrelevant states?
Yes. Toggle any matrix cell. Your export includes only the selected states for selected components.