Edit Visually. Store in Code.
A visual DOM tree that writes directly to your code. Drag and drop elements, edit classes with Tailwind autocomplete, and keep everything version controlled in Git. Code is the only source of truth.
The precision of code + the clarity of visual editing = no more guessing.
Visual Editing, Code Output
Every visual action writes clean code. No proprietary formats, no database bloat, no lock-in.
Drag and Drop
Reorder elements by dragging them in the tree. Drop before, after, or inside other elements. Changes are immediately written to your source code.
Tailwind Autocomplete
Full Tailwind CSS class suggestions with instant search. See color previews, CSS values, and add classes with keyboard shortcuts.
Git Version Control
Every change is stored in Git. Diff your layouts, revert mistakes, branch for experiments. Your structure is always recoverable.
Two-Way Code Sync
Click an element in the tree to jump to its code. Move your cursor in code to highlight it in the tree. Always know where you are.
Component Detection
Distinguishes between HTML elements and Astro components. Edit component props, extract new components, rename across your project.
Search and Filter
Instantly find elements by tag name, class, ID, or section name. Navigate large files effortlessly with breadcrumb trails.
Code is the Only Source of Truth
Unlike page builders that store layouts in databases, every visual change you make is written directly to your Astro code files.
Traditional Page Builders
- -Layout stored in proprietary database format
- -Changes hard to diff or review
- -Locked to the builder platform
- -AI can't reason about the structure
- -No proper version control
PhantomWP Visual Editor
- Layout stored as readable Astro/HTML code
- Git diff shows exactly what changed
- Portable - take your code anywhere
- AI understands and can modify your structure
- Full Git history, branches, and collaboration
Pro Features for Power Users
The visual editor includes advanced features that make complex editing tasks simple.
Loop Detection
Visualize .map() iterations
See your .map() loops visualized in the tree. Shows the iterable and loop variable clearly.
Conditional Detection
See && and ternary operators
Conditional rendering with && and ternary ?: operators shown in the tree.
Extract Component
One-click refactoring
Select any element in the tree and extract it to a new component. Automatically creates the file and updates imports.
Section Names
Label your structure
Add section names to elements for easy navigation. Stored as HTML comments that show in the tree.
Designed for Speed
Navigate and edit with keyboard shortcuts. Keep your hands on the keyboard, work faster.
Experience Visual Code Editing
See how the visual editor transforms the way you build Astro sites. All the clarity of visual editing, all the power of code.
Get Started