framer-ui-scrape-injector

Automated workflow for scraping site UIs and rebuilding them in Framer via browser or CLI automation.

📚 Overview

This tool automates the process of:

1. Scraping HTML, CSS, and image assets from any website (default: kodexalabs.space)
2. Processing and formatting the content for Framer
3. Injecting the code into Framer Workshop to create code components

Perfect for quickly prototyping existing designs or migrating web UIs into Framer projects.

✨ Features

• 🌐 Full Website Scraping: Extracts HTML structure, CSS styles, and image assets
• 📸 Screenshot Capture: Takes full-page screenshots for reference
• 🎨 Style Extraction: Captures both inline and external CSS styles
• 🖼️ Asset Management: Downloads and organizes images and other assets
• 🧩 Framer Component Generation: Creates ready-to-use Framer code components
• 🤖 Browser Automation: Uses Puppeteer or Playwright for reliable automation
• 📝 Manual Fallback: Generates code files if automatic injection fails

🛠️ Installation

Prerequisites

• Node.js >= 16.0.0
• npm or yarn
• A modern web browser (Chrome/Chromium recommended)

Setup Steps

1. Clone the repository

git clone https://github.com/kodexalabs/framer-ui-scrape-injector.git
cd framer-ui-scrape-injector

2. Install dependencies

npm install

This will install:

• Puppeteer (browser automation)
• Playwright (alternative automation tool)
• Axios (HTTP requests)
• Cheerio (HTML parsing)
• dotenv (environment configuration)

3. Configure environment (optional)

Create a .env file in the project root:

TARGET_URL=https://kodexalabs.space
USE_PLAYWRIGHT=false

🚀 Usage

Quick Start: Full Workflow

Run both scraping and injection in one command:

npm run full-workflow

Step-by-Step Usage

Step 1: Scrape the Website

npm run scrape

This will:

• Launch a headless browser
• Navigate to the target URL (default: kodexalabs.space)
• Extract all HTML, CSS, and images
• Save everything to the scraped-output/ directory
• Take a full-page screenshot

Output files:

• scraped-output/scraped-data.json - Complete scraped data
• scraped-output/page.html - HTML structure
• scraped-output/styles.css - Combined CSS
• scraped-output/screenshot.png - Full page screenshot
• scraped-output/assets/ - Downloaded images

Step 2: Inject into Framer

npm run inject

This will:

1. Generate Framer-compatible React code
2. Launch a browser window
3. Navigate to Framer Projects
4. Wait for you to open a project and code editor
5. Attempt to automatically inject the code
6. Save a .tsx component file as fallback

Manual steps during injection:

1. Log in to Framer when prompted
2. Open or create a project
3. Open the Code panel (Workshop)
4. Create a new code component
5. Wait for the script to inject the code

Advanced Usage

Scrape a Custom URL

TARGET_URL=https://example.com npm run scrape

Use Playwright Instead of Puppeteer

USE_PLAYWRIGHT=true npm run inject

Run Scripts Directly

node scraper.js
node inject-framer.js

📝 Generated Framer Component

The tool generates a React component like this:

import React from "react"
import { addPropertyControls, ControlType } from "framer"

export default function ScrapedComponent(props) {
  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        backgroundColor: "#ffffff",
        color: "#000000",
        fontFamily: "system-ui, sans-serif",
        // ... extracted styles
      }}
    >
      <div dangerouslySetInnerHTML={{ __html: `...` }} />
    </div>
  )
}

📁 Project Structure

framer-ui-scrape-injector/
├── package.json           # Dependencies and scripts
├── scraper.js             # Website scraping script
├── inject-framer.js       # Framer injection script
├── README.md              # This file
├── .gitignore             # Git ignore rules
├── .env                   # Environment configuration (create this)
└── scraped-output/        # Generated by scraper
    ├── scraped-data.json  # Complete scraped data
    ├── page.html          # HTML structure
    ├── styles.css         # Combined CSS
    ├── screenshot.png     # Page screenshot
    ├── framer-component.tsx  # Generated Framer component
    └── assets/            # Downloaded images

⚠️ Troubleshooting

Scraping Issues

Browser won't launch:

# Install Chromium manually
node node_modules/puppeteer/install.js

Timeout errors:

• Increase timeout in scraper.js (line with timeout: 30000)
• Check your internet connection
• Verify the target URL is accessible

Injection Issues

Code not injecting automatically:

• The script saves a .tsx file in scraped-output/
• Manually copy and paste the code into Framer
• Ensure you've opened the code editor before the injection attempt

Framer login required:

• The script pauses for 30 seconds to allow manual login
• Complete the login process during this time
• The script will continue automatically

🎯 Use Cases

• Design Migration: Move existing websites into Framer
• Rapid Prototyping: Quickly recreate designs you find online
• Component Libraries: Extract and adapt UI patterns
• Learning: Study how other sites are built
• Client Work: Speed up the process of rebuilding client sites

💡 Tips & Best Practices

1. Start Simple: Test with simple pages before complex sites
2. Review Output: Always review and clean up the generated code
3. Style Refinement: The extracted styles may need manual adjustment
4. Image Optimization: Consider optimizing downloaded images
5. Responsive Design: You may need to add responsive breakpoints manually
6. Component Splitting: Break large components into smaller, reusable pieces

🔒 Legal & Ethical Considerations

• ⚠️ Only scrape websites you have permission to scrape
• Respect robots.txt and terms of service
• Don't use scraped content commercially without permission
• Be mindful of copyright and intellectual property
• Use for learning and prototyping purposes

🐛 Known Limitations

• JavaScript-heavy sites may not render completely
• Some CSS-in-JS styles might not be captured
• Complex animations may need manual recreation
• External fonts may need separate handling
• CORS restrictions may prevent some asset downloads

🔧 Development

Running in Development Mode

# Watch for changes
npm run scrape -- --watch

# Debug mode
DEBUG=true npm run scrape

Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

📜 License

MIT License - feel free to use this tool for personal and commercial projects.

👤 Author

kodexalabs

• GitHub: @kodexalabs

🚀 Future Enhancements

• Support for multiple page scraping
• Advanced CSS selector filtering
• Interactive CLI with prompts
• Direct Framer API integration (when available)
• Component style property controls generation
• SVG extraction and optimization
• Font file downloading and bundling
• Framer Motion animation detection
• Responsive breakpoint extraction
• Dark mode style detection

❓ FAQ

Q: Do I need a Framer account? A: Yes, you'll need a Framer account to use the injection feature.

Q: Will this work with any website? A: Most websites will work, but heavily JavaScript-dependent sites may have limitations.

Q: Can I customize the scraping behavior? A: Yes, edit scraper.js to customize selectors, filters, and extraction logic.

Q: Is the generated code production-ready? A: The code is a starting point. Review and refine it for production use.

Q: Can I scrape multiple pages at once? A: Not currently, but this is planned for a future update.

---

Happy scraping! 🎉

If you find this tool useful, please star the repository and share it with others!