How it works
From a Lovable export to a WordPress theme, in six steps
Everything except the AI agent runs in your browser. Nothing is rebuilt by hand and nothing is screenshotted: the converter reads the React source and writes real block markup.
STEP 1
Load the project
Drop the Lovable ZIP or paste a GitHub repository URL. The converter unpacks it in the browser, finds the project root and detects the router (React Router routes in App.tsx, pages in src/pages, or TanStack file routes in src/routes).
STEP 2
Decide what to convert
Choose which routes become pages, whether product pages become WooCommerce products or stay designed pages, and whether forms become Contact Form 7 forms. Decisions are saved in a small JSON file inside the theme so a re-conversion repeats them.
STEP 3
Convert
A Web Worker parses every component with the TypeScript compiler, resolves imports, props and mapped data, reads Tailwind classes and the project CSS variables, and builds a page schema: sections, columns, cards, headings, text, images, buttons, lists, forms, products. The schema is then written as a WordPress block theme.
STEP 4
Review side by side
The theme is installed in WordPress Playground, a WordPress that runs entirely in the browser. Next to it, the published Lovable site is shown at the same width. Headings, images, forms, accordions and page heights are compared automatically, per page.
STEP 5
Fix with the AI agent
Type what differs. The agent reads the original source and the theme, measures elements on both pages, applies targeted edits to the running theme, measures again and reports what it changed. Undo is one click.
STEP 6
Download and install
The theme ZIP includes an install guide. Upload it in Appearance → Themes, activate, open the home page once: pages, menu, logo, forms and products are created on that first visit.
What the analysis actually reads
The converter does not pattern-match HTML strings. It parses the project with the TypeScript compiler and walks the JSX tree of every route component:
- Components and props. Imported components are inlined with their props; arrays that are
.map()-ed into cards, features or products are expanded; conditional rendering is resolved for the desktop view. - Tailwind utilities. Spacing, typography, colors (including CSS variables from
index.cssand the Tailwind config), borders, radius, shadows, widths, min-heights, flex and grid layout, order utilities, hover states and responsive prefixes (desktop values win, since WordPress columns handle the mobile stacking). - Structure. Sections, the shared header and footer, columns, cards with pinned call-to-actions, lists with icons or colored dots, quotes, accordions, tables built with definition lists, videos and audio with static sources.
- Forms and commerce. Form fields are captured with their labels and types; product data (title, price, description, image, category) is extracted into WooCommerce products.
What the review compares
A small script runs inside both frames and reports the same facts for every page: heading texts and their vertical positions, image count, forms, accordions and total page height. The panel shows the numbers side by side with the difference, so a section that is 200px shorter than the original is obvious before you download anything.
What the AI agent can and cannot do
The agent is a Claude model with tools: list and read files of the theme and of the original source, measure elements on both pages, apply edits, copy an asset from the project into the theme, finish. It works on the theme only; it does not touch your Lovable project. Typical requests: match the hero height, restore an illustration that was drawn with divs, fix spacing or type sizes, add a missing image. It has a 20-step budget per request and reports what it changed. Two attempts are free with every account; after that a request typically costs 40 to 150 credits (see pricing).