Skip to main content

Simulate typing on a demo field

Updated Jul 29, 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 reaches that 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​

  • Text-typing simulation is being rolled out gradually. If you don't see it in the editor's edit menu on a form field, it's not enabled for your workspace yet — reach out to your Walnut CSM.
  • 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 edit picker, choose Typing animation (a.k.a. Simulate typing).
  4. Enter the text you want the field to appear to be typed into.
  5. Publish the demo.

When a viewer reaches that step, Walnut clears the field and animates the text in character by character.

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. You don't need to set a per-character speed.

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. Click the field in the editor and update the typing-simulation edit like any other edit.

Was this helpful?