First Visual Capture
Now that you have the CLI installed, let's capture your first documentation screenshot.
Understanding Captures
A capture is a screenshot of a web page or element, defined by a configuration. Each capture specifies:
- URL: The page to capture
- Selector (optional): A CSS selector to capture a specific element
- Viewport: Browser window dimensions
- Wait conditions: When to trigger the capture
Basic Capture
Create a simple capture configuration in your docsync.config.json:
{
"project": "my-docs",
"version": "1.0.0",
"captures": [
{
"name": "homepage",
"url": "https://your-app.com",
"viewport": {
"width": 1280,
"height": 720
}
}
]
}Run the capture:
poliage capture runYour screenshot is saved to .poliage/captures/homepage.png
Capture Options
Targeting Specific Elements
Capture just a component instead of the full page:
{
"name": "login-form",
"url": "https://your-app.com/login",
"selector": ".login-form",
"padding": 16
}The padding option adds pixels around the selected element.
Wait Conditions
Wait for dynamic content before capturing:
{
"name": "dashboard",
"url": "https://your-app.com/dashboard",
"wait": {
"type": "selector",
"value": ".data-loaded",
"timeout": 5000
}
}Available wait types:
Authentication
For pages requiring login, use the auth option:
{
"name": "admin-panel",
"url": "https://your-app.com/admin",
"auth": {
"type": "cookie",
"cookies": [
{
"name": "session",
"value": "${SESSION_TOKEN}",
"domain": "your-app.com"
}
]
}
}Never commit real tokens to version control. Use environment variables like ${SESSION_TOKEN} which are resolved at runtime.
Interactive Capture Mode
For complex captures, use interactive mode:
poliage capture interactiveThis opens a web interface where you can:
Navigate to Your Page
Enter the URL and interact with the page to reach the desired state.
Select Capture Region
Click and drag to select the area you want to capture, or use the element picker.
Configure Options
Adjust viewport, add annotations, set wait conditions.
Save Configuration
Export the capture configuration to add to your docsync.config.json.
Batch Captures
Capture multiple pages in one run:
{
"captures": [
{ "name": "home", "url": "https://your-app.com" },
{ "name": "features", "url": "https://your-app.com/features" },
{ "name": "pricing", "url": "https://your-app.com/pricing" },
{ "name": "docs", "url": "https://your-app.com/docs" }
]
}# Capture all
poliage capture run
# Capture specific ones
poliage capture run --filter "home,features"Syncing to Poliage
After capturing, sync your assets to the platform:
poliage syncThis uploads all captures and creates a new Visual Commit. View your synced documentation at:
https://your-project.poliage.com