SnipCSS Actor - Extract Associated HTML/CSS from Any Website Section

What does the SnipCSS Actor do?

SnipCSS Actor is a powerful web automation tool that can extract the associated HTML, CSS, images, fonts, and screenshots from any web element.

Built on the trusted SnipCSS browser extension (20k+ Active Users) and Playwright automation, it enables developers and designers to recreate designs with pixel-perfect accuracy.

The automation automatically runs the Pro Version of the extension, providing all premium features for an extraction including responsive styles and tailwind conversion.

The actor runs on the Apify platform and allows you to:

• Extract HTML/CSS Sections from a url, either by specificying specific selectors or letting SnipCSS segment the page
• Capture multi-device screenshots - Desktop, Mobile, and iPad views
• Get all assets - Images, custom fonts, font URLs, and CSS custom properties
• Automatic Page Segmention SnipCSS can break a page up into logical sections by itself, and then extract all those sections
• Generate preview links - Shareable URLs to view extracted components
• No coding required - Simply copy and paste results into your favorite AI coding agent and it can integrate the extracted design

Whether you're a web developer needing designs, a vibe coder looking to copy the look of a site, or an AI researching needing clean data of HTML/CSS, the SnipCSS Actor is the best way to copy web component designs.

What can you extract with SnipCSS?

Feature	Description
HTML Structure	Clean, semantically correct HTML with proper nesting
Complete CSS	All styles including media queries, animations, and custom properties
Multi-Device Screenshots	Desktop, mobile, and tablet views automatically captured
Images	Both inline and CSS background images with URLs
Custom Fonts	Font-face declarations and font file URLs
CSS Custom Properties	CSS variables and their values
Tailwind CSS	Optional Tailwind-compatible output
Media Queries	Responsive breakpoints and styles
CSS Animations	Keyframes and animation definitions

How much will it cost to run SnipCSS Actor?

SnipCSS Actor on the Apify platform charges $0.03 per segment extracted. With the Free plan's $5 monthly credit, you can extract approximately 150+ page segments at no cost.

For regular usage, consider an Apify subscription:

• Starter Plan ($49/month) - Extract 1,600+ segments monthly
• Scale as needed - Pay only for what you extract

The actor uses efficient browser automation to minimize compute costs while delivering complete extractions.

How to use SnipCSS Actor?

Using SnipCSS Actor is straightforward and requires no coding skills:

1. Create a free Apify account using your email
2. Open the SnipCSS Actor
3. Choose your extraction approach:
   • Auto-Segment Page - Leave selectors empty to automatically segment and extract all page sections
   • Specific Selectors - Provide one or more CSS selectors to extract specific elements
4. Enter the target URL and selectors (if targeting specific elements)
5. Click "Start" and wait for extraction to complete
6. Download your data in JSON format with all HTML, CSS, and screenshots

Two Extraction Approaches

Approach 1: Auto-Segment Entire Page

Automatically analyzes the page structure and extracts all logical sections independently. Perfect when you want to capture the entire page design broken into meaningful components.

Example Input:

{
  "url": "https://example.com",
  "save_preview": true,
  "maxSegments": 10
}

Approach 2: Extract Specific Selectors

Perfect for extracting specific components like a navigation bar, hero section, or pricing table. You can provide one or multiple CSS selectors.

Example Input (Single Selector):

{
  "url": "https://example.com",
  "selectors": [".pricing-section"],
  "save_preview": true
}

Example Input (Multiple Selectors):

{
  "url": "https://example.com",
  "selectors": [".header", ".hero-section", ".pricing-table"],
  "save_preview": true
}

Input Parameters

Required Parameters

• url (string) - The webpage URL to extract from
  • Example: "https://example.com"
  • Must be a valid, accessible URL

Optional Parameters

• selectors (array) - CSS selectors to extract

  • Leave empty [] to auto-segment the entire page into logical sections
  • Provide one or more selectors to extract specific elements
  • Examples: [".hero-section"], ["#navbar", ".footer"], ["body > div:nth-child(3)"]
  • Default: [] (empty array triggers auto-segmentation)

• save_preview (boolean) - Generate preview links

  • true - Creates preview URL on templates.snipcss.com, you can easily click buttons for each segment to see result on codepen
  • false - No preview links generated
  • Default: true

• maxSegments (integer) - Maximum number of page segments to extract

  • Only applies when selectors array is empty (auto-segmentation mode)
  • Minimum: 1, Maximum: 100
  • Default: 10

Input Examples

Auto-segment page (extract all sections):

{
  "url": "https://stripe.com/pricing",
  "save_preview": true,
  "maxSegments": 15
}

Extract specific selector:

{
  "url": "https://stripe.com/pricing",
  "selectors": [".pricing-table"],
  "save_preview": true
}

Extract multiple selectors:

{
  "url": "https://stripe.com",
  "selectors": [".header", ".hero-section", ".features", ".footer"],
  "save_preview": true
}

Results

SnipCSS Actor stores extracted data in the Apify dataset. Each extraction includes:

Output Structure

{
  "url": "https://example.com",
  "selectors": [".hero-section"],
  "automation_uid": "apify_abc123def456",
  "timestamp": "2025-10-13T10:30:00.000Z",
  "status": "completed",
  "extracted_data": [
    {
      "selector": ".hero-section",
      "snip_html": "<div class=\"hero-section\">...</div>",
      "snip_css": ".hero-section { background: #fff; padding: 4rem; }",
      "images": ["https://example.com/hero-bg.jpg"],
      "fonts": ["Roboto", "Open Sans"],
      "all_fonts": ["https://fonts.googleapis.com/css2?family=Roboto"],
      "all_images": ["https://example.com/hero-bg.jpg"],
      "custom_properties": {
        "--primary-color": "#3b82f6",
        "--spacing": "1rem"
      },
      "media_queries": [
        "@media (max-width: 768px) { .hero { padding: 2rem; } }"
      ],
      "animations": []
    }
  ],
  "screenshots": [
    {
      "selector": ".hero-section",
      "desktop": {
        "key": "screenshot_apify_abc123_element_0",
        "width": 1366,
        "height": 600
      },
      "mobile": {
        "key": "mobile_screenshot_apify_abc123_element_0",
        "width": 320,
        "height": 450
      },
      "ipad": {
        "key": "ipad_screenshot_apify_abc123_element_0",
        "width": 768,
        "height": 500
      }
    }
  ],
  "preview_links": [
    {
      "selector": ".hero-section",
      "preview_url": "https://templates.snipcss.com/apify_automation/apify_abc123"
    }
  ]
}

Accessing Screenshots

Screenshots are stored in the Apify Key-Value Store and can be accessed via:

• Apify Console - View in the Key-Value Store tab
• API - Download programmatically using the Apify API
• Direct URL - Each screenshot has a unique key for retrieval

Example Extracted Component

Here's what you get when extracting a pricing card:

HTML Output:

<div class="pricing-card">
  <h3 class="plan-name">Professional</h3>
  <div class="price">$49<span class="period">/month</span></div>
  <ul class="features">
    <li>Unlimited projects</li>
    <li>Advanced analytics</li>
    <li>Priority support</li>
  </ul>
  <button class="cta-button">Get Started</button>
</div>

CSS Output:

.pricing-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.plan-name {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a202c;
}

.price {
  font-size: 3rem;
  font-weight: 700;
  margin: 1rem 0;
}

FAQ

Is it legal to extract HTML/CSS from websites?

Yes, extracting publicly available HTML and CSS is generally legal. However, you should:

• Replace text, images, and SVGs with AI-generated data or MIT-licensed icons while copying only HTML markup and CSS rules which does not fall under copyright.
• Use SnipCSS ethically and responsibly to respect copyright laws.
• Use extracted designs as reference or in AI tools which can repurpose the design for your own needs
• Check the website's terms of service

What's the difference between the two extraction approaches?

• Auto-Segment (empty selectors array) - The actor automatically segments the entire page into logical sections and extracts each one. Great for comprehensive site analysis or when you're not sure what selectors to use. You can control how many segments are extracted using the maxSegments parameter.

• Specific Selectors (populated selectors array) - You specify exactly what to extract using one or more CSS selectors. Perfect when you know the specific components you want. You can extract multiple different elements in a single run.

Can I extract from password-protected or login-required pages?

Currently, SnipCSS Actor works with publicly accessible pages.

How accurate are the extracted CSS styles?

Very accurate! SnipCSS uses the proven Pro Version of the SnipCSS browser extension. Unlike other CSS extractor extensions that use "Computed Styles", SnipCSS uses the Chrome DevTools protocol. Just like when you use devtools you see a list of associated styles, SnipCSS reconstructs that list for each element in the subtree of the DOM snippet.

Can I use the Apify API to automate extractions?

Yes! The Apify API provides full programmatic access. You can:

• Schedule extractions
• Integrate with your development workflow
• Batch process multiple URLs
• Automatically download results

Check the API tab for code examples in Node.js, Python, and cURL.

How long does an extraction take?

Extraction time depends on:

• Specific selectors - Usually 30-60 seconds per selector
• Auto-segmentation - 2-20 minutes depending on page complexity and maxSegments setting
• Page load time and number of assets

The actor captures screenshots in three different viewports (desktop, mobile, iPad), which takes additional time but provides comprehensive multi-device output.

Can I extract multiple pages in one run?

Currently, each actor run extracts from one URL. To extract multiple pages:

• Run the actor multiple times with different URLs
• Use the Apify API to automate batch processing
• Schedule regular runs for monitoring changes

What if a selector I specify doesn't exist?

If a selector is not found on the page, the actor will:

• Log a warning message
• Return an empty result for that selector
• Continue processing other selectors (if multiple were provided)
• Complete without errors
• Indicate the failure in the output status

Do I need proxies for SnipCSS Actor?

Not usually. SnipCSS Actor works well without proxies for most public websites. However, proxies might be helpful if:

• You're extracting from many pages on the same domain
• The target website has aggressive rate limiting
• You need to appear from a specific geographic location

Support and Issues

If you encounter any issues or have feature requests:

• Please email me at SnipCSS support email. You can also test the Chrome extension works properly on the website and report a bug if there are problems.

---

Ready to start extracting? Try SnipCSS Actor now with $5 in free credits!