Dashboard Integration

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

Dashboard Overview

The ScrapeStudio dashboard is a web-based interface that complements the browser extension:

Extension-Dashboard Communication

The extension and dashboard communicate in real-time:

• Component Syncing: Components captured with the extension are automatically synced to your dashboard
• Settings Sync: Settings are synchronized between the extension and dashboard
• Authentication: Single sign-on between the extension and dashboard
• Notifications: Get notifications in the extension about dashboard events

Dashboard Features

Component Gallery

The Component Gallery is the central hub for managing your components:

• Visual Browser: Browse components visually
• Filtering: Filter by framework, tags, date, and more
• Sorting: Sort by name, date, popularity, and other criteria
• Bulk Actions: Perform actions on multiple components at once

Code Playground

The Code Playground allows you to edit and customize components:

• Live Preview: See changes in real-time
• Code Editor: Full-featured code editor with syntax highlighting
• Multiple Views: Edit HTML, CSS, and JavaScript in separate tabs
• Responsive Testing: Test components at different screen sizes

Component Editor

The Component Editor provides advanced editing capabilities:

• Visual Editor: Drag-and-drop interface for visual editing
• Property Panel: Edit component properties
• Style Editor: Visual style editing with CSS preview
• Structure View: See and edit the component's structure

Export Options

Export your components in various formats:

• Code Export: Export as code for different frameworks
• Package Export: Create packages for npm or other package managers
• Design Export: Export to design tools like Figma or Sketch
• Batch Export: Export multiple components at once

Dashboard Sections

Home

The Home section provides an overview of your ScrapeStudio activity:

• Recent Components: Recently captured or edited components
• Activity Feed: Recent actions and changes
• Quick Actions: Common tasks and shortcuts
• Usage Statistics: Component count and storage usage

Library

The Library section is where you manage your components:

• All Components: View all your captured components
• Collections: Organize components into collections
• Favorites: Quick access to favorite components
• Trash: Recover or permanently delete components

Teams

The Teams section allows you to collaborate with others:

• Team Management: Add and manage team members
• Shared Components: Components shared with your team
• Permissions: Control who can view, edit, or export components
• Activity Logs: Track team activity

Settings

The Settings section allows you to configure your account:

• Account Settings: Manage your profile and account details
• Subscription: View and manage your subscription plan
• Preferences: Set dashboard preferences
• API Keys: Generate and manage API keys for integrations

API Integration

ScrapeStudio provides an API for integrating with your own tools and workflows:

// Example API usage
const api = new ScrapeStudioAPI('your-api-key');
 
// Get all components
const components = await api.getComponents();
 
// Export a component as React code
const reactCode = await api.exportComponent(componentId, {
  framework: 'react',
  typescript: true,
  styleFormat: 'styled-components'
});