Live code edit

Use it for

• Developer tool heroes that show a change being made
• Docs or changelogs explaining a config or API change
• Showing what an AI agent or code mod edits in a file

Avoid

• Code people need to copy, use a real code block
• Large diffs, the typing gets slow past a few lines

How it works

An edit index and a phase (mark, collapse, type, rest) drive the file, which is rebuilt from the start document by applying earlier edits, so state changes only once per phase. Each row is a one track grid that collapses from 1fr to 0fr, and line numbers are counted at render so they shift as rows close and open. New lines type with a width animation in ch units using steps() in a monospace face, then flash; a CSS variable holds each line's start time so lines type one after another.

Accessibility

The code area is role img with a label naming the current edit and its new lines, and the status bar shows the edit as text. Replay is a real button. Reduced motion shows the finished file with the last edit marked, with no typing, collapsing or blinking caret.