Is it possible for Python to display LaTex in real time in a text box?

There is also a solution that uses sympy. It was partly inspired by an answer to this subreddit. In particular it uses the sympy.printing.preview method.

This is the import part

#!/usr/bin/python3

from tkinter import *
import sympy as sp
from PIL import Image, ImageTk
from io import BytesIO

Then I define the GUI, pretty standard stuff. I didn't put too much effort into it

class Root():
    def __init__(self, master):
        #Define the main window and the relevant widgets
        self.master = master
        master.geometry("800x300")
        self.strvar = StringVar()
        self.label = Label(master)
        self.entry = Entry(master, textvariable = self.strvar, width = 80)
        self.button = Button(text = "LaTeX!", command = self.on_latex)
        #The Euler product formula
        self.strvar.set("\prod_{p\,\mathrm{prime}}\\frac1{1-p^{-s}} = \sum_{n=1}^\infty \\frac1{n^s}")

        #Pack everything
        self.entry.pack()
        self.button.pack()
        self.label.pack()

Then let's define the function that renders LaTeX (keep the indentation)

    def on_latex(self):
        expr = "$\displaystyle " + self.strvar.get() + "$"

        #This creates a ByteIO stream and saves there the output of sympy.preview
        f = BytesIO()
        the_color = "{" + self.master.cget('bg')[1:].upper()+"}"
        sp.preview(expr, euler = False, preamble = r"\documentclass{standalone}"
                   r"\usepackage{pagecolor}"
                   r"\definecolor{graybg}{HTML}" + the_color +
                   r"\pagecolor{graybg}"
                   r"\begin{document}",
                   viewer = "BytesIO", output = "ps", outputbuffer=f)
        f.seek(0)
        #Open the image as if it were a file. This works only for .ps!
        img = Image.open(f)
        #See note at the bottom
        img.load(scale = 10)
        img = img.resize((int(img.size[0]/2),int(img.size[1]/2)),Image.BILINEAR)
        photo = ImageTk.PhotoImage(img)
        self.label.config(image = photo)
        self.label.image = photo
        f.close()

I choose the document class standalone in order to adapt the size of the produced document to its content. Then I use the package pagecolor to make the page blend seamlessly with the background. Notice also that PIL is not compatible with every format. Choosing an output of .pdf, for instance, will generate an error when defining img and choosing .png will give problems when defining photo. The format .ps works well and it's also vectorial, which is nice.

Finally one needs

master = Tk()
root   = Root(master)
master.mainloop()

This is what it looks like

Latex


Note: There I scaled the picture up by 10 and scaled it down by 1/2. This is only because it looks a bit smoother and nicer, but it's not needed. The first scaling uses the vectorial nature of the .ps format so it doesn't lose resolution, while the second scaling acts on the rasterized image.


This question is way too broad. I'm not overly sure should it be closed for that matter. Nontheless, here's a snippet on how to, at least, get latex working with Tk and matplotlib interactively.

Enter something in the Entry widget and press enter.

import matplotlib
import matplotlib.pyplot as plt

from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg
matplotlib.use('TkAgg')

try:
    import Tkinter as tk
except ImportError:
    import tkinter as tk

def graph(event=None):
    tmptext = entry.get()
    tmptext = "$"+tmptext+"$"

    ax.clear()
    ax.text(0.2, 0.6, tmptext, fontsize=50)  
    canvas.draw()

root = tk.Tk()

mainframe = tk.Frame(root)
mainframe.pack()

entry = tk.Entry(mainframe, width=70)
entry.pack()

label = tk.Label(mainframe)
label.pack()

fig = matplotlib.figure.Figure(figsize=(5, 4), dpi=100)
ax = fig.add_subplot(111)

canvas = FigureCanvasTkAgg(fig, master=label)
canvas.get_tk_widget().pack(side="top", fill="both", expand=True)
canvas._tkcanvas.pack(side="top", fill="both", expand=True)

ax.get_xaxis().set_visible(False)
ax.get_yaxis().set_visible(False)

entry.insert(0, r"\sum_{i=0}^\infty x_i \frac{y_i}{z_i}")
graph()

root.bind("<Return>", graph)
root.mainloop()

code should produce a window such as one bellow:

enter image description here

If you want to have a nice interface like theirs this will not be enough. They most likely have something like a plaintext to Latex to Unicode conversion setup. Or even perhaps directly from plaintext to Unicode but I am not aware of any parser for math expressions as nice as latex so all the rules would presumably have to be re-coded and that's a lot of work so they most likely skipped that step and instead let latex do the heavy lifting and then just parse latex to Unicode/Utf8 or whichever encoding can handle all the signs.

Then they dumped everything through something "extra" (i.e. django and jinja templating) that assigns each element its own nice css class based on the type of element (binary operator, variable, exponent...) in order to have the full math output that looks nice and can still be copied.

In any case there's so much going on in this question it's not really possible to give a concise all-encompassing easy answer.