ScrapeStudioCapture Mode
Capture Mode
Capture Mode is the core functionality of ScrapeStudio, allowing you to select and extract components from any website.
Activating Capture Mode
There are three ways to activate Capture Mode:
- Click the ScrapeStudio button in the bottom-right corner of your browser
- Use the keyboard shortcut
Alt+C
(customizable in Settings) - Right-click on an element and select "Capture with ScrapeStudio" from the context menu
Pro Tip
You can customize the keyboard shortcuts in the Settings panel to match your workflow preferences.
Using Capture Mode
Capture Options
When you've selected an element, you'll see a capture options panel with the following settings:
Prop | Type | Default |
---|---|---|
Framework | dropdown | - |
Style Format | dropdown | - |
Include Children | toggle | true |
Extract Images | toggle | true |
Capture Preview
Before finalizing the capture, you'll see a preview of the component:
- Visual Preview: See how the component looks
- Code Preview: Preview the generated code
- Structure View: See the component's DOM structure
- Style Preview: Review the extracted styles
You can make adjustments to the selection or options before finalizing the capture.
Saving Components
After capturing a component, you have several options:
- Save to Library: Add the component to your personal library
- Copy Code: Copy the generated code to your clipboard
- Download: Download the component as a file
- Edit: Open the component in the Code Playground for immediate editing
Last updated on