[{"data":1,"prerenderedAt":31},["ShallowReactive",2],{"i-lucide:grip":3,"i-lucide:chevron-right":8,"i-lucide:moon":10,"i-lucide:sun":12,"i-lucide:languages":14,"i-lucide:chevron-down":16,"i-lucide:shield-check":18,"i-lucide:mail":20,"blog-body-ai-html-visual-cowriting-en":22,"i-lucide:lightbulb":23,"i-lucide:code":25,"i-lucide:pen-tool":27,"i-lucide:mouse-pointer-click":29},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"12\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"12\" cy=\"19\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"19\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"19\" r=\"1\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m9 18l6-6l-6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"4\"\u002F>\u003Cpath d=\"M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":15},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m5 8l6 6m-7 0l6-6l2-3M2 5h12M7 2h1m14 20l-5-10l-5 10m2-4h6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":17},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m6 9l6 6l6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":19},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\"\u002F>\u003Cpath d=\"m9 12l2 2l4-4\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":21},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7\"\u002F>\u003Crect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"\u002F>\u003C\u002Fg>","\u003Cblockquote>\n\u003Cp>When you edit a webpage, source in chat cannot show box model and wrapping. Do not dump the whole page on AI for another generation. \u003Cstrong>Have it write into the page you are already previewing; you click-tweak after you see the render.\u003C\u002Fstrong> Hands for small edits; the assistant for structure.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fai-html-visual-cowriting\u002Fcover.webp\" alt=\"Core argument illustration\">\u003C\u002Fp>\n\u003Ch2>Why does editing HTML in chat take so many pastes before layout looks right?\u003C\u002Fh2>\n\u003Cp>Because what the browser renders (wrapping, spacing, mobile width) cannot be “seen” from source characters. Each time the model hands you a full HTML file, you can only replace the whole page and then hunt for diffs. Colors, images, and the heading you already liked can vanish in “another version.”\u003C\u002Fp>\n\u003Cp>Smaller edits should not go back to chat at all. A button label, an image swap, deleting an extra block — click once on the rendered page. That half is already written: \u003Ca href=\"\u002Fblog\u002Fp\u002Fedit-ai-html-no-code\u002F\">Do I have to re-prompt to change a word on an AI-generated page?\u003C\u002Fa>. This article is the other half: \u003Cstrong>structure still needs a large change\u003C\u002Fstrong> — add a section, change nav, split pages, unify CSS. That is when your current assistant belongs on the same canvas, not in a new generation session.\u003C\u002Fp>\n\u003Cp>Cowriting on a webpage is concrete: the assistant writes files; you see a preview; words you click-edited on the canvas should be in the entry file the next time it is read. If each side edits a different copy, you get two pages.\u003C\u002Fp>\n\u003Ch2>How do I let AI write this page without wiping what I already clicked?\u003C\u002Fh2>\n\u003Cp>Open the \u003Ca href=\"\u002Fhtml\u002Feditor\u002F\">visual HTML editor\u003C\u002Fa>, load existing HTML or start blank, turn on Connect your AI, keep the tab open. The assistant should list files first, then read the entry page (usually \u003Ccode>index.html\u003C\u002Fcode>). Entry content comes from \u003Cstrong>the current preview\u003C\u002Fstrong>, so a heading you just click-edited is already in the file.\u003C\u002Fp>\n\u003Cp>One round can look like this — AI speeds adding a section; you steer titles and spacing on the canvas:\u003C\u002Fp>\n\u003Cp>\u003Cstrong>You:\u003C\u002Fstrong>\u003Cbr>\nUnder the first screen, add a section with three traits: Fast, Clear, Reversible. Do not change existing colors. Write it to the current page; I will click-tweak against the preview.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Assistant:\u003C\u002Fstrong>\u003Cbr>\nWritten to the homepage. Check whether the three cards crowd each other on the canvas — change a title by clicking; you do not need me to regenerate the whole page.\u003C\u002Fp>\n\u003Cp>Do not imagine the layout — chat on the left, an arrow to the visual editor on the right, the three traits already on the canvas:\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fai-html-visual-cowriting\u002F02-ai-flow.en.webp\" alt=\"Chat on the left, MeTool HTML page on the right showing three trait cards\">\u003C\u002Fp>\n\u003Cp>If a title is one word off, click it. If structure still needs a large change, have the assistant write in few batches. Cowriting here is speeding production and steering details on the same canvas. Setup: \u003Ca href=\"\u002Fblog\u002Fp\u002Fconnect-ai-to-online-tools\u002F\">How do I let my current AI operate a web tool?\u003C\u002Fa>. Concept: \u003Ca href=\"\u002Fblog\u002Fp\u002Fhuman-ai-cowriting\u002F\">What is human–AI cowriting?\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>When writing files, remember one engineering limit: \u003Cstrong>every write reloads the preview and clears undo history.\u003C\u002Fstrong> “Turn the footer into three columns and unify button color” in the same round should be few edit\u002Fwrite calls, not one transfer per color. Fine click-edits come after the assistant’s round.\u003C\u002Fp>\n\u003Cp>Going from a single page to a small site is also one write: after adding \u003Ccode>about.html\u003C\u002Fcode> or \u003Ccode>css\u002Fstyle.css\u003C\u002Fcode>, the current document sits next to \u003Ccode>index.html\u003C\u002Fcode> and project mode opens. Text files (html\u002Fcss\u002Fjs\u002Fsvg\u002Fmd and similar) are read-write; images and fonts you uploaded are read-only — bytes do not go to the model over the relay. A single text file over the relay should stay under about \u003Cstrong>180 KiB\u003C\u002Fstrong>. No remote delete or rename — delete files on the page yourself.\u003C\u002Fp>\n\u003Cp>You can say:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>“Pull repeated styles into css\u002Fstyle.css; keep only structure on the homepage.”\u003C\u002Fli>\n\u003Cli>“Using the copy now on the canvas, only fix mobile spacing.”\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Which edits should I click, and which should the connected AI do?\u003C\u002Fh2>\n\u003Cp>If you can point at it on the canvas, click. If you must change structure and multiple files, hand it to the assistant.\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>What you want\u003C\u002Fth>\n\u003Cth>Better fit\u003C\u002Fth>\n\u003Cth>Why\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>Heading, image swap, delete a block, type size\u003C\u002Ftd>\n\u003Ctd>Canvas click\u003C\u002Ftd>\n\u003Ctd>Seconds, does not clear whole-page undo\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Add a section, change nav information architecture\u003C\u002Ftd>\n\u003Ctd>Connected AI, few writes\u003C\u002Ftd>\n\u003Ctd>Source-level structure\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Split pages, extract CSS\u003C\u002Ftd>\n\u003Ctd>AI writes new paths\u003C\u002Ftd>\n\u003Ctd>Enters a multi-file project\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>A poster-style full-page screenshot\u003C\u002Ftd>\n\u003Ctd>Export screenshot on the page\u003C\u002Ftd>\n\u003Ctd>No need to send an image through chat\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Generate a completely different page from scratch\u003C\u002Ftd>\n\u003Ctd>New generation, then import here\u003C\u002Ftd>\n\u003Ctd>Cowriting is “this draft,” not “any new draft”\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>Boundaries: closing the tab disconnects. Do not let the model invent binary image paths it has not seen. Screenshots and source download locally; what MCP returns is not file bytes. Complex front-end framework repos (build chains, node_modules) are not this page’s target — this is a canvas for a single page or a small static site.\u003C\u002Fp>\n\u003Ch2>Wrap-up\u003C\u002Fh2>\n\u003Cp>Letting AI change a webpage means swapping “invisible source round-trips” for “write into the current preview.” Do not dump the whole page back on a large model to regenerate alone. Click small edits; batch large ones into few writes, because a remote write clears undo. Images stay read-only in the browser; what you take away is a source pack or a screenshot. Click-edits you already like can coexist with cowriting — the grain size is different.\u003C\u002Fp>\n",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":24},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 14c.2-1 .7-1.7 1.5-2.5c1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5c.7.7 1.3 1.5 1.5 2.5m0 4h6m-5 4h4\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":26},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m16 18l6-6l-6-6M8 6l-6 6l6 6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":28},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z\"\u002F>\u003Cpath d=\"m18 13l-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18M2.3 2.3l7.286 7.286\"\u002F>\u003Ccircle cx=\"11\" cy=\"11\" r=\"2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":30},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 4.1L12 6M5.1 8l-2.9-.8M6 12l-1.9 2M7.2 2.2L8 5.1m1.037 4.59a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z\"\u002F>",1788171086518]