Pre-alpha · First usable release planned for late 2026.

Gramlot Rosetta One idea. Five implementations.

Lesson 02 · First steps

Data binding

Compare the two independent fields: Live updates its heading as you type; On focus out updates only when you leave the field. In Gramlot, each heading subscribes to the same Data field as its textbox. Only the first textbox sets live=True.

Example · NiceGUI

Code

How it works · NiceGUI

A dictionary created for this page holds the two messages. bind_value keeps the live input connected to its entry; a blur callback commits the other input. Each heading binds to its entry, with text escaped before rendering as HTML.

How it compares

NiceGUI already provides declarative value and content bindings. Gramlot uses the same ^ path notation for the input and heading, and makes focus-out versus live editing a widget setting. That avoids the custom blur callback in this recipe; it does not make NiceGUI’s binding facilities less capable.