Datastar.js: Advanced Features Demo

1. Rendering Lists with `data-for`

Datastar can iterate over an array in your signals to render dynamic lists.

2. Dynamic Attributes (`data-bind:[attr]`) & Element Refs (`data-ref`)

Bind any HTML attribute to a signal, and reference elements directly.

3. HTML Injection (`data-html`) & Event Modifiers (`.prevent`)

Using data-text (Safe):

Using data-html (Renders HTML):

Warning: Only use `data-html` with trusted content to prevent XSS attacks.

The form below uses `data-on-submit.prevent` to stop the page from reloading.

Status:

4. `data-bind` with Checkboxes & Radio Buttons

Thank you for agreeing!

Choose Shipping Speed

Selected Speed: