Live checklists

A page can hold a shared checklist. Drop an <smp-checklist> block into your HTML and each item becomes a checkbox that everyone with access can tick off. Checks are stored for you and shared across the whole team, so a page like a launch plan becomes a live board where the remaining work visibly shrinks as people complete it.

You do not need a backend, an API key, or any JavaScript of your own. The block is the whole contract.

This is shared team state, not a personal list: when anyone checks "Deploy to staging," it is checked for everyone. Checks are anonymous, the board shows what is done, not who did it.

A basic checklist

<smp-checklist id="launch">
  <smp-item value="copy">Finalize homepage copy</smp-item>
  <smp-item value="deploy">Deploy to staging</smp-item>
  <smp-item value="qa">QA on mobile</smp-item>
</smp-checklist>

• id (required) is a stable key for this checklist. Keep it unique on the page and do not change it later, it is what the checks are filed under.
• Each <smp-item value="..."> is one to-do. The value is the stable key the check is stored under; the text inside the tag is the visible label.

When the page is viewed, each item becomes a checkbox. Ticking one records it for everyone; unticking clears it. Other people's changes appear on their own without a manual refresh (the board re-reads every few seconds and when you return to the tab).

If the markup is malformed (no id, or no valid items) the block is left as plain text, so a broken block never breaks the page.

Styling it

The checklist renders into your page's own HTML with no built-in styling, so your page CSS fully controls the look. The hooks:

• [data-smp-checklist="id"] on the container.
• [data-smp-item="value"] on each item; it gets data-smp-checked when done.
• data-smp-checked-count and data-smp-total on the container, for a progress readout like "3 / 8 done" or a progress bar, with no JavaScript of your own.
• data-smp-checklist-closed on the container when the list is closed.

[data-smp-item][data-smp-checked] span { text-decoration: line-through; opacity: 0.55; }
[data-smp-checklist]::after {
  content: attr(data-smp-checked-count) " / " attr(data-smp-total) " done";
}

Managing it

Open the page's settings, under Responses you can Close the checklist (freezes it read-only) or Reset it (clears every check for a fresh run).