Build a Typewriter Effect | Interview Question

Q: Build a Typewriter Effect

**Target Audience:** Beginners preparing for a frontend machine coding round. You know a little JavaScript and React; state machines, timeouts, effect cleanup and screen-reader techniques are explained from zero. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts with the vocabulary interviewers expect. Every output under "Verified" was printed by running this exact solution (and one deliberately broken copy) on React 19.3.1 inside <StrictMode> in jsdom. ## 1. Why This Even Matters — A Story First Picture someone at an old typewriter showing off for a crowd. They type "React" one key at a time, admire it for a second, then backspace it out letter by letter, pause, and start typing "Vue". They never press two keys at once, and there is always exactly one next thing they are about to do. That last sentence is the whole design. The typewriter effect looks like animation, but it is really a little mach

The problem

Question presented to candidate: "Build the typewriter effect you see on landing pages: 'I build with React', where the last word types itself out letter by letter, pauses, deletes itself, then types the next word, looping forever. Make the speeds configurable, show a blinking caret, and make sure it is accessible."

Requirements:

A fixed prefix followed by an animated word from a list (React, Vue, Angular), looping.
Configurable timings: type speed per character, delete speed per character, hold time on the full word, gap before the next word.
A blinking caret after the text.
A Pause button (moving content that runs forever must be pausable).
Screen readers get the full sentence once, not a stream of partial words.
Exactly one timer at a time; nothing left running after unmount.

What a strong answer should cover:

The effect as a state machine: { index, count, deleting } with four phases (typing, holding, deleting, gap) and a pure plan(state) that returns the next state and the delay.
A single setTimeout per step, scheduled from the current state and cleared before every re-run, instead of nested timers or a setInterval with phase flags.
Why a missing cleanup breaks under React StrictMode (two loops, doubled speed) and how to prove it.
Props or inputs for timings, and keeping the word list referentially stable.
Accessibility: visually hidden full text, the animated part aria-hidden, a pause control (WCAG 2.2.2 Pause, Stop, Hide), caret animation off for reduced motion.

Clarifying questions expected:

"Should it loop forever or stop after the last word?"
"Should the cursor keep blinking while paused?"
"Can the word list change at runtime?"

Code / implementation expected: Yes. A reusable component with configurable timings, a single-timer state machine, a caret, a pause control and cleanup.

React
Timers
Animation

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Beginners preparing for a frontend machine coding round. You know a little JavaScript and React; state machines, timeouts, effect cleanup and screen-reader techniques are explained from zero. Difficulty: Easy

How to read this doc: Plain language first, then 📌 Interview term: callouts with the vocabulary interviewers expect. Every output under "Verified" was printed by running this exact solution (and one deliberately broken copy) on React 19.3.1 inside <StrictMode> in jsdom.

1. Why This Even Matters — A Story First

Picture someone at an old typewriter showing off for a crowd. They type "React" one key at a time, admire it for a second, then backspace it out letter by letter, pause, and start typing "Vue". They never press two keys at once, and there is always exactly one next thing they are about to do.

That last sentence is the whole design.

The solution is hidden so you can try first

12 min read · 9 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import Typewriter from "./src/components/Typewriter";

// Defined outside the component so the array keeps one identity across renders.
const WORDS = ["React", "Vue", "Angular"];

export default function App() {
  return (
    <main className="page">
      <section className="card">
        <h1 className="title">Typewriter Effect</h1>
        <Typewriter
          prefix="I build with"
          words={WORDS}
          typeMs={100}
          deleteMs={50}
          holdMs={1000}
          gapMs={300}
        />
      </section>
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.