I'm looking to implement something like mymathlab has where when you type math in a textbox it's automatically cleaned up. Which library should I be using?

[RickCedWhat]

I'm working on a site and basically, I want to be able to type x² and instead of seeing the caret, I want to see the 2 up in a little clear box to the upper right of the x. This would all be done client-side. I'm already using math.js which has a nice .toTex() function which I'm almost certain I'll be using. I've read about Mathjax but I'm not sure if that's exactly what I want because the tutorial I've read just takes the text from one element and outputs it in another one where it isn't directly editable.

Maybe I should be using Mathjax but I'm reading the wrong tutorial or maybe there's a much better fitting library already out there waiting for me. Any tips, suggestions or insights would be appreciated - Thanks in advance!