Hi - I’m looking to build a chat interface prototype that will utilize variables to essentially build a chat message thread based on what is typed into an input field.

I found some tutorials that mimic typing in text in an input field, but they all seem to break. Also, it is extremely tedious because there is no “find and replace” in the logic code.

Is there a plugin that will help make an interaction like this work? Here would be the desired prototype UX:

1. Text input field has some placeholder text “Type here” in grey (variant 1)


2. Click in the field and you see a blinking pipe character “|” (variant 2<>3 loop)


3. Start typing with your keyboard, and you should see what you type appear in the input box.


4. When pressing Enter, the text string you typed is displayed in a vertical scroll box above.


5. Also the input field is re-set to the blinking pipe


6. Type more and press Enter again, and whatever you entered gets added into the vertical scroll box.


7. Press the “Esc” key to “exit out”, which resets the input field to its “Type here” variant 1.

When I started to build this out it broke at #3 above (the keyboard strokes are being captured, but not displayed). Listening to every character possible is a lot of tedious work, but if you realize you need to change some logic, you have to do it for as many characters you are listening to. Way too tedious…

So if there are any plugins that will faciliate this, I’m all ears!