SnipCSS on Apify

What is the SnipCSS Apify Actor?

SnipCSS Actor is a powerful web automation tool that runs the Pro Version of the SnipCSS browser extension (20k+ Active Users) in the cloud. Extract HTML, CSS, images, fonts, and convert them to Tailwind from any web element—no browser extension required.

The actor runs on the Apify platform and enables developers and designers to recreate designs with pixel-perfect accuracy.

Key Features

• Extract HTML/CSS Sections - Specify CSS selectors or let SnipCSS auto-segment the entire page
• Tailwind Conversion - Get converted Tailwind code for each extracted section
• Screenshots - Capture desktop, mobile, and iPad views automatically
• Preview Links - Generate shareable CodePen-compatible preview URLs
• Cloud-Based - No browser extension needed, runs entirely in the cloud
• API Access - Full programmatic access via Apify API

Pricing

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

How to Use

1. Create a free Apify account at apify.com
2. Get your API token from your Apify account settings
3. Choose your extraction approach:
   • Auto-Segment Page - Leave selectors empty to extract all page sections automatically
   • Specific Selectors - Provide CSS selectors to extract specific elements
4. Run the actor via API or Apify console
5. Download results in JSON format with HTML, CSS, Tailwind, and screenshots

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://www.snipcss.com/pricing", "selectors": [".main"], "save_preview": true}'

Using JavaScript/Node.js

Use the Apify Client library for easy integration:

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://www.snipcss.com/pricing',
        selectors: ['.main'],
        save_preview: true
    });

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

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

Input Parameters

Required

• url (string) - The webpage URL to extract from
  Example: "https://example.com"

Optional

• selectors (array) - CSS selectors to extract
  Default: [] (empty array triggers auto-segmentation)
  Examples: [".hero-section"], ["#navbar", ".footer"]
• save_preview (boolean) - Generate preview links
  Default: true
• maxSegments (integer) - Maximum segments in auto-mode
  Default: 6 (Min: 1, Max: 100)

Example Inputs

Auto-segment entire page:

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

Extract specific selector:

{
  "url": "https://www.snipcss.com/pricing",
  "selectors": [".main"],
  "save_preview": true
}

Output Format

Each extraction returns a dataset item with the following structure:

{
  "url": "https://example.com",
  "status": "completed",
  "extracted_data": [
    {
      "selector": ".hero-section",
      "snip_html": "<div class=\"hero-section\">...</div>",
      "snip_css": ".hero-section { background: #fff; }",
      "tailwind_html": "<div class=\"bg-white p-16\">...</div>",
      "images": ["https://example.com/hero-bg.jpg"],
      "fonts": ["Roboto", "Open Sans"]
    }
  ],
  "screenshots": [
    {
      "selector": ".hero-section",
      "desktop": { "key": "screenshot_xyz", "width": 1366 },
      "mobile": { "key": "mobile_xyz", "width": 320 },
      "ipad": { "key": "ipad_xyz", "width": 768 }
    }
  ],
  "preview_links": [
    {
      "selector": ".hero-section",
      "preview_url": "https://templates.snipcss.com/apify_automation/abc123"
    }
  ]
}

Use Cases

• Batch Processing - Extract from hundreds of pages programmatically
• Building Snippet Libraries - Create component collections from favorite sites
• Design System Extraction - Capture design patterns and convert to Tailwind
• Competitor Research - Analyze and study competitor designs
• AI Training Data - Generate clean HTML/CSS/Tailwind datasets

Get Started

Ready to start extracting? Visit the SnipCSS Actor on Apify and get $5 in free credits to extract 150+ segments!