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:

  1. Click the ScrapeStudio button in the bottom-right corner of your browser
  2. Use the keyboard shortcut Alt+C (customizable in Settings)
  3. 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:

PropTypeDefault
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:

  1. Save to Library: Add the component to your personal library
  2. Copy Code: Copy the generated code to your clipboard
  3. Download: Download the component as a file
  4. Edit: Open the component in the Code Playground for immediate editing

Last updated on