CodePen Scraper

A comprehensive Apify actor for scraping CodePen content including pens, author profiles, collections, trending content, and search results.

Features

• Pen Scraping: Scrape full pen data including HTML, CSS, JS code, resources, and metadata
• Author Profiles: Extract author information including followers, following, bio, and all their pens
• Collections: Scrape entire collections with all contained pens
• Trending Content: Get trending, popular, or staff-picked pens by time period
• Search: Search for pens, projects, collections, or posts by keyword
• Avatar & Thumbnails: Extract author avatars and pen thumbnail images

Input Configuration

Scraping Modes

Mode	Description
pen	Scrape specific pen(s) by URL
author	Scrape author profile and all their public pens
author_pens	Scrape only author's pens (no profile)
collection	Scrape all pens in a collection
trending	Scrape trending/popular pens
search	Search for pens by keyword

Input Parameters

{
    "mode": "pen",
    "urls": ["https://codepen.io/skullface/pen/dKYzyv"],
    "searchQuery": "css animation",
    "searchType": "pens",
    "trendingPeriod": "today",
    "trendingCategory": "all",
    "maxPens": 50,
    "scrapeFullPenData": true,
    "scrapeAuthorProfile": true,
    "scrapeAvatar": true,
    "scrapeThumbnail": true,
    "maxConcurrency": 5,
    "requestTimeout": 60
}

Parameter Details

Parameter	Type	Default	Description
mode	string	pen	Scraping mode: pen, author, collection, trending, search
urls	array	[]	List of CodePen URLs to scrape
searchQuery	string	""	Search term for search mode
searchType	string	pens	Type of search: pens, projects, posts, collections
trendingPeriod	string	today	Period for trending: today, week, month, year, all
trendingCategory	string	all	Category: all, popular, picks
maxPens	integer	50	Maximum number of pens to scrape
scrapeFullPenData	boolean	true	Include HTML/CSS/JS code in output
scrapeAuthorProfile	boolean	true	Also scrape author profile
scrapeAvatar	boolean	true	Include avatar image URL
scrapeThumbnail	boolean	true	Include pen thumbnail URL
maxConcurrency	integer	5	Concurrent page processing
requestTimeout	integer	60	Page load timeout in seconds

Output Examples

Pen Output

{
    "type": "pen",
    "penId": "dKYzyv",
    "title": "My Awesome Pen",
    "description": "A cool CSS animation",
    "url": "https://codepen.io/skullface/pen/dKYzyv",
    "views": 1234,
    "likes": 56,
    "comments": 7,
    "html": "<div>...</div>",
    "css": ".selector { ... }",
    "js": "console.log('hello')",
    "tags": ["css", "animation"],
    "author": {
        "userId": "123456",
        "username": "skullface",
        "displayName": "Skull Face",
        "profileUrl": "https://codepen.io/skullface",
        "avatarUrl": "https://assets.codepen.io/..."
    },
    "thumbnailUrl": "https://shots.codepen.io/...",
    "scrapedAt": "2026-01-24T10:00:00.000Z"
}

Author Output

{
    "type": "author",
    "username": "skullface",
    "displayName": "Skull Face",
    "bio": "Designer & Developer",
    "location": "New York",
    "website": "https://example.com",
    "followers": 1234,
    "following": 567,
    "avatarUrl": "https://assets.codepen.io/...",
    "isPro": true,
    "stats": {
        "pens": 89,
        "projects": 5,
        "posts": 12,
        "collections": 3
    },
    "socialLinks": {
        "twitter": "https://twitter.com/skullface",
        "github": "https://github.com/skullface"
    },
    "scrapedAt": "2026-01-24T10:00:00.000Z"
}

Usage Examples

Scrape a Single Pen

{
    "mode": "pen",
    "urls": ["https://codepen.io/skullface/pen/dKYzyv"]
}

Scrape Author Profile with All Pens

{
    "mode": "author",
    "urls": ["https://codepen.io/skullface"],
    "maxPens": 100
}

Scrape Trending Pens This Week

{
    "mode": "trending",
    "trendingPeriod": "week",
    "trendingCategory": "popular",
    "maxPens": 50
}

Search for CSS Animation Pens

{
    "mode": "search",
    "searchQuery": "css animation",
    "searchType": "pens",
    "maxPens": 100
}

Scrape a Collection

{
    "mode": "collection",
    "urls": ["https://codepen.io/collection/XKgVvQ"]
}

Pricing

This actor uses a pay-per-result pricing model.

Data Type	Price per Result
Pen Details	$0.005
Author Profile	$0.010
Search Result	$0.003
Trending Pen	$0.003
Collection	$0.008

Why Use This Scraper?

• Complete Code Extraction: Get full HTML, CSS, and JavaScript code
• Multiple Modes: Scrape pens, authors, collections, trending, or search
• Comprehensive Data: Metadata, stats, resources, and author info
• High Quality: Handles JavaScript rendering and dynamic content
• Easy Export: Download data in JSON, CSV, or Excel format

Use Cases

• Code Learning: Collect examples for learning web development
• Design Inspiration: Gather UI/UX patterns and animations
• Research: Analyze frontend trends and popular techniques
• Portfolio Building: Archive interesting code snippets
• Content Curation: Build curated collections of pen examples

Custom Solutions

Need a custom scraper or dedicated server setup? We offer:

• On-demand scraper development for any website
• Individual server setups with your own infrastructure
• Custom modifications to existing scrapers
• Priority support and maintenance

📧 Email: lakshmanan.w3dev@gmail.com
📱 WhatsApp: +91 6382775774