Guide
Lovable to WordPress: the complete guide
Lovable is excellent for getting a designed site out fast. WordPress is where most teams want to live afterwards: editors, plugins, hosting, SEO tooling. This guide covers what you actually have when you export from Lovable, the realistic ways to get it into WordPress, and how to judge the result.
What a Lovable export contains
A Lovable project is a standard Vite + React + TypeScript app styled with Tailwind CSS and shadcn/ui components. The export (via GitHub sync) contains src/pages or src/routes with one component per page, src/components with the shared header, footer and UI pieces, src/index.css with the design tokens as CSS variables, tailwind.config.ts, and public/src/assets with the images. Content is inside JSX: headings, paragraphs, arrays of features or products that are mapped into cards.
There is no HTML to copy. The only rendered HTML is the published site, which is a JavaScript application: its initial HTML is essentially empty and everything is painted client-side. That is why "view source and paste into WordPress" does not work, and why a conversion has to start from the React source.
Four ways to get it into WordPress
- Rebuild by hand. A developer or a page-builder user recreates every section. Faithful if the person is good, expensive, and every later Lovable change means doing it again. Realistic effort: one to several days per site.
- Embed the React app (iframe or a static build served from a WordPress page). Fast, but the content is not editable in WordPress, SEO metadata and analytics live in two places, and you now host two things.
- Headless WordPress as a content API behind the React app. Right for teams that want React in production; it does not give editors a WordPress site, it gives them a WordPress admin feeding a React deployment.
- Convert the source into a block theme. The React code is parsed and rewritten as native Gutenberg blocks with the same styles, images, forms and products. The output is plain WordPress with nothing running from Lovable. This is what IQDesk does.
The comparison page puts these side by side with cost, editability and maintenance.
How a converter maps React to blocks
A good conversion is a compilation problem, not a copy problem. IQDesk parses each page with the TypeScript compiler, inlines the components it imports, expands mapped arrays, resolves the Tailwind classes to concrete values (spacing, colors, type, borders, layout), and builds a page schema of sections, columns, cards, headings, text, images, buttons, lists, forms and products. That schema is then written as block markup, one pattern per page, plus header and footer parts and a theme.json with the palette and type scale. Because every block is a core block with valid attributes, the pages open in the Site Editor without "invalid block" warnings.
What converts well
- Marketing pages: hero, features, pricing, testimonials, FAQ, about, contact.
- Layout built with Tailwind grids and flex rows; cards with borders, backgrounds and pinned buttons.
- Colors and fonts defined as design tokens; hover states; viewport-height heroes.
- Images from the project, logos, aspect-ratio boxes.
- Forms (to Contact Form 7) and product listings (to WooCommerce).
What needs work
- Interactive components (tabs, modals, sliders) convert to their default state. Some become native blocks (accordions → details, image stacks → a carousel).
- Decorations positioned absolutely (blurred blobs, floating badges) are reported and mostly dropped; they rarely matter, and the AI agent can rebuild the ones that do.
- Application features: authentication, Supabase data, dashboards, client state. These are not website content and are not converted; the report lists them so nothing is silently lost.
- SEO metadata (meta descriptions, Open Graph) is not carried over; add it with your SEO plugin after the move.
The full list is on the supported features page.
How to check the result
Do not judge by a screenshot of the home page. Compare page by page, at the same width, with the same fonts loaded: the heading order and count, the number of images and forms, the section heights, and then the details (button colors, spacing, type sizes). IQDesk's review screen does this automatically against the published Lovable site and lists the differences per page; anything left can be handed to the AI fix agent, which measures both pages before and after its change.
After the move
- Install an SEO plugin and set titles, descriptions and social images per page.
- Set up redirects if page slugs changed (the converter keeps the Lovable route slugs).
- Connect the Contact Form 7 form to your mail delivery; configure WooCommerce payments and shipping.
- Keep the theme: it is a normal block theme, so future changes are made in WordPress, not by re-converting.
FAQ
Can I convert a Lovable app with a login and a database?
The public pages, yes. The app screens behind the login are not website content and will not become WordPress pages; the conversion report lists them.
Does the converted site still depend on Lovable?
No. The theme is self-contained: images are copied into it, styles are in the theme, pages are WordPress pages.
Will the pages be editable in the block editor?
Yes. Every page is made of core blocks with valid attributes. Header and footer are template parts in the Site Editor.
How long does it take?
Minutes: conversion in seconds, the in-browser WordPress preview in under two minutes, a typical AI fix in two to seven minutes.