MathJaxをシームレスに表示する方法が知りたい

Question

前提・実現したいこと

Ruby on Rails チュートリアルでWebアプリの作成を勉強している者です．
私の個人的な需要から，マインドマップ上でMathJaxのような数式表現をしたいと思っています．
そこで,Rails学習の成果物としての意味も込めて，Web上で動作するマインドマップアプリを作ろうと考えました．
しかし数式の表示方法について分からないことがあり，質問を投稿致しました．

問題

MathJaxでWeb上に数式を表示することはできるのですが，これでは「ユーザーの入力部分」と「数式の表示部分」が分離してしまい，マインドマップとしての直感的な操作が得られません．

下記の補足情報1.のように，数式の入力と出力を同じ画面で行えるようにしたいと思うものの，どのように実装すれば良いか分からず困っています．

ユーザーの数式マークアップ入力をWeb上でシームレスに表示する方法について，ヒントを頂けませんでしょうか？

何卒，宜しくお願い致します．

補足情報（以下を参考にして実装するつもりです）

1. Vimライクに操作してTexの数式も貼れるマインドマップアプリ『MindupPro』
2. 「VueMindmap」でマインドマップを実装する
3. 相性抜群なVueとSVGでオンラインマインドマップ