Turn Any Website into a React Component Library

Ever stumbled across a beautifully designed website and thought, "I wish I could just lift these components and use them in my own React project"? Maybe you're inheriting a legacy site that needs a modern rebuild, or you're looking for design inspiration that you can actually use. Manually converting HTML and CSS into clean, reusable React components is a tedious chore. What if you could skip that part entirely?

That's the idea behind Open Lovable, a new open-source tool that lets you reverse-engineer any live website into a functional React component library. It’s like having a smart assistant that handles the grunt work of conversion, leaving you with structured, usable code.

What It Does

Open Lovable is a Node.js tool that takes a URL, crawls the site, and intelligently converts the HTML and CSS it finds into a collection of React components. It doesn't just dump the raw HTML into a JSX file. It analyzes the structure, identifies repeating UI patterns, and attempts to create a sensible, component-based architecture from a flat webpage.

You give it a starting URL, and it outputs a ready-to-use React project folder with your new component library, complete with Tailwind CSS for styling where possible.

Why It's Cool

The clever part isn't just the conversion—it's the analysis. The tool tries to understand the visual and semantic relationships on the page. It groups related elements, deduplicates styles, and aims to create props for dynamic parts of the component. This means you're not getting a single, giant App.jsx file; you're getting a Button.jsx, a Navbar.jsx, a Card.jsx, and so on.

This is incredibly powerful for a few specific use cases:

• Modernizing Legacy Sites: Quickly get a React component foundation from an old PHP or static HTML site.
• Design System Discovery: Reverse-engineer a live site to understand and reuse its visual building blocks.
• Learning from Production Code: See how real-world sites structure their components and styles.
• Rapid Prototyping: Grab the core UI from a reference site to kickstart your own project.

It's a developer-focused tool that automates the initial, repetitive "translation" phase, letting you focus on logic, state, and refinement.

How to Try It

Getting started is straightforward. The project is on GitHub, and you can run it locally with a few commands.

First, clone the repository:

git clone https://github.com/firecrawl/open-lovable.git
cd open-lovable