Quick Start
Get up and running with UiPool in under 5 minutes.
1. Add Annotations to Your Code #
Add pattern annotations to files where UI patterns are implemented:
src/pages/LoginPage.tsx
// uipool-pattern: login-flow
export function LoginPage() {
return (
<div className="login-container">
{/* uipool-component: form-input */}
<Input type="email" placeholder="Email" />
{/* uipool-component: button-primary */}
<Button variant="primary">Sign In</Button>
</div>
);
}The annotation format is simple: // uipool-pattern: pattern-id
Pattern IDs should be kebab-case and match the patterns defined in your UiPool workspace.
2. Run the Scanner #
Scan your project to generate a usage report:
uipool scanThis creates a uipool-report.json file in your project root.
3. Upload to UiPool #
Go to the Reports page and either:
- Paste the JSON content directly
- Upload the
uipool-report.jsonfile
4. View Your Report #
Once uploaded, you'll see:
- Pattern coverage – Which patterns are used and how often
- File locations – Where each pattern appears in your codebase
- Deprecation warnings – Patterns marked as deprecated that are still in use
- Component mappings – Components linked to each pattern
Example Output #
Here's what a typical scan report looks like:
uipool-report.json
{
"generatedAt": "2025-12-30T10:00:00.000Z",
"projectName": "my-app",
"entries": [
{
"patternId": "login-flow",
"count": 3,
"files": [
"src/pages/LoginPage.tsx",
"src/pages/SignupPage.tsx"
]
}
],
"components": [
{
"componentId": "button-primary",
"count": 12,
"files": ["src/components/Button.tsx"]
}
]
}