The typing code editor is the hero animation on developer-tool and API sites: a realistic editor window types out a snippet character by character, with syntax highlighting appearing as it goes, a blinking caret, and a human typing rhythm — then it loops. This snippet builds it with plain HTML, CSS, and vanilla JavaScript, including a tiny live tokenizer so the colors show up as you type rather than after.

A convincing editor chrome

The window has the familiar trappings: a title bar with red, yellow, and green traffic-light dots and a file name, over a dark code area in a monospace font. These details sell the "real editor" illusion cheaply — no library, just styled divs. The code area uses white-space: pre-wrap so indentation and line breaks in the source are preserved while still wrapping on narrow screens.

Live syntax highlighting

The clever part is that highlighting is applied to the text typed so far on every keystroke, not bolted on at the end. A lightweight highlight() function runs a series of regex replacements — escaping HTML first, then wrapping comments, keywords, numbers, and function names in colored <span>s. Because it runs on CODE.slice(0, i) each tick, partial tokens get colored the moment they are completed, so the snippet appears to highlight itself in real time. The token classes map to a familiar editor palette (red keywords, purple functions, blue strings and numbers, muted italic comments).

A human typing cadence

Robotic, perfectly even typing looks fake. The loop varies each character delay between roughly 28 and 68ms with Math.random(), and pauses longer (220ms) after a newline — mimicking how a person hesitates at the end of a line. This irregular rhythm is what makes the animation feel like someone is actually typing rather than a fixed teleprinter.

The blinking caret

A caret element sits after the code and blinks via a CSS steps(1) animation, which produces the hard on/off blink of a real text cursor rather than a smooth fade. It stays at the end of the typed text because it follows the code in the DOM, so it naturally tracks the typing position.

Looping

When the snippet finishes, the code holds on screen for a couple of seconds so it can be read, then clears and restarts — an endless demo loop. The whole cycle is driven by chained setTimeouts rather than a fixed interval, which is what allows the per-character delay to vary.

Customizing it

Replace the CODE lines with your own snippet (escape backslashes in the string), extend the highlight() regexes for more languages or tokens, tune the typing speed and the line-break pause, change the editor colors and file name, or remove the loop to type once. Pair it with a container scroll reveal of your product or a terminal window for a developer-focused hero.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Instead of untangling the regex chain by hand, paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly why highlight() re-tokenizes the full CODE.slice(0, i) substring on every single character rather than just appending the new character, and what that implies for longer snippets. It's a good optimization target too — ask whether re-running five chained regex replacements per keystroke becomes a real cost once CODE grows to a few hundred lines, and what a cheaper incremental approach would look like. For extending it, have it add support for a second language with its own keyword set, a realistic typo-and-backspace-correction cadence instead of pure forward typing, or a mode where multiple files/tabs type in sequence with a tab-switch animation between them. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build an auto-typing code editor mockup in plain HTML, CSS, and vanilla JavaScript with no libraries and no real syntax-highlighting package.

Requirements:
- A window styled like a code editor: a title bar with three colored traffic-light dots and a filename, over a dark monospace code area using white-space: pre-wrap so indentation and line breaks are preserved while still wrapping on narrow screens.
- Store the full source snippet as a single string with real newlines.
- Write a small highlight(src) function that first HTML-escapes ampersands and angle brackets, then applies a fixed sequence of regex replacements that wrap line comments, a specific set of keywords, numeric literals, and known function names each in their own colored span — order matters so comments are protected before keyword matching runs.
- Drive typing with a recursive function (not setInterval) that increments a character counter, re-runs highlight() on the substring from the start up to that counter, and writes the resulting HTML into the code element every tick.
- Vary the delay between characters randomly within a range (roughly 28 to 68ms) to avoid a mechanical, perfectly even typing rhythm, and use a distinctly longer pause specifically after a newline character to mimic a person pausing between lines.
- Add a caret element after the code that blinks using a hard CSS step animation (not a smooth opacity fade), so it looks like a real text-cursor blink.
- When the full snippet has been typed, hold it on screen for a couple of seconds, then clear the code area and restart the typing loop from the beginning, so the whole demo repeats forever without user interaction.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

1
Paste HTML, CSS, and JSAn editor window types out a code snippet on its own.
2
Watch it highlightSyntax colors appear as each token is completed.
3
Note the cadenceTyping speed varies and pauses at line breaks.
4
See the caretA blinking cursor tracks the typing position.
5
Wait for the loopIt holds, clears, and types again.
6
Swap in your codeReplace the CODE lines with your snippet.

Real-world uses

Common Use Cases

Dev-tool heroes

Type code above a container scroll reveal.

API documentation

Demo a request beside a code block.

Landing demos

Pair with a terminal window.

Onboarding

Show a first snippet in a tour step.

Feature explainers

Animate usage in a feature tabs showcase.

Typing effect demos

A reference for live-highlighted auto-typing.

Got questions?

Frequently Asked Questions

The highlight function runs on the text typed so far — CODE.slice(0, i) — on every keystroke, escaping HTML and then wrapping comments, keywords, numbers, and function names in colored spans via regex. Because it re-tokenizes the partial text each tick, tokens get colored the instant they are completed, so the snippet appears to highlight itself in real time rather than after finishing.

Each character delay is randomized between roughly 28 and 68 milliseconds, and the loop pauses longer after a newline, mimicking how a person hesitates at the end of a line. That irregular rhythm avoids the robotic, perfectly even cadence of a fixed interval and reads as someone actually typing.

The caret animation uses steps(1), which switches opacity on and off abruptly rather than fading. That produces the hard on/off blink of a real text cursor. The caret follows the code in the DOM, so it naturally sits at the end of the typed text and tracks the typing position.

Yes. The highlighter is a small set of regex replacements, so you can add rules for more keywords, operators, types, or another language. Keep the HTML-escaping replacement first so angle brackets render safely, then order your token rules from most to least specific to avoid double-wrapping.

Keep the typed length in a ref and drive the chained setTimeout loop in a mount effect with cleanup that clears the timer on unmount. Render the highlighted HTML into a ref'd element (or sanitize and use dangerouslySetInnerHTML / v-html) rather than state to avoid re-rendering every character. For production, consider a real highlighter like Shiki or Prism instead of the demo regexes.

Loading…