Building React apps means dealing with a lot of repetitive work. You set up the project structure, configure the build tools, create components, and write styles.

When you see a website with a design you want to recreate, you’re looking at hours of manual work—inspecting elements, copying styles, rebuilding the layout piece by piece. All this setup and boilerplate slow down developers who want to move fast.

Open Lovable changes this. It’s an open-source tool that clones any website and recreates it as a modern React app in seconds.

Built by the Firecrawl team, it has gained strong traction with over 12,500 GitHub stars and 2,000+ forks. It’s designed for developers who value speed and quality, and want to skip the tedious parts of React development.

This article covers what Open Lovable is and how it works. You’ll learn how it compares to Lovable.dev, why developers are using it, and how to get started cloning websites instantly.

Open Lovable is an open-source website cloner that turns any URL into a modern React application. You paste a link, and it generates a complete React codebase with components, styling, and proper file structure.

The tool combines Firecrawl’s web scraping technology with AI code generation to analyze existing websites and recreate them using current best practices. It’s MIT licensed and runs locally on your machine or deploys to your own infrastructure.

The Firecrawl team built it as an internal tool to speed up their own development work. They released it as open source in early 2025, and it quickly gained popularity, crossing 12,500 stars on GitHub within months.

Now, developers from around the world use it for:

• Landing page clones for client projects
• Rapid prototyping for startups
• Studying how professional sites are structured
• Learning React patterns from real-world examples
• Cloning portfolio websites as a non-web developer to showcase work

Open Lovable uses modern tools that developers already know:

• Frontend: React 18+ with TypeScript, built with Vite
• Styling: Tailwind CSS and Shadcn/ui components
• AI providers: Claude, GPT-4, Gemini, or Groq (your choice)
• Scraping: Firecrawl API for clean data extraction
• Deployment: Vercel, E2B Cloud Sandboxes, or self-hosted

Firecrawl powers the scraping layer. When you provide a URL, it handles rendering JavaScript, extracting clean HTML, and dealing with modern single-page applications. Many websites don’t work with basic scrapers because they load content dynamically. Firecrawl solves this by returning structured, LLM-ready data.

In the coming sections, we will cover how to set it up locally and get started.

The names are similar, but Open Lovable and Lovable.dev solve different problems.

Open Lovable clones existing websites. You provide a URL, and it generates a React app that recreates that design. It’s free, open source, and runs on your machine. You own the code. Use it when you need to recreate a design you’ve seen, prototype quickly from existing sites, or study how professional UIs are built.

Lovable.dev (formerly GPT Engineer) builds new full-stack apps from prompts/descriptions. You tell it what you want, and it creates an app with a backend, authentication, and database integration.

It’s a paid platform starting at $25/month with cloud hosting. Use it when you’re building something new from scratch and need full-stack features, such as Supabase integration or GitHub sync.

The core difference: Open Lovable is best at cloning, Lovable.dev is best at creating.

• Open Lovable: You have a landing page you want to recreate, you’re learning from existing designs, or you need a fast prototype based on real sites
• Lovable.dev: You’re building a new app with specific requirements, you need backend infrastructure, or you want managed hosting and deployment

Before you start, make sure you have:

• Node.js 18 or higher: Check your version with node --version. If you need to install it, download from nodejs.org
• pnpm (Performant Node Package Manager): Install with npm install -g pnpm
• Git: You likely have this already. Check with git --version

You need at least one AI provider (OpenAI, Anthropic, Gemini) key, a Firecrawl key, and a sanbox provider key (E2B, Vercel).

1. Go to firecrawl.dev
2. Sign up for a free account
3. Navigate to your dashboard
4. Copy your API key from the API section

Open Lovable uses sandboxes to securely execute and preview the generated code in isolated environments, preventing potentially harmful code from affecting your system. You have two options:

E2B Cloud Sandboxes (recommended for simpler setup):

• Only requires a single API key
• Designed for code execution
• Easy to get started

To get your E2B API key:

1. Go to e2b.dev
2. Sign up for a free account
3. Navigate to your settings
4. Create and copy your API key

Vercel (alternative):

• Requires multiple authentication tokens
• More complex setup process
• Good if you already use Vercel for deployments

We recommend E2B for simplicity. You can always switch later.

We recommend Anthropic Claude for quality:

1. Go to console.anthropic.com
2. Create an account
3. Click “Get API Keys” in the dashboard
4. Generate a new key and copy it

Or Groq for very fast inference and lower costs, as it uses open-source models:

1. Go to console.groq.com
2. Sign up
3. Navigate to API Keys
4. Generate and copy your key

You can also use Gemini or OpenAI.

Open your terminal and run:

# Clone the repository
git clone https://github.com/firecrawl/open-lovable.git
# Navigate into the folder
cd open-lovable
# Install dependencies
pnpm install

The installation takes approximately one to two minutes, depending on your connection speed.

Create your environment file:

cp .env.example .env.local

Open .env.local in your code editor and add your API keys:

# Firecrawl (required)
FIRECRAWL_API_KEY=fc-your-key-here
# Sandbox provider (required - using E2B)
E2B_API_KEY=e2b-your-key-here
# AI Provider (add at least one)
ANTHROPIC_API_KEY=sk-ant-your-key-here
OPENAI_API_KEY=sk-your-key-here
GOOGLE_AI_API_KEY=your-google-key-here
GROQ_API_KEY=gsk-your-key-here

Replace the placeholder values with your actual keys. Please do not share this file or commit it to Git.

Start the development server:

pnpm dev

You’ll see output indicating the server is running. Open your browser to http://localhost:3000.

For this example, we’ll clone a clean portfolio website by Brittany Chiang to show you the complete workflow.

Start with something simple to test the setup:

1. Find a simple landing page or portfolio site you want to clone
2. Copy the full URL (including https://)
3. Paste it into Open Lovable’s input field
4. Click “Clone” or press Enter
5. Watch the tool scrape the site and generate React code

The process takes 30-60 seconds, depending on the site complexity. The sandbox executes the code securely and shows you a live preview.

Once complete, you’ll see the cloned version with recreated layout and styling:

• Click the “Download” button
• Unzip the file
• Navigate into the folder
• Run npm install then npm run dev
• Open localhost:5173 to see your cloned site

• Cannot find module error: Run pnpm install again to make sure all dependencies are installed.
• Invalid API key error: Check your .env.local file. Make sure there are no extra spaces around the equals sign.
• Failed to fetch error: Your Firecrawl API key might be invalid or you hit rate limits. Check your Firecrawl dashboard for usage.
• Sandbox error: Make sure your E2B API key is correct. Check your E2B dashboard for usage limits.
• Port already in use: Another app is using port 3000. Stop it or change the port in the configuration.

Unzip the downloaded file and navigate into the folder:

unzip open-lovable-clone.zip
cd open-lovable-clone

Install dependencies and run the development server:

npm install
npm run dev

Open http://localhost:5173 in your browser. Check that everything works properly. Test navigation, interactions, and responsive behavior.

Open the project in your code editor. Common changes you might want:

• Update text content in components
• Replace placeholder images with your own
• Adjust colors in the Tailwind config
• Fix any styling issues you noticed during testing
• Add meta tags for SEO

Security note: Review the generated code before deploying to production. Check for hardcoded credentials, validate any external API calls, and ensure no malicious scripts were inadvertently scraped from the source site.

For my project, I asked Claude Code to make the website a bit more interactive (like the changing headers when scrolling and the subtle background hue change on mouseover), and fix a couple of subtle bugs. Then, I tested it again with npm run dev before final deployment.

Note: You can adapt the project to your own credentials and data by providing your CV details in the OpenLovable UI or in your code editor.

And that’s it — you now have a fully functional React app cloned and ready to go. Feel free to deploy it and see it live on th web.

Open Lovable converts hours of manual React work into seconds of automated generation. You paste a URL, and it creates a complete React codebase with TypeScript, Tailwind CSS, and modern tooling.

Important: Use Open Lovable responsibly. Only clone websites you own, have permission to clone, or clone for personal learning purposes. Always respect copyright and terms of service.

Clone the Open Lovable repository here.

v0.dev (by Vercel) and Bolt both generate new applications from text prompts. Open Lovable specializes in cloning existing websites from URLs. Use Open Lovable when you want to recreate a specific design you’ve seen. Use v0.dev or Bolt when building something new from scratch. Open Lovable is free and self-hosted, while v0.dev and Bolt have usage limits or paid tiers.

Yes. Open Lovable is MIT licensed, which means it’s completely free to use. You only pay for the API services it uses: your chosen AI provider, Firecrawl for web scraping, and E2B for sandboxes. These costs are usually a few cents per clone (Firecrawl and E2B provide generous free plans as well). There are no subscription fees or usage limits from Open Lovable itself.

Yes. The MIT license allows commercial use without restrictions. You can use it for client work, sell products built with it, or use it in your business. No attribution is required, though contributions to the project are appreciated.

Start with Claude (Anthropic) for the best code quality and Tailwind CSS generation. GPT-4 (OpenAI) is faster and costs less per request. Gemini (Google) offers good balance between speed and quality. Groq is the fastest but more experimental. You can switch providers anytime by changing your API key in .env.local.

Not to generate the initial clone. Open Lovable handles the React code generation automatically. But you’ll need React knowledge to customize the generated code, fix issues, or add features. The generated code is clean and well-structured, making it a good learning resource if you’re studying React.

Most modern websites work well, especially landing pages, portfolios, and marketing sites. Static sites clone perfectly. Single-page applications and sites with complex JavaScript interactions may need manual adjustments after generation. Sites with authentication walls, paywalls, or heavy server-side rendering are harder to clone accurately.