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.

Live example · Gramlot JS

Code

How it works · Gramlot JS

Two Data fields keep the pairs independent. Each ^ pointer connects a heading and textbox to its field; live: true enables immediate updates on the first textbox, while the second commits on focus out. Run rebuilds the example from your edited recipe.