Edit website HTML code that syncs with the preview

Who it's for

Some people find it quicker to edit website HTML code than to click around a page: a developer fixing a dozen headings at once, a designer setting an exact hex value, someone who wants to see precisely what will ship. The Code tab has always shown the page's HTML. In Pro mode that view becomes editable, with the same line numbers and syntax colours, so reading and changing the code happen in one place.

How an edit reaches the page

Switch to Pro mode and open the Code tab (press 2 with Pro mode's shortcuts on).
Edit the HTML. A status line under the editor says "Editing… changes apply when you pause."
About three-quarters of a second after you stop typing, or straight away with Ctrl+S or Cmd+S, the edited page is checked for anything unsafe.
If it's safe, Anticode compares your page with the current one and maps the differences back onto the project, the same way the visual editor writes its changes.
The page is rebuilt from the project, the preview reloads, and Sentinel and the Critic run again. The status line lists what synced, for example a heading's new wording or a colour token's new value.

Edits flow the other way too: change text in the visual editor and the code view updates at once. Escape leaves the editor.

What maps back, and what doesn't

What a code edit can change in the project
Edit	Synced?	Notes
Text in headings, paragraphs, buttons, list items, FAQ answers	Yes	Each piece of text up to 400 characters, matched by its place in its section
Order of the sections between header and footer	Yes	Move a whole section's markup; dashboards keep a fixed order
Colour tokens in the stylesheet's :root	Yes	Only valid values for Anticode's named tokens are taken
Other markup, attributes and CSS rules	No	Flagged with the first line that can't sync, with a button to revert

That last row matters. The page is generated from the project each time, so a change the project can't hold, such as a new class or a different link address, would disappear on the next rebuild. Rather than let you think it worked, the editor marks the line and says plainly that other markup and CSS changes aren't kept. Revert to the synced page puts the code back to what the project builds.

What's refused, and why

Published Anticode pages run no JavaScript, and the editor holds that line before anything is applied. An edit is not applied at all if it adds:

a <script> tag;
an iframe, object, embed, frame, frameset or base tag, which can load other pages or code;
a meta refresh, which can send visitors elsewhere;
an inline event handler such as onclick;
a javascript: or vbscript: URL, or an HTML data: URL in a link or source;
script inside a style attribute, or an @import in the stylesheet.

The status line names the line and the reason, the offending lines are highlighted, and Undo my code edits restores the last good version. These are the same habits Sentinel looks for, refused at the moment of typing rather than at publish.

Limits

Pro mode only. In Simple mode the Code tab isn't shown; see Simple and Pro modes.
Design-engine pages. The two-way sync works on pages laid out by the design engine. Model-written apps are changed by asking in words.
Not a free-form HTML editor. For complete control over markup and CSS, export the code; the Next.js export or the single HTML file are yours to edit without limits.

Questions people ask

Why did my edit say it can't sync?

It changed something other than text, section order or :root colour tokens. The project can't hold that change, so it would vanish on the next rebuild. Revert it, or make the change another way.

Can I add analytics or a chat widget script?

No. Scripts are refused, because published pages run none. Anticode counts page views itself without cookies.

Do code edits use my build allowance?

No. They're applied by the design engine in your browser with no model call.

Are code edits saved?

Edits that sync are written to the project like any other change and appear in version history.