Skip to main content

Simulate typing on a demo field

Add a typing simulation so text types into a form field letter by letter on click, hover, reveal, or a guide step, ideal for search and chat flows.

Updated Nov 5, 2026

Simulate typing on a demo field

Overview​

Typing simulation makes an input field in your demo look like it's being typed into in real time, letter-by-letter, when a viewer clicks it, hovers it, scrolls it into view, or reaches a guide step. It's perfect for showing search flows, form fills, chat inputs, or command bars where a static screenshot wouldn't do the interaction justice.

Under the hood it's a new kind of edit — the same way you edit a heading or replace an image, you can attach a typing behavior to a form field, and the demo player animates the text into place during playback.

Before You Start​

  • The target element must be a text input (e.g. <input>, <textarea>, or a contenteditable field).

Add a Typing Animation​

  1. Open the demo in the editor.
  2. Click the input field you want to animate.
  3. In the property panel, click the Simulate Typing (keyboard) icon.
  4. In Text to type, enter the text you want the field to appear to be typed into.
  5. Set the options:
    • Clear first — empties the field before the typing starts.
    • ms start delay — how long to wait, in milliseconds, before the typing starts.
    • Trigger — when the animation plays: On click, On hover, On reveal (when the field scrolls into view), or On guide step (when the viewer reaches the step you choose). With On guide step, you can also tick Advance to next step when done.
  6. Click Save, then publish the demo.

When the trigger fires, Walnut animates the text into the field character by character. To remove it later, open the same panel and click Remove animation.

AI Mode Support​

AI Mode understands typing simulation as an editing capability. You can ask AI Mode to "type 'acme corp' into the search bar on this screen" and it will attach a typing-simulation edit to the field for you.

FAQs​

How fast is the animation?​

The typewriter runs at a natural cadence tuned to feel like a real person typing; there's no per-character speed setting. You can control when it starts with the ms start delay option.

Does the typed text appear in exports?​

Yes. Video (MP4/GIF) exports pace the render to the typing duration so the animation shows up faithfully.

Can I edit the text later?​

Yes. Select the field in the editor, click the Simulate Typing icon, update the text, and click Save.

Was this helpful?