Datastar 🚀

Load HTML

Click this button to load a response with HTML:

Load HTML

Message: Datastar responses will be displayed here.

Click this button to generate 100 element updates 10 milliseconds apart:

Generate messages

Backend-synced signals

Counter

Click this button to increment the counter inside the browser only:

Click this button to sync the counter with the backend (15):

Sync

Show and hide

Click this button to toggle the panel below:

Toggle panel

I'm hiding in plain sight

Click this button to make the backend force show the panel:

Show panel via backend

Custom plugins

Click this button to generate a new timestamp and display it in your own timezone and locale:

Generate timestamp

Custom elements

Choose an option in the menu and see the input update:

Menu

Option 1

Link

Option 2

Option 3

Submenu

Option 4

Option 5

Submenu

Option 6

Option 7

Option 8

Prototyping

This page contains mocked API routes for handling datastar fetching. This allows us to create prototypes directly in the browser which are then easily adapted for a real API.

This task list is persisted in localStorage to simulate database operations.

+ Add

FLIP Animations

Click this button to add an animated element to the list:

Add element