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

Code

How it works · React

Two useState values hold the committed messages. The live input uses value and onChange; the other uses defaultValue and onBlur, keeping its draft in the input until focus leaves. Updating either state refreshes its corresponding heading.

How it compares

Gramlot uses one Data pointer for reading and writing, with live=True selecting the commit timing. This removes the explicit setter callbacks used by this React recipe. React can package those callbacks in reusable components, but those components must be written or adopted. Gramlot includes this binding and commit policy out of the box; no additional component is needed.