How To Edit AI Generated Code Without Breaking It

You want to change one line. The AI built you a page, it's nearly right, and one date is wrong.

You have two options and both feel risky. Ask the AI again, and it might hand back a page with a new layout and the bit you liked gone. Or open the file yourself and type, and risk deleting a bracket you didn't know mattered.

Here's the rule I work to. The safest way to edit AI generated code is by hand for words, numbers, links and colours, and through the AI for anything that changes the structure. Get that split right and you'll almost never break a page.

Below is exactly which parts of the file are safe to touch, a walkthrough on a translator's CV page built in Gemini Canvas, and the six small slips behind almost every hand edit that goes wrong.

You don't need to know how to code. You need to know where the edges are. If you're earlier in the process, the realistic guide to building a website with AI covers the whole journey from prompt to live page.

What Can You Safely Change By Hand?

Three things: the words between tags, anything inside quotation marks, and the value after a colon in the styles. Those three cover your name, your prices, your links, your image file names and your colours, which is most of what anyone wants to change.

An HTML file is mostly your content wrapped in labels. The labels are tags, like <h2> and </h2>, and they tell the browser what each piece is. If you've never looked inside one, what an HTML file actually is takes about five minutes and makes everything below easier.

The pattern is simple. If you only change what sits between the punctuation, you can't break the punctuation.

Two Habits Before You Touch Anything

Save a copy and use the right editor. Each takes a minute, and between them almost nothing you do is permanent.

Keep A Copy That Works

Before every editing session, duplicate the file and put the date and the word "works" in the name, like cv-2026-11-02-works.html. If an edit goes wrong, you delete the broken file and rename the copy.

Use A Plain Text Editor, Not A Word Processor

Word, Pages and Google Docs quietly swap straight quotes for curly ones and add hidden formatting. A browser can't read either. Use Notepad on Windows, TextEdit on a Mac once you've ticked "Display HTML files as HTML code" in its settings (otherwise it shows the page, not the code), or a free code editor like VS Code.

One more Windows trap: if file extensions are hidden, "Save as" can produce index.html.txt while showing you index.html. Turn extensions on in File Explorer's View menu before you save.

Editing A Translator's CV In Gemini Canvas

Here's a full round of edits on a typical one-page CV, the kind a freelance translator might build in Gemini Canvas in an afternoon. Ana translates Portuguese and Spanish into English, and her page has a short intro, her language pairs, a few past clients, her availability and an email button.

Canvas gives you two ways to edit, and both are useful. Google's help page confirms you can edit the code directly in the Code view, and there's a Select & ask option that lets you highlight part of the page and describe a change. Canvas saves automatically, and Show recent changes in the Code view lets you see what moved.

Five edits, and which route each one takes:

1. Availability date. "Available from March" becomes "Available from January". Find the words in the Code view, type over them. Text between tags, done by hand.
2. New email address. This is where half-edits happen. The button's visible text says one address, but the href="mailto:..." part says where it actually sends. Change both, or the button shows the new address and opens the old one.
3. A new language pair. Ana adds Japanese. Find the list line that holds "Spanish into English", copy that entire line from its opening tag to its closing tag, paste it underneath, and change only the words. Copying whole blocks is how you add things without touching tags.
4. Accent colour. If the style tag has a line like --accent: #1d4ed8; near the top, change the value there and every button follows. If the colour is repeated in ten places, don't hunt for them. Ask Canvas to move the colours into one variable first.
5. Move "Selected clients" above "Education". That's structural, so it goes back to the AI. Select the section, ask for the move, and say to change nothing else.

Four of the five are hand edits, each under a minute. The fifth is several minutes of careful cutting by hand, or one message to the AI.

When the page is finished, copy the whole file out of the Code view and save it as index.html in a plain text editor.

When To Edit AI Generated Code By Hand, And When To Ask The AI

Edit by hand when the change lives in one place and doesn't move anything. Ask the AI when the change touches the layout, a script, or more than three places in the file.

Hand it to the AI when you want to:

• Move, add or remove a whole section
• Change how something behaves when clicked
• Change anything that should look different on a phone
• Rename a colour, font or size that's repeated all over the file
• Fix something you can see is wrong but can't find in the code

When you do ask, paste the whole current file and ask for exactly one change, with an instruction to leave everything else alone. The change prompt in the six prompts I use for every AI site is the exact wording. While you're in there, run its check prompt too, because a fresh round of edits is a fresh chance for invented content to slip in.

Which Small Edits Break A Page?

When a hand edit breaks a page, it's almost always one of these six, and all six are about punctuation rather than content:

1. A deleted angle bracket or closing tag. Delete the > at the end of a tag and the browser treats everything after it as part of that tag. A chunk of the page can vanish.
2. Curly quotes. Pasting from a word processor turns " into ”. A link with curly quotes around its address stops working.
3. An unclosed quote. Delete one quotation mark in href="..." and the browser keeps reading until it finds another, swallowing whatever sits in between.
4. An apostrophe inside a script. If a script holds the text 'I'm available', the apostrophe in "I'm" ends the text early, and the whole script can stop. Any button that relied on it goes dead.
5. A missing semicolon in the styles. Delete the ; after a colour value and both that colour and the line after it get ignored. The page looks slightly off rather than broken, which makes it harder to spot.
6. The wrong file type. Saved as rich text or as .txt, the file opens in a browser as a wall of code instead of a page.

Number four catches people precisely because it's invisible. The page looks fine and one button does nothing.

How Do You Check An Edit Didn't Break Anything?

Open the edited file in your browser next to the copy that works, and compare them section by section. Then click every button and link near the part you changed. That takes a minute and catches most slips.

Two more checks for when something looks off but you can't see why.

Paste the file into the W3C validator. It reports unclosed tags and stray quotes with line numbers, which tells you where to look even if the wording of the error is technical. the W3C Markup Validation Service, free and run by the web's standards body

Or paste both versions into the chat and ask: "List every difference between these two files." It usually spots the deleted bracket straight away, and it doesn't change anything while it looks.

If the page is already online and broken in ways your edit can't explain, that's a different problem from a bad edit, and starting from the last working copy is usually the fastest way back.

What To Do Next

Make a dated copy of your working file now, before you change anything. Then go through your page and sort the changes you want into two piles: hand edits for words, links and colours, and AI requests for anything structural. Do the hand edits first, check them, save, then send the AI requests one at a time.

Where you edit after launch depends on your host. On Netlify, Cloudflare Pages or GitHub Pages you usually edit the file on your computer and upload it again, which works fine. OxyPages has a code editor with a Code tab you can type in, an AI chat beside it, and a session history that restores any earlier state from that session if an edit goes wrong. It edits static files only, so it can't add a database or server code to your page. When your edits are done, upload the finished file and get a live link and click through it once more on the live address.