Vibe Coding to WordPress: What Survives

What vibe coding actually produces

A vibe-coded site is still a normal codebase. In Lovable's case it is React and TypeScript, styled with Tailwind CSS, using shadcn/ui components. The chat is the interface; the output is a project you can read, build and host.

That matters for WordPress, because WordPress does not run React apps as sites. It serves PHP templates and block markup. So a move is never a copy. It is a translation from one way of describing a page to another.

Two generations exist. Apps created from 13 May 2026 use TanStack Start and are server-rendered, with file-based routes in src/routes and a head() per route for title, description and JSON-LD. Older apps are React + Vite, with pages in src/pages and routes in src/App.tsx, and they render in the browser.

Why people move a vibe-coded site to WordPress

The reasons we hear are consistent, and none of them are about the design. The design is usually the part people want to keep.

The common ones:

• Editing without the AI. A marketing person can change a heading in the Site Editor. Changing it in React means a prompt, a commit and a deploy.
• Content that grows. Blog posts, categories and archives are built into WordPress. In a vibe-coded app they are arrays in a file until someone wires up a CMS.
• Plugins. Forms, SEO fields, ecommerce and analytics exist as installable plugins instead of custom code.
• Ownership. A WordPress install runs on any host you choose, with a database you control.
• Handover. Agencies and clients often require WordPress, because the next person will know it.

Getting the code out first

Nothing can be converted while the project only exists in a chat window. Export it first.

GitHub sync works on every Lovable plan. "Download codebase" produces a ZIP and needs a paid plan. Either output is a normal project: npm install, then npm run build writes static files to dist/. Node 22. Environment variables prefixed VITE_ are baked in at build time, so treat them as public.

We cover both routes in detail in how to export Lovable code. For anything about your plan or the export button itself, check Lovable's documentation.

What survives the move to WordPress

The structural and visual layer survives well, because it has a direct equivalent in WordPress blocks and theme.json. A section with a grid of cards becomes columns and group blocks. A Tailwind type scale and palette become design tokens.

This is what comes across when a vibe-coded Lovable project is converted into a block theme:

• Layout: sections, grids and flex rows as columns blocks, cards, headings, paragraphs, lists and quotes.
• Design tokens: the Tailwind type scale and colors written into theme.json, plus Google Fonts.
• Media: images with their aspect ratios, copied into the theme, and the site logo.
• Navigation: header navigation, buttons, hover colors and a cart link.
• Content structures: page routes and titles, accordions, contact forms through Contact Form 7, product listings and pages through WooCommerce.
• Blog data: arrays that look like posts become real posts and categories with a query loop.
• SEO basics: per-page title and description from TanStack Start head() entries, written into Yoast, Rank Math or SEOPress, plus JSON-LD, redirects from public/_redirects, page language and hreflang.

What is approximated, and what is not converted at all

Some things have a near equivalent, so they come across close but not identical. Fixed-height cropped boxes, carousels, decorative div mockups, tabs, modals and dropdowns in their default state, animations in their final state, and definition lists. Responsive behaviour is approximated too: desktop values are kept, and WordPress stacks columns on mobile in its own way.

Other things have no equivalent in a static theme and are simply left out. Absolutely positioned decorations, video or audio without a static src, iframes, canvas, Lottie, custom React state and event handlers, Supabase, authentication, dashboards, API calls and third-party widgets. Open Graph tags and per-page meta from older React + Vite apps are not carried over either, because that data never existed in the markup.

This is the honest line in any vibe coding to WordPress move. The page survives. The app does not. If your project is a dashboard behind a login, the conversion reports those screens instead of converting them, and you rebuild that behaviour with WordPress plugins or custom code.

The full breakdown lives on supported features.

A practical route from vibe code to a live WordPress site

Here is the order we recommend. It works whether you convert by hand or with a tool.

Steps:

1. Export the project from Lovable: connect GitHub or download the ZIP on a paid plan.
2. Build it locally with npm install and npm run build to confirm the project is complete and the pages render.
3. List the interactive parts that cannot move: logins, dashboards, API-driven sections, third-party widgets. Decide for each whether to rebuild, replace with a plugin, or drop.
4. Convert the design into a block theme: templates, header and footer template parts, one pattern per page, theme.json for the palette and fonts, images inside the theme. Our converter at iqdesk.com/app does this from the ZIP or the repo in the browser, and the theme download is free.
5. Review page by page, ideally side by side with the original. The review screen runs both in WordPress Playground, and an AI fix agent can compare them and edit the theme; two AI fix attempts are included free.
6. Install the theme: Appearance → Themes → Add New → Upload Theme → Activate. Pages are created on activation and the front page is set.
7. Install the plugins you need: Contact Form 7 for forms, WooCommerce for products, and Yoast, Rank Math or SEOPress for SEO fields.
8. Check the settings: front page under Settings → Reading → "Your homepage displays", slugs per page, structure under Settings → Permalinks.

Keep your search visibility through the move

A vibe-coded site that was already indexed should not lose that. Two settings do most of the work.

While you are testing, tick "Discourage search engines from indexing this site" under Settings → Reading. Untick it before launch, or WordPress will keep the new site out of the index.

Then match the URLs. Lovable routes and WordPress slugs must line up, or set redirects where they do not. If you used public/_redirects in the Lovable project, those rules can carry over. Check each page has a title and a meta description in your SEO plugin; older React + Vite apps have none to import, so you write them once.

One structural upside: a WordPress page is server-rendered HTML for everyone. An older React + Vite Lovable app is client-rendered, and Lovable prerenders it on request only for verified search engines, link-preview bots and AI crawlers. That prerendering is part of Lovable hosting, so an older app moved to another host loses it. More on that in is Lovable good for SEO and Lovable hosting.

FAQ

Can you vibe code a WordPress site directly?

Not in the way you vibe code a React app. Tools like Lovable generate React and TypeScript projects, not PHP themes or block markup. The usual path is to vibe code the design, export the code, and then convert that design into a WordPress block theme.

Does a vibe-coded site keep its look after moving to WordPress?

The static layout and styling carry over well. Sections, grids, cards, typography, colors, fonts and images all have block or theme.json equivalents. Animations, carousels and interactive components are approximated or dropped, so expect to review each page.

What parts of a vibe-coded app cannot move to WordPress?

Anything that depends on running JavaScript logic. That includes custom React state and event handlers, authentication, dashboards, Supabase, API calls, iframes, canvas, Lottie and third-party widgets. You rebuild those with WordPress plugins or custom development.

Do I need a paid Lovable plan to convert my site?

Not necessarily. GitHub sync works on every Lovable plan, and the IQDesk converter accepts a GitHub repository as input. The ZIP download is the option that requires a paid Lovable plan.

How long does the move take?

The conversion itself runs in the browser and produces a downloadable block theme. The time goes into reviewing pages, installing plugins such as Contact Form 7 or WooCommerce, and rebuilding any interactive features that did not convert. A simple marketing site is much faster than an app with logged-in screens.

Keep reading