Editing with AI

The AI editor lets you modify your website by describing what you want in plain English. Instead of searching through files and editing code, you type a request in the chat panel — "Add a pricing section to the home page" or "Change the background color to dark navy" — and the AI makes the changes and verifies everything still works. This page explains how to use the AI editor and how to get the best results.

The Chat Interface

The chat panel sits on the left side of the workspace. At the bottom is a text input where you type your editing requests. Above it, you see the conversation history — your messages and the AI's responses, including descriptions of what changes were made.

To make a change:

1. Type your request in the chat input
2. Press Enter or click the send button
3. Watch the progress indicators as the AI works
4. Review the changes in the live preview

The AI shows step-by-step progress as it works. When it finishes, the live preview updates automatically to show the result.

Conversation Context

The AI remembers your previous messages in the current session. This means you can build on earlier requests:

• "Add a testimonials section to the home page"
• "Make the testimonials use a carousel instead of a grid"
• "Add star ratings to each testimonial"

Each follow-up request understands the context of what came before, so you can iterate quickly without repeating yourself.

What the AI Can Do

Read and Navigate Your Project

Before making changes, the AI reads the files it needs to understand. You do not need to tell the AI which file to edit — it figures that out from your description. If you say "change the hero section background," the AI identifies which file contains the hero section and opens it.

Edit Content and Layout

The AI can create new files, modify existing ones, and remove files that are no longer needed. It can make targeted changes to specific sections without affecting the rest of your site.

Update Theme and Styling

The AI can change your site's visual theme across all pages at once:

• Colors — Primary, secondary, accent, background, and text colors
• Typography — Font families and sizes
• Spacing and layout — Section padding, container widths, and grid configurations

Install New Features

If your request requires additional functionality — for example, adding a date picker, a charting library, or an animation library — the AI can add it to your project and write the code that uses it.

Auto-Fix Errors

When the AI makes changes that cause an error, it automatically detects the problem and attempts to fix it. This cycle repeats until the issue is resolved or the AI reports what needs manual attention.

Effective Editing Requests

The AI works best when your requests are clear and specific. Here are patterns that produce reliable results:

Content Changes

• "Change the hero headline to 'Transform Your Business with AI'"
• "Update the about page to mention that we were founded in 2018"
• "Replace the placeholder phone number with (555) 123-4567"

Layout Changes

• "Add a testimonials section below the features section on the home page"
• "Move the pricing section above the FAQ section"
• "Make the team grid show 4 columns instead of 3"

Style Changes

• "Change the primary color to dark blue"
• "Make the navbar sticky so it stays at the top when scrolling"
• "Use a dark background for the footer"
• "Increase the font size of the hero headline"

Structural Changes

• "Add a new page called Blog with a grid of article cards"
• "Split the Services page into two pages: Web Development and Mobile Development"
• "Add a sidebar navigation to the documentation page"

Component Changes

• "Add a newsletter signup form to the footer"
• "Replace the feature list with a feature grid that has icons"
• "Add a back-to-top button that appears when scrolling down"

Multiple Changes

You can request multiple changes in a single message:

"On the home page: make the hero section full-height, add a gradient overlay to the hero image, change the CTA button text to 'Get Started Free', and add an animated scroll indicator at the bottom of the hero."

The AI handles all changes together and validates the result at the end.

Iterating on Changes

One of the most effective ways to use the AI editor is iterative refinement. Start with a broad request, then follow up with specific adjustments:

1. "Add a pricing section with three tiers"
2. "Change the tier names to Starter, Professional, and Enterprise"
3. "Add a 'Most Popular' badge to the Professional tier"
4. "Make the pricing cards have a hover effect with a subtle shadow"

Each step builds on the previous one, so follow-up requests are fast and precise.

Reviewing Changes

After the AI makes changes, you can review them in several ways:

• Live preview — The preview updates automatically. Check the visual outcome on different viewport sizes (desktop, tablet, mobile).
• Code editor — Open the modified files to inspect the exact changes.
• Undo — If a change does not look right, use Cmd/Ctrl + Z to revert and try a different request.

Troubleshooting

AI Made Incorrect Changes

If the AI changed something you did not intend:

• Undo — Press Cmd/Ctrl + Z to revert the change
• Be more specific — Rephrase your request with more detail about exactly what to change and where
• Reference the page — Mention the specific page name: "On the About page, change..." instead of just "Change..."

AI Says It Cannot Make a Change

Some requests may be too vague or too complex for a single edit:

• Break it down — Split large requests into smaller, sequential steps
• Provide more context — Tell the AI what the current state is and what you want it to become
• Edit manually — For very specific code changes, use the code editor directly

Changes Broke the Preview

If the preview shows an error after an AI edit:

• Wait for auto-fix — The AI automatically detects and repairs most build errors
• Ask the AI — Type "fix the error" or paste the error message into the chat
• Undo — Revert to the previous working state and try a different approach
• Check version history — Roll back to a saved version if multiple changes have accumulated

Limitations

• Complex animations — The AI can add basic transitions and animations, but highly custom sequences may need manual coding
• Large-scale restructuring — Requests like "completely redesign the entire site" work better as a series of page-by-page changes
• Pixel-perfect matching — Describe specific visual properties (colors, sizes, spacing) for the most accurate results