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 · Vue

Code

How it works · Vue

Two refs hold the messages. v-model updates the first ref as you type, while an explicit blur handler updates the second when focus leaves. Template interpolation displays each ref in its own heading.

How it compares

Vue already offers concise declarative binding through v-model. Gramlot adds a uniform Data-path notation and a widget-level live option; the displayed Vue recipe uses a blur handler for the second field. This is a modest difference in how commit policy is expressed, not a general advantage over Vue reactivity.