Add to Chrome — first conversion freeWhy this conversion is different
Trying to convert React by reading source files fails: JSX, CSS modules, styled-components and server components have no WordPress equivalents. The compiled, hydrated page does.
Next.js adds its own rendering details — the Image component's srcset markup, font optimisation, streaming server components. All of them resolve into ordinary HTML and CSS in the browser, and that resolved output is what gets captured.
Interactive state lives in JavaScript. A capture freezes one state, so decide what the default should be — which tab is open, which accordion item is expanded — before you convert.
How it works, step by step
1. Run a production build
next build && next start, or vite build && vite preview, or just your deployed URL. Dev servers inject HMR scripts and dev-only styles that must not ship in a theme.
2. Let it hydrate, set state, capture
Wait for hydration, scroll the full page so lazy components and intersection observers fire, choose the default state for interactive widgets, then click Generate theme.
3. Install and move data into WordPress
Upload the .zip and activate. Anything that was fetched client-side becomes WordPress content — posts, custom fields, or a menu.
What gets converted — and what doesn't
Converted
- The hydrated component tree as rendered HTML
- CSS modules, styled-components output, Tailwind and any CSS-in-JS
- next/font output and self-hosted or CDN web fonts
- next/image responsive markup and the underlying image files
- CSS animations, transitions and rendered motion end-states
Not converted
- React state, hooks and event handlers as behaviour
- API routes, server actions and server components' data logic
- Client-side routing — WordPress handles routing after conversion
- Data fetched at runtime, which becomes WordPress content
A real example
Before
A Next.js SaaS marketing site: hero, animated feature grid, pricing toggle, FAQ accordion, footer.
After
A WordPress theme with the hero and feature grid intact, pricing shown in the captured billing state, and the FAQ styled as rendered.
The production build is captured after hydration with the annual toggle active and the first FAQ item open, matching the intended default.
Benefits
- No rewrite of components into PHP templates
- The design keeps the exact spacing and motion the team shipped
- Works for React, Next.js, Remix, Vite, Gatsby and Astro islands alike
- Content moves to WordPress so marketing stops needing deploys
Limits to know before you start
- Interactivity ships as styled markup unless re-implemented
- One capture equals one UI state
- Authenticated app screens are out of scope; this is for marketing sites
Frequently asked questions
Can I convert a React website to WordPress?
Yes. Capture the production build after hydration and Themify packages the rendered DOM and CSS as a WordPress theme, so no component rewrite is needed.
Does Next.js image optimisation carry over?
The rendered srcset markup and the image files are captured. WordPress then serves them from the theme's assets folder.
Do React interactions still work?
Not as React. The captured state ships as static markup; re-add interactivity with WordPress-side scripts if you need it.
Should I capture the dev server?
No. Always capture a production build, otherwise HMR scripts and unminified dev styles end up in the theme.