Add lvt-fx:highlight="flash" to an element and it briefly flashes a background color
whenever a render updates anything inside it. The effect is per-element, not per-value:
two elements bound to the same counter both flash when it changes. Customize the look
with --lvt-highlight-duration (default 500ms) and --lvt-highlight-color (default
amber #ffc107).
One button increments a shared counter; two separate lvt-fx:highlight="flash" blocks
mirror it, so both flash on every change.
{{define "content"}}
<article>
<h3>Highlight on Change</h3>
<p><small><code>lvt-fx:highlight="flash"</code> flashes a temporary background color whenever a render touches the element's subtree. Both displays below share the <em>same</em> counter — clicking Increment flashes <strong>both</strong>, demonstrating that the directive is per-element, not per-changed-value. Duration via <code>--lvt-highlight-duration</code> (default 500ms); color via <code>--lvt-highlight-color</code> (default amber <code>#ffc107</code>).</small></p>
<form method="POST">
<button name="increment">Increment</button>
</form>
<div lvt-fx:highlight="flash">
<p>Counter A: <strong>{{.Counter}}</strong></p>
</div>
<div lvt-fx:highlight="flash">
<p>Counter B (mirror): <strong>{{.Counter}}</strong></p>
</div>
</article>
{{end}}Increment bumps a single counter — the highlight is entirely client-side, triggered by
the resulting DOM update.
type HighlightController struct{}
func (c *HighlightController) Increment(state HighlightState, ctx *livetemplate.Context) (HighlightState, error) {
state.Counter++
return state, nil
}
func highlightHandler() http.Handler {
tmpl := newLayoutTmpl("templates/layout.tmpl", "templates/feedback/highlight.tmpl")
return tmpl.Handle(&HighlightController{}, livetemplate.AsState(&HighlightState{
Title: "Highlight on Change",
Category: "Visual Feedback",
}))
}type HighlightState struct {
Title string
Category string
Counter int
}For a one-shot effect on elements that newly appear rather than change, see Animations.