Visual element selector for extracting HTML and screenshots from websites
npm install cluso-inspectorVisual element selector for extracting HTML and screenshots from any website.
``bashUse directly with npx (no installation required)
npx cluso-inspector https://github.com
Usage
bash
cluso-inspector [language]
`$3
- url (required) - The URL to open and extract from
- language (optional) - Target language:
or javascript (default: typescript)$3
`bash
Extract from GitHub
npx cluso-inspector https://github.comSpecify JavaScript output
npx cluso-inspector https://github.com javascriptExtract from any site
npx cluso-inspector https://example.com typescript
`How It Works
1. Launch: Opens the URL in an Electron browser window
2. Select: Hover over elements (blue outline), click to select (purple outline)
3. Extract: Click "Select" button to capture HTML + screenshot
4. Output: Returns JSON to stdout with all extracted data
Output Format
The tool outputs JSON to stdout:
json
{
"success": true,
"url": "https://github.com",
"timestamp": "2026-01-11T10:00:00.000Z",
"language": "typescript",
"extractions": [
{
"selector": "div.hero > div.container",
"isReact": false,
"component": { ... },
"html": "...",
"screenshot": "data:image/png;base64,...",
"dimensions": {
"width": 1200,
"height": 600,
"top": 100,
"left": 120
},
"meta": {
"tagName": "div",
"id": "hero-section",
"classes": ["hero", "container"]
}
}
]
}
`Use Cases
- Component extraction: Extract React/HTML components from live sites
- Design replication: Capture visual elements with pixel-perfect screenshots
- Automated testing: Extract DOM structure for test validation
- Documentation: Capture UI elements with code + screenshot
Piping to Files
bash
Save JSON to file
npx cluso-inspector https://github.com > extraction.jsonExtract screenshot separately
npx cluso-inspector https://github.com | jq -r '.extractions[0].screenshot' > screenshot.png
`Integration
Use with other tools via stdout:
javascript
const { execSync } = require('child_process');
const data = JSON.parse(
execSync('npx cluso-inspector https://github.com').toString()
);
console.log(data.extractions[0].selector);
``- Click: Select element
- ESC: Cancel and close
- Clear: Clear current selection
- Node.js 14+
- Electron 28+ (auto-installed)
MIT