Live class

Reactive text / subtree — the JSX {expr} equivalent.

Automatically tracks any Signal read during the execution of builder and updates only this region when signals change.

DOM Representation

Mounts between sentinel comments <!-- bloom:live --> and <!-- /bloom:live --> rather than creating a wrapper element.

final count = signal(0);

BloomNode counterView() => Div(
  children: [
    Live(() => P(text: 'Current count: ${count.value}')),
    Button(
      text: 'Increment',
      onClick: (e) => count.value++,
    ),
  ],
);