WP Next Editor is an open source visual WordPress website builder, built with TypeScript and Next.js as part of the wp-next project, with no PHP required.
If you have used builders like Webflow or Framer, the drag-and-drop workflow will feel familiar. It works as a visual website builder, while still covering the page builder workflow most users expect.
It also has AI support built in. Because every template is stored as structured JSON, you can use an agent skill to generate or modify templates from natural-language prompts — without touching the canvas at all.
This article is a quick feature tour. If you want to try the project, visit the GitHub repo, click star, and use the repo to get to the full documentation:
⭐ Star the repo on GitHub: https://github.com/rnaga/wp-next
1. Drag-and-drop canvas
Build pages visually by dragging, dropping, nesting, resizing, and moving elements on the canvas.
This is the main editing experience, and it feels close to the style of modern visual web builders.
2. Pan mode and scroll mode
Move around the canvas in pan mode, or switch to regular scroll mode.
Pan mode makes it easier to work on larger layouts, and it feels similar to how panning works in Framer and Figma.
3. Responsive design
Switch between desktop, tablet, and mobile, then set styles per device.
The editor generates the responsive CSS for you.
4. Animations
Add preset animations, custom keyframes, and interaction-based motion.
You can use this for hover effects, click effects, and more advanced motion.
5. Templates and widgets
Create templates, group them into collections, and reuse templates as widgets for headers, footers, and shared sections.
This is useful when you want reusable building blocks across multiple pages.
6. CSS Variables
Create reusable CSS variables and apply them from the Styles panel.
This helps when you want consistent colors, spacing, and design tokens across a template.
7. Custom code
Add custom HTML, CSS, or JavaScript to the page head or footer.
This is useful for analytics, custom styling, embeds, or external libraries.
8. Dynamic WordPress data
Bind posts, users, taxonomies, and other WordPress data to your page content.
This is useful for post lists, archive pages, and dynamic templates.
9. More than a visual builder
WP Next Editor also includes:
- JSON editor for direct template editing
- save history and preview flow
- publish and visibility controls
- widget variants
- path and query mapping for dynamic routes
- AI template generation — an agent skill that scaffolds or modifies templates from natural-language prompts
If you want the full setup guide, feature details, and usage docs, go to the GitHub repo first. You can star the project there and open the full documentation from the repo.
⭐ GitHub repo: https://github.com/rnaga/wp-next