ScrapeStudio

ScrapeStudio Documentation

ScrapeStudio: Turn Inspiration into Production-Ready Code in Seconds!


Scrape buttons, cards, or sections from any website and build your personal component library.

Getting Started

ScrapeStudio is a powerful Chrome extension that allows you to capture UI components from any website and convert them into production-ready code for your projects.

Install the Extension

Install ScrapeStudio from the Chrome Web Store and pin it to your toolbar for easy access.

Activate the Extension

Click the ScrapeStudio icon in your toolbar or use the keyboard shortcut Alt+I to activate the extension.

Capture Components

Hover over any element on a webpage, and it will be highlighted. Click to capture the component.

View and Edit

The captured component will be available in your dashboard where you can view, edit, and organize your collection.

Key Features

Component Extraction

Capture any UI element from websites with a single click

Code Generation

Convert components to React, HTML, or other frameworks automatically

Style Extraction

Extract complete CSS styling with the component

Asset Collection

Automatically collect and organize images used in components

Component Library

Build your personal library of reusable components

Capture Mode

Capture Mode is the core functionality of ScrapeStudio, allowing you to select and extract components from any website.

Element Highlighter

The Element Highlighter helps you identify and select the exact component you want to capture.

Pro Tip

Use the keyboard to navigate between elements:

  • Arrow Up: Select parent element
  • Arrow Down: Select first child element
  • Arrow Left/Right: Navigate between siblings

Highlight Customization

You can customize how elements are highlighted in the Settings panel:

PropTypeDefault
color
string (hex color)
#6A78FC
borderStyle
string (solid, dashed, dotted)
solid
opacity
number
0.1

Code Generation

ScrapeStudio can generate code in multiple formats from your captured components.

function CapturedButton() {
  return (
    <button 
      className="btn-primary" 
      style={{ 
        backgroundColor: '#3b82f6', 
        color: 'white',
        padding: '0.5rem 1rem',
        borderRadius: '0.375rem',
        fontWeight: '500'
      }}
    >
      Click Me
    </button>
  );
}
 
export default CapturedButton;

React components can be generated with:

  • TypeScript support
  • Styled Components integration
  • CSS Modules support
  • Tailwind class extraction

Style Formats

ScrapeStudio supports multiple styling approaches for your extracted components.

Color Picker

The built-in Color Picker allows you to extract colors from any element on a webpage.

Activate the Color Picker

Press Alt+I or click the eyedropper icon in the ScrapeStudio menu.

Select a Color

Hover over any element and click to capture its color.

Use the Color

The color will be copied to your clipboard in hex format, ready to use in your code.

Settings

Customize ScrapeStudio to match your workflow and preferences.

Primary Color
Border Appearance
UI Theme

General Settings

Control the appearance and behavior of ScrapeStudio:

  • Primary Color: Choose from preset colors or set a custom color
  • Border Appearance: Select how borders are displayed when highlighting elements
  • UI Theme: Choose between light and dark themes for the extension UI

Framework Settings

Configure how code is generated:

  • Default Framework: Set your preferred framework (React, Vue, Svelte, or HTML)
  • Component Format: Choose between functional components, class components, or hooks
  • Style Format: Select your preferred styling approach (inline, CSS modules, or styled-components)

Keyboard Shortcuts

ScrapeStudio provides convenient keyboard shortcuts:

PropTypeDefault
Alt+C
shortcut
Alt+C
Alt+I
shortcut
Alt+I
Alt+S
shortcut
Alt+S
Esc
shortcut
Esc

Component Library

All your captured components are saved to your personal library in the ScrapeStudio dashboard.

Pro Feature

The Component Library is a premium feature available to Pro and Team subscribers. Free users can capture up to 5 components per month.

Library Features

  • Organize: Group components into collections
  • Search: Find components by name, tags, or source website
  • Preview: See how components look before using them
  • Edit: Modify component code directly in the dashboard
  • Export: Download components in your preferred format
  • Share: Share components with team members (Team plan)

Dashboard Integration

ScrapeStudio seamlessly integrates with the ScrapeStudio dashboard, providing a complete workflow for component management.

Component Gallery

Browse and manage your captured components

Code Playground

Edit and customize your components in real-time

Export Options

Export components in multiple formats

Account Settings

Manage your subscription and preferences

Troubleshooting

Privacy & Security

ScrapeStudio is designed with your privacy and security in mind:

  • Local Processing: Component extraction happens locally in your browser
  • Minimal Data Transfer: Only captured components are sent to your dashboard
  • No Tracking: We don't track your browsing history or the sites you visit
  • Secure Storage: All your components are stored securely in your account
  • Permission Control: The extension only requests the permissions it needs to function

Support & Feedback

We're constantly improving ScrapeStudio based on user feedback:

  • Help Center: Visit our Help Center for detailed guides and FAQs
  • Feature Requests: Submit feature requests through the dashboard
  • Bug Reports: Report any issues you encounter for quick resolution
  • Community: Join our community forum to share tips and get help from other users

Last updated on

Next

Getting Started