How Do I...

• ...create a GUI?
• ...start serving a GUI?
• ...stop serving a GUI?
• ...add/remove elements?
• ...change a GUI's title?
• ...define my own kinds of element?

...create a GUI?

Just instantiate GUI, passing in any number of Elements and, optionally, a title (which will be the title of the browser page). For example:

GUI(Text("Hello,"), Text(" world!"), title="hello")

...start serving a GUI?

gui.run() will start a server on some port, open a browser tab pointed at that port, and block until either (a) you hit Ctrl-C, or (b) gui.stop_running() is called. (You can control which port it runs on, prevent it from opening a browser tab, and other stuff; see the documentation for options.)

...stop serving a GUI?

gui.stop_running() will kill the server that gui.run() started, unblocking the thread that called gui.run(). It will also try to close the browser window, but some browsers don't cooperate (some security concern about scripts closing windows they didn't open), so your mileage may vary.

If you want your GUI to have a "quit" button, just make a Button whose callback is gui.stop_running. For example:

gui = GUI()
gui.body.append(Button('Quit', callback=gui.stop_running))
gui.run()

...add/remove elements?

gui.body is a mutable sequence of elements, which means that it supports pretty much any operation you'd perform on a list (e.g. append, insert, get/set/delete indices).

Some examples:

gui.body.append(elem)
gui.body[gui.body.index(elem)] = elem2
gui.body.extend([Text('a'), Text('b'), Text('c')])
del gui.body[0]

...change a GUI's title?

gui.title = "new title"

...define my own kinds of element?

This one's a little lengthy, so I broke it out into its own page. Rest assured, though, it's pretty straightforward if you know HTML and the basics of the DOM API (e.g. appendChild, setAttribute).