Examples · Islands on server HTML
Island with typed props
Server HTML plus data-* attributes become a live component.
The server renders the markup and the numbers; the island only has to wake it up. data-* attributes arrive as strings, so { types } declares which ones are numbers. The like button writes the signal first and posts after.
What to notice
- The server HTML is real content: it is visible before JavaScript runs and indexed by search engines.
{ types: { count: Number } }coerces once; every other attribute stays a string, so IDs never lose precision.- A failed POST rolls the optimistic count back (turn on failures in the mock server).
Click the heart several times, then edit data-count in index.html: the island starts from the new value.