How to Edit a Website Created with Claude

The afternoon disappears when you reach for a tool before you've worked out what Claude actually handed you. Someone tries to open a whole project as if it were a single page. Someone else re-prompts the chat for twenty minutes to nudge a heading that was sitting in a downloadable file the whole time.

"Claude made me a website" is one sentence doing three different jobs. Skip past which job yours is, and you'll spend that afternoon wrestling a tool that was never going to work. So sort that out first. Everything after depends on it.

which of the three do you actually have

One person means the panel that showed up inside the Claude conversation — the live preview you can scroll and re-open. That's an artifact. It lives in the chat.

Another means a file. They clicked download, and now there's a single .html sitting in a folder. Open it in a browser and the whole page is right there, styles and all, in one file.

The third used Claude Code and got a project — a folder of many files, probably React or Next, the kind of thing a developer runs with a build step. That's a codebase, not a page.

What you have	Where it lives	How you edit it
A Claude artifact	Inside the chat panel	Download it as HTML, then edit the file
A single .html file	One file on your computer	Open it in a visual editor
A Claude Code project	A folder of many files	Open it in a code editor / IDE

Here's the useful part. Two of those three collapse into the same job. An artifact and a downloaded file are both, in the end, one .html you can open and edit by hand. The third is a different animal, and I'll come back to it so you don't waste time on it.

get the artifact out of the chat

If your website is an artifact, you don't have to keep asking Claude to change things. You can pull it out.

If that artifact is an HTML page — the kind Claude shows as a live web preview — you can download it straight out of the chat as a single .html file. (Not every artifact is one. Claude also makes React components, SVGs, diagrams, and other code, and a React "website" downloads as component source rather than a ready-to-open page — which is really the multi-file case I come to at the end.) Once the HTML is a file on your computer, the chat is out of the loop — the page is yours, and you edit it like any other web page. This is the bit people miss. They sit in the conversation re-prompting "make the heading blue, no, darker, no, now move it left," when they could have downloaded the thing and nudged it directly in about ten seconds.

Re-prompting Claude to fix one typo is asking the whole song to be re-recorded because a single note landed flat. Sometimes you do need the studio. Usually you just want to punch in the one note.

open it and change what you want

Now you've got an .html file — a downloaded artifact, or a standalone page Claude Code handed you, doesn't matter which. Open it in something that shows you the page and the code together.

I built HTML Tweak for exactly this handoff. You open your .html file and the page shows on one side with its code on the other, kept in sync. Click a headline on the page and it highlights the matching line in the code — that's "click to locate." Change the text, swap a color, fix a broken link. In Chrome or Edge it saves straight back into the same file. In other browsers it hands you an edited copy to download instead.

Nervous about breaking the layout? There's a text-only mode that locks the structure so you can only touch the words. Change the copy, leave the design exactly where Claude put it. It's the mode I point non-coders to.

If you want the general version of this — any HTML file, not only ones Claude made — I wrote a plain step-by-step for editing an HTML file. And if you'd rather weigh a few editors before committing, I compared the free ones, including where they beat my own tool.

when it's a Claude Code project, this won't help

Now I have to be straight with you. Everything above is about a single .html file. If Claude Code built you a multi-file project — a folder with a package.json, a src directory, components split across files, a build step — none of it applies.

HTML Tweak opens one .html page. It is not a project manager and it is not a code editor. A React or Next project is a codebase, and a codebase needs a real editor — VS Code, or Claude Code itself, the thing that built it. Trying to open a whole project as one file just won't work, and I'd rather say that now than have you wrestle with it.

So how do you tell? Look at what you downloaded. One file ending in .html and you're in the right place. A folder full of files, or a .zip that unpacks into one, and that's a project — it goes to a code editor, not here.

chat panel, then a file on your disk

For an artifact or a single-file page, it's short.

1. If it's an artifact, download it as an HTML file from the chat.
2. Find the .html file on your computer.
3. Open it in a visual editor.
4. Edit on the page — text, colors, links — and use click-to-locate when you want to jump to the code.
5. Save. Chrome and Edge write back to the same file; other browsers download the edited copy.
6. Open the saved file in a browser to check it. Done.

No account, no rebuild, no going back to the chat.

the ones that cost people an hour

You nudge the preview in the chat, flip over to the file you downloaded, and it looks untouched — so you figure the save didn't take. It did. The artifact in the chat and the .html on your disk are two separate copies, and editing one never reaches the other. Once that clicks, the rest are easy to step around.

Forgetting which browser you're in. In Firefox or Safari, HTML Tweak can't write back into your original file, so it gives you a fresh copy each save. Nothing is lost, but you have to keep track of which copy is the current one. Chrome and Edge save in place, which is why I nudge people toward them for this.

Assuming a project opens as a page. This is the big one. If you've got a folder rather than a single .html, stop and open it in a code editor. Check file-or-folder before anything else.

Not keeping the original. Before you edit, stash a copy of exactly what Claude gave you. If an edit goes sideways, you want the untouched version to fall back on.

Artifact or file? Either way, if what you've got is a single page, this is a two-minute change and not a re-prompt. Open it in HTML Tweak and edit the page yourself — the version in the chat stays exactly where it is, and the file on your disk quietly becomes yours.