A dependency-free engine that replays real, syntax-highlighted source one keystroke at a time — autocomplete popovers, pasted secrets, a live gutter and status bar — then hands the last character to a shell that runs it. Everything on the right is the DOM, typing itself, right now.
3 files Pick a tab to run another scene — it restarts cleanly, mid‑keystroke.
<script> tag and you're done.
Capabilities
Six behaviours a screen recording can't give you.
Every frame here is live DOM: real text, real colours, selectable, searchable, and sharp on any display. That opens up six things a recording physically cannot do.
Most typewriter effects print plain text and colour it afterwards. This one walks the
highlighted markup itself — opening each token span, then filling it character by
character. const is orange from its very first letter.
Give a token a list of candidates and the one it should land on. A popover opens at the caret, scrolls past the wrong guesses one at a time, then accepts the right one — the exact rhythm of an editor reading your mind a beat too slowly.
Tag a token with data-paste and it lands whole, in a single frame, with the
column counter jumping to match. The small honesty that keeps the whole performance
believable.
Rows fill in as the caret crosses each newline; the rest hold vim's -
placeholder. The row count is measured from the container at construction, so the gutter
fits whatever height you hand it.
Mode, filename, line and column all read from the same cursor the typing runs on. Nothing is hardcoded — scrub the speed and the numbers stay honest.
When the last character lands, the terminal picks up the beat: commands type at shell cadence, output streams in line by line. One continuous performance from first keystroke to exit code.
How it works
Markup in, performance out. Three moves, no configuration file.
There is no timeline to author and no keyframes to sync. You paste in the highlighted HTML you already have, flag the two or three tokens that deserve special treatment, and the engine derives the whole performance from it.
Drop in the syntax-highlighted HTML you'd get from Prism, highlight.js, or copy-with-formatting out of your own editor. Nothing about it is special — it renders as a normal, readable code block with JavaScript switched off.
On construction it lifts that markup out of the <pre>,
blanks the element, and walks the source one character at a time — telling tag syntax
from text, rebuilding each span the moment it closes, decoding entities as single
keystrokes, and stopping on the tokens you flagged to run a paste or an autocomplete.
Every line in the console block is replayed in order: command lines type at shell cadence, output lines simply appear. When the last one lands the sequence rests, then rolls into the next file — indefinitely, and only while it's on screen.
<pre class="actual-code" id="CodeToAnimate"> <span class="token keyword">const</span> stripe = require('stripe')(<span class="token string" data-paste="'sk_test_BQokik…'">'sk_test_BQokik…'</span>); <span class="token keyword">await</span> stripe.<span data-has-options="average,random,paymentIntents" data-find-option="paymentIntents">paymentIntents</span> </pre> <div class="console"> <div class="single-line command-input"> <span class="command">node server.js</span> </div> </div>
Integrate
One constructor, five options, three attributes. That's the whole surface.
The entire public API is a constructor, .start()
and .stop(). Everything else is
expressed in the markup, where it belongs — and the file that runs this page is the same
one you would drop into yours.
<script src="TypeWritter.js"></script> <script> const tw = new TypeWritter('#CodeEditor', { typeSpeed: 100, typeSpeedOffset: 50, optionNextDelay: 200, codeLineHeight: 18 }); tw.start(); </script>
Options
| Option | Default | What it controls |
|---|---|---|
typeSpeed | 100 | Upper bound of the random delay added to each keystroke, in milliseconds. |
typeSpeedOffset | 50 | The floor under that random delay, so no character ever appears instantly. |
optionNextDelay | 200 | How long the autocomplete popover dwells on each wrong suggestion before moving on. |
codeLineHeight | 18 | Line height used to work out how many gutter rows fit the container. |
scenes | — | Optional list of files to cycle through, each with its own markup and shell
transcript — what drives the three tabs above. Leave it out and the engine
animates whatever markup the <pre> was authored with. |
Markup attributes
| Attribute | Goes on | Effect |
|---|---|---|
data-paste | any token span | Inserts the whole value in one frame instead of typing it, then continues. |
data-has-options | any token span | Comma-separated candidates to show in the autocomplete popover. |
data-find-option | alongside the above | The candidate it scrolls to and accepts. Must match the span's own text. |
.command-input | a console line | Marks a shell line to be typed. Every other line simply appears. |
Where it fits
Anywhere a developer needs to understand something in four seconds.
The first screen of a developer tool, showing the shortest path from install to result.
Docs that demonstrate the happy path before asking anyone to copy anything.
Screen-record the page at any resolution — the type is vector-sharp at 4K.
A slide that writes its own example while you talk over it, at a speed you set.
Walk a new user through the first API call without them touching a keyboard.
Show the diff behaving, not a still of it, next to the release note.
Colophon
This page wears the editor's theme. Every hue keeps the job it has in the code.
Type is Archivo, driven along its width axis — headlines run expanded and heavy, body copy sits at normal width — with JetBrains Mono carrying every machine voice: labels, the gutter, the status bar and the shell.
Available for new work
This engine started as one section of one client's homepage — a brief that said "like Stripe, but ours." It became a reusable piece of interface machinery, and it still runs everywhere it was installed. If you have a front-end that needs to feel alive — animation systems, product demos, design-led marketing sites, interfaces with real motion design behind them — that's the work I want.