webdevpuneet.com

Related Snippets

63 in Heroes category
34–39 of 60

Developer Hero with Typing Code Window

Hero with Animated Stat Counters

Product Launch Countdown Hero

Hero with Animated Scroll Cue

Hero with 3D Tilting Product Mockup

Before/After Hero with Comparison Slider

Developer Hero with Typing Code Window — Free HTML CSS JS Snippet

Developer Hero with Typing Code Window · Heroes · Plain HTML, CSS & JS · Live preview

CategoryHeroes
TagsCSS AnimationDeveloper ToolsLanding Page

Copy & paste

Source Code

<section class="cwh-hero">
  <div class="cwh-copy">
    <span class="cwh-eyebrow">Built for developers</span>
    <h1 class="cwh-h1">Ship APIs your<br>team actually enjoys</h1>
    <p class="cwh-sub">Type-safe, self-documenting, and fast to integrate. Watch the SDK write itself below.</p>
    <a href="#" class="cwh-cta">Read the docs</a>
  </div>

  <div class="cwh-window">
    <div class="cwh-topbar">
      <span class="cwh-dot cwh-dot-r"></span>
      <span class="cwh-dot cwh-dot-y"></span>
      <span class="cwh-dot cwh-dot-g"></span>
      <span class="cwh-filename" id="cwhFilename">client.ts</span>
    </div>
    <pre class="cwh-code"><code id="cwhCode"></code><span class="cwh-cursor" id="cwhCursor"></span></pre>
  </div>
</section>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Real char-by-char typing
Driven by a recursive setTimeout chain, not CSS steps().
Tag-safe HTML reveal
htmlUpTo() never renders a broken half-tag mid-type.
Syntax-colored tokens
Keywords, strings, functions, comments pre-marked up.
Type -> pause -> erase -> next loop
A genuine stateful cycle through multiple snippets.
Randomized typing rhythm
Per-character delay varies for a human feel.
Live filename tab
Updates to match the snippet currently typing.
Editor chrome
Three-dot topbar sells the real-window framing.
No dependencies
Pure vanilla JS, no highlighter library.

About this UI Snippet

Developer Hero with Typing Code Window — Real Character-by-Character Typing

Screenshot of the Developer Hero with Typing Code Window snippet rendered live

Developer-tool landing pages lean hard on a "code window" centerpiece — but a static screenshot doesn't demonstrate anything. This snippet types syntax-highlighted code into a fake editor window one real character at a time via setTimeout, then erases it and cycles to the next snippet, looping indefinitely.

Typing through HTML safely

Each snippet is authored as an HTML string with token <span> elements already baked in for syntax coloring (.tok-kw, .tok-fn, .tok-str, etc.). The naive approach — typing the raw HTML string character by character — would render broken half-tags mid-animation. Instead, htmlUpTo(html, count) walks the string, and whenever it encounters a <, it copies the *entire* tag to the next > in one step without incrementing the visible character count, only incrementing count for actual text characters. That's what lets the highlighting colors appear correctly *as* each character is typed, instead of the markup only rendering once typing finishes.

Variable typing speed, real timers

Each character's delay is randomized between 18–48ms (18 + Math.random() * 30) via a fresh setTimeout scheduled at the end of the previous one — a real recursive timer chain, not a CSS steps() animation with a fixed cadence, which is why the rhythm feels slightly human rather than mechanically uniform.

A full type → pause → erase → next-snippet cycle

After the last character types, a 2.2s pause lets the reader actually read the finished snippet, then eraseCurrentSnippet() runs the same character-count logic in reverse — decrementing charIndex on a fast timer — before advancing snippetIndex and starting the next snippet's type-in. This is a genuinely stateful loop (snippetIndex, charIndex, and a live typingTimer handle), not a looping GIF-style CSS animation.

A blinking cursor that's actually decorative-only

The blinking block cursor (.cwh-cursor) is a separate always-blinking element via CSS @keyframes, positioned after the code with display: inline-block — it doesn't need to sync with the typing logic because it visually reads as "waiting to type here" regardless of whether a character just landed.

Realistic editor chrome

The three colored dots and a filename tab (which updates per snippet) sell the "real editor window" framing that makes the typing animation land as a live demo rather than an abstract text effect.

Customizing it

Add more snippets to the snippets array (each just needs a filename and pre-marked-up html), adjust the per-character delay range or the pause/erase timings, or swap the color tokens for a different syntax theme. Pair it with typing code for a standalone version, or startup hero for a non-developer alternative layout.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSThe first snippet begins typing automatically on load.
  2. 2
    Watch it type, pause, and eraseAfter finishing, it pauses ~2.2s, erases, then types the next snippet.
  3. 3
    Add your own snippetPush a { filename, html } object onto the snippets array with token spans.
  4. 4
    Adjust typing speedChange the 18 + Math.random() * 30 range in step().
  5. 5
    Adjust pause durationChange the 2200ms delay before eraseCurrentSnippet() is called.
  6. 6
    Restyle the tokensEdit .tok-kw, .tok-fn, .tok-str, .tok-com, .tok-prop colors.

Real-world uses

Common Use Cases

Developer tool landing pages
Show real code typed into a fake editor one character at a time, instead of a static screenshot that demonstrates nothing.
SDK and library homepages
Display real integration snippets on an SDK or library homepage, with htmlUpTo() guaranteeing that a half-typed tag is never rendered broken mid-keystroke.
Open source project pages
Pair with a gradient mesh hero backdrop, cycling through several snippets in a type, pause, erase and next loop.
CLI tool marketing
Cycle through terminal-style commands for a CLI tool, with keywords, strings, functions and comments all pre-marked up for syntax colour.
Framework and docs intros
Demonstrate setup code before the reader commits to documentation, driven by a recursive setTimeout chain rather than CSS steps().

Got questions?

Frequently Asked Questions

Each snippet is authored with syntax-highlighting spans already in its HTML string. Rather than typing that raw string character by character (which would render broken half-open tags), htmlUpTo() walks the string and, whenever it hits a '<', copies the entire tag through to its closing '>' in one step without counting it toward the visible character total — only real text characters increment the count. That's why colors appear correctly as each character lands instead of only after typing finishes.

It's a real recursive setTimeout chain: step() increments charIndex, re-renders the revealed HTML, and schedules itself again with a randomized 18-48ms delay if there are characters left. Because each delay is randomized rather than fixed, the rhythm doesn't feel mechanically uniform the way a CSS steps() animation would.

After the last character of a snippet types, a setTimeout pauses for 2200ms so the reader can read it, then eraseCurrentSnippet() runs the same htmlUpTo() logic in reverse on a fast timer to visually delete the text. Once charIndex reaches 0, snippetIndex advances (wrapping via modulo) and typeCurrentSnippet() starts the next snippet — a real state machine with snippetIndex, charIndex, and a live typingTimer handle, not a looping GIF or CSS animation.

Push a new object onto the snippets array with a filename string and an html string containing your code with .tok-kw/.tok-fn/.tok-str/.tok-com/.tok-prop spans around the parts you want colored. No other JavaScript changes are needed — the typing and erase logic reads from the array by index.

The block cursor is a separate element driven purely by a CSS @keyframes opacity animation, deliberately decoupled from the typing state. It reads correctly either way — as "actively writing" during typing or "waiting to continue" during the pause — without needing extra JavaScript to toggle it on and off in sync with the typing timers.