SnipCSS Actor - Extract HTML/CSS/Tailwind 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, and fonts from any web element and also convert it to Tailwind.

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

The automation 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
• Get Converted Tailwind Code for each one of those sections
• Capture screenshots of Sections - Desktop, Mobile, and iPad views
• Generate preview links - Shareable URLs on Codepen to view extracted components

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/Tailwind, the SnipCSS Actor is the best way to copy web component designs.

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.

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": 6
}

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

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
}

API Usage Examples

Using cURL

Start an actor run via command line:

curl -X POST https://api.apify.com/v2/acts/prodmarkllc~snipcss-actor/runs \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_APIFY_TOKEN" \
  -d '{
    "url": "https://stripe.com/pricing",
    "selectors": [".pricing-table"],
    "save_preview": true
  }'

Using JavaScript/Node.js (Apify Client)

import { ApifyClient } from 'apify-client';

const apifyClient = new ApifyClient({
    token: 'YOUR_APIFY_TOKEN',
});

// Start the actor
const run = await apifyClient
    .actor('prodmarkllc~snipcss-actor')
    .call({
        url: 'https://stripe.com/pricing',
        selectors: ['.pricing-table'],
        save_preview: true
    });

console.log('Run started:', run);

// Wait for results
const { items } = await apifyClient
    .dataset(run.defaultDatasetId)
    .listItems();

console.log('Extracted data:', items);

Using Fetch API (Browser/Node.js)

const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Authorization", "Bearer YOUR_APIFY_TOKEN");

const requestBody = JSON.stringify({
  url: "https://stripe.com/pricing",
  selectors: [".pricing-table"],
  save_preview: true
});

const requestOptions = {
  method: "POST",
  headers: myHeaders,
  body: requestBody,
  redirect: "follow"
};

fetch("https://api.apify.com/v2/acts/prodmarkllc~snipcss-actor/runs", requestOptions)
  .then((response) => response.json())
  .then((run) => {
    console.log("Run started:", run);
    // Poll for completion or use webhooks
  })
  .catch((error) => console.error("Error:", error));

Using Python

from apify_client import ApifyClient

client = ApifyClient('YOUR_APIFY_TOKEN')

# Start the actor
run = client.actor('prodmarkllc~snipcss-actor').call(
    run_input={
        'url': 'https://stripe.com/pricing',
        'selectors': ['.pricing-table'],
        'save_preview': True
    }
)

# Fetch results from the dataset
dataset_items = client.dataset(run['defaultDatasetId']).list_items().items

print('Extracted data:', dataset_items)

Get Actor Run Status

# Replace RUN_ID with the ID from the start response
curl https://api.apify.com/v2/actor-runs/RUN_ID \
  -H "Authorization: Bearer YOUR_APIFY_TOKEN"

Get Dataset Results

# Replace DATASET_ID with defaultDatasetId from the run response
curl https://api.apify.com/v2/datasets/DATASET_ID/items \
  -H "Authorization: Bearer YOUR_APIFY_TOKEN"

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!