SnipCSS Extractor (HTML/CSS/Tailwind)

Overview

The SnipCSS Extractor is an Apify actor that automates the extraction of HTML, CSS, images, and fonts from any section of a webpage. It can also convert the extracted styles to Tailwind CSS. It's based on the SnipCSS browser extension and runs the Pro Version for extractions, providing features like responsive style capture and Tailwind conversion.

Cost is $0.03 per extracted segment. The free plan's $5 monthly credit allows for roughly 150+ extractions.

Key Features

• Extract Code: Get the HTML and associated CSS (including images and fonts) from specific page elements.
• Tailwind Conversion: Automatically generate equivalent Tailwind CSS code for extracted sections.
• Capture Screenshots: Take screenshots of extracted sections in desktop, mobile, and iPad views.
• Generate Previews: Create shareable preview links on Codepen to view the extracted components.
• Two Extraction Modes:
  • Auto-Segment: Automatically analyzes and extracts all logical page sections.
  • Selector-Based: Extract specific components using CSS selectors.

How to Use

1. Create a free account on the Apify platform.
2. Open the SnipCSS Actor.
3. Choose your approach by setting the input parameters (see below).
4. Enter the target URL and click "Start".
5. Download the results in JSON format, which includes HTML, CSS, Tailwind code, and screenshot URLs.

Input & Output

Input Parameters

Required:
* url (string): The webpage URL to extract from. Must be valid and accessible.
* Example: "https://example.com"

Optional:
* selectors (array): CSS selectors for specific elements. Leave as an empty array [] to use auto-segmentation.
* Examples: [".hero-section"], ["#navbar", ".footer"]
* Default: []
* save_preview (boolean): Generate a preview link on templates.snipcss.com.
* true = create link, false = skip.
* Default: true
* maxSegments (integer): The maximum number of segments to extract in auto-segmentation mode. Min: 1, Max: 100.
* Default: 6

Input Examples

Auto-segment a page:

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

Extract specific selectors:

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

Output

The actor returns a JSON object containing an array of extracted segments. Each segment typically includes:
* The extracted HTML and CSS.
* Converted Tailwind CSS code.
* URLs for desktop, mobile, and iPad screenshots.
* A preview link (if save_preview was enabled).