How to use VisualEdit

Edit your local website visually in Chrome. Every change is written into your project files.

What you need

Google Chrome with the VisualEdit extension.
Node.js, the current LTS version (20.12 is the minimum). Install it once; most developers already have it.
A website project on your computer that you open on localhost: plain HTML and CSS, or React with Vite (Tailwind CSS v4 or plain CSS).

Every time you edit

Start the helper in your project folder. Open a terminal in the folder of your project and run npx visualedit-agent. Keep that window open while you edit. It edits the project of the folder it was started in.
Open your site. Start it the way you always do (for example VS Code Live Server or npm run dev) and open its localhost address in Chrome. A plain HTML project with no server yet: in a second terminal in the same folder run npx http-server -c-1 and open the address it prints. So you have two terminal windows open: the helper and your site.
Open the side panel. Click the VisualEdit icon in Chrome's toolbar. The first time, read the short notice, tick the box to agree to the Terms and the Privacy Policy, and press I understand. The panel shows a green dot and your project's name when the helper is running.
Select an element. Turn on Select at the top of the panel and click anything on your page.
Change it.
- Properties: change colours, sizes, spacing, fonts, borders and more by hand, then press Save. Unlimited and free.
- Chat: describe the change in plain words, for example "make this button green and a little bigger". The AI writes it for you.
- Tree: see the structure of your page and pick the exact element you want.
- The + button in Properties adds a new element (a heading, text, a button, a picture...) next to or inside the selected one.
See the result. The change is written into your files right away and your page updates.
When you are done, press Ctrl+C in the terminal to stop the helper.

Undo and safety

Undo and Redo at the top of the panel step through your changes. Revert all puts every file back as it was when you started the helper.
Git is not required. If your project is a git repository, VisualEdit also commits each change (the message starts with VisualEdit:), so you can review or undo it later with your usual git tools.
For an important project, keep a copy or use git, as you would with any tool that writes your files.

Git (optional, recommended)

Git is a free tool that keeps a history of your project. You do not need it to use VisualEdit, but with it every change can be reviewed and taken back at any time, even after VisualEdit is closed.

If your project is already in git: VisualEdit saves each change as its own commit, with a message that starts with VisualEdit:. It only commits the files it wrote, so your own unfinished work is left alone. See what it did with git log. Take one change back with git revert <commit>.

If your project is not in git yet, to start using it:

Install git once (on Windows, the installer's default choices are fine). Check it with git --version in a terminal.
Tell git who you are, once: git config --global user.name "Your Name" and git config --global user.email "you@example.com".
In your project folder run: git init, then git add ., then git commit -m "First version". This saves your project as it is now, before any VisualEdit change.
Restart the helper (npx visualedit-agent) in that folder. The panel now tells you the project uses git.

To keep a copy online (optional): create a free account on GitHub, create a new empty repository there (private if you like), and GitHub shows two commands to copy: git remote add origin <the address> and git push -u origin main. Run them in your project folder. After that, send your changes any time with git push.

If you do not want any commits from VisualEdit, simply do not use git in that folder: Undo and Revert all keep working without it.

Free and Pro

Editing by hand (Properties, Tree, adding, moving, deleting) is always free and unlimited.
Pro includes 3,000 AI requests every month. Your month starts on the day you pay, not the day you enter your key, so entering it later does not add days. Pro renews automatically every month until you cancel; after cancelling you keep Pro until the end of the month you paid for. The Account panel shows how many days are left.
The Free plan includes 30 AI requests in total. You can see how many are left under the chat box and in the Account panel (the person icon).

If something does not work

"Agent offline": the helper is not running. Start npx visualedit-agent in your project folder again; the panel finds it within a few seconds.
"This page doesn't look like the project...": the open page belongs to another project than the one the helper was started in. Open that project's site, or start the helper in this page's folder.
A certificate error when you run npx visualedit-agent (the message mentions certificate or UNABLE_TO_VERIFY_LEAF_SIGNATURE): this is common with antivirus, VPN or office networks. In PowerShell run $env:NODE_OPTIONS="--use-system-ca" (on Mac and Linux: export NODE_OPTIONS=--use-system-ca), then run npx visualedit-agent again in the same window. This needs Node.js 22.15 or newer; with an older Node.js, install the current LTS first.
EADDRINUSE or "address already in use": another server is still running on that port, often an old terminal window. Close it with Ctrl+C, or start your site on another port, for example npx http-server -p 5501 -c-1.
The file changed but the page still looks the same: the browser is showing an old copy of your CSS. Press Ctrl+Shift+R on the page. If you use http-server, start it with -c-1 so it never asks the browser to keep old copies.
"Element not found in the source file": the page is out of date or comes from another folder. Reload the page and select the element again.
The AI did not change what you expected: the AI changes only the selected element. Select the right one (the Tree tab helps) and describe the change again.
"The free AI is at capacity right now": try again later. Editing by hand still works.

Privacy

The extension only works on localhost pages. Only an AI command sends something out: your command and the code of the selected element. Read the Privacy Policy.

Help

Write to visualedithelp.support@gmail.com. The Account panel has a Support link that fills in your Support ID for you.