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

Gramlot Rosetta One idea. Five implementations.

Lesson 06 · First steps

Contact colors

Each contact now has a Title background color picker. Its value and the title bar background subscribe to the same relative Data field, ^.color. Choose a color to update that title bar immediately; every contact keeps its own color.

Example · React

Code

How it works · React

Each contact object gains a color property. The native color input updates it through onChange, and the heading reads it through an inline backgroundColor style. All other presentation remains in shared CSS, and the card key keeps the state independent.

How it compares

Gramlot connects the picker and title background with the same relative Data path, without a color-specific callback. React combines a state update with a declarative backgroundColor style. Both are reactive; Gramlot’s simpler point here is the uniform binding notation across widget values and presentation attributes.