How I built a cool web terminal

I used a cool trick to make the terminal for this website and I think it's worth sharing. If you want to find out more about how I made it in its entirety, you can checkout the source code for my terminal emulator on Github.

There's only two built-in HTML elements that are meant to take in text from the user (that I know of), <input /> and <textarea/>. To make a terminal emulator, I needed a way to display some text that the user couldn't delete (the prompt) and I needed text from the user to wrap onto the next line like it does normally in a terminal.

To get around both these limitations, I found a global HTML attribute called contenteditable. You have to be careful of accessibility when you use it, and I think it's mostly used for creating your own WYSIWYG editor. But it works wonders for creating your own terminal.

<div>[visitor@mywebsite ~] <span contenteditable></span></div>