Overview

timerTemplate(callback, ms) is a self-ticking template directive: it calls callback immediately, then on every interval, and patches only that child part — without re-rendering the whole component.

The interval clears when the host disconnects and restarts on reconnect. If ms changes between renders, the interval is restarted with the new duration.

timerTemplate vs onInterval

API
Scope
Notes
timerTemplate(cb, ms) Template fragment Updates only the directed part. No atom required for the clock display itself.
onInterval(cb, ms) Component hook Side effects in the outer function — set atoms, fetch, etc. See /docs/hooks/timers.

Live clock with timerTemplate

timerTemplate(callback, ms) calls callback on every tick and patches only the changed portion of the DOM. No atom, no effect — the interval is tied to the directive's lifetime in the template.

import { html, timerTemplate, renderApp } from 'mates';

const App = () => () => html`
${timerTemplate(
() => html`<h1 class="mono">${new Date().toLocaleTimeString()}</h1>`,
1000,
)}
<p class="label">Updates every second via timerTemplate</p>
`;
renderApp(App, document.getElementById('app'));

Simple countdown display

Return a number/string from the callback — lit-html renders it directly.

import { html, timerTemplate, renderApp } from 'mates';

let left = 10;
const App = () => () => html`
<div class="m-col m-gap m-items-center">
${timerTemplate(() => {
if (left > 0) left -= 1;
return html`<h1>${left}</h1>`;
}, 1000)}
<p class="label">Counts down each second</p>
</div>
`;
renderApp(App, document.getElementById('app'));