https://data-star.dev/

IndicatorKGuide Reference Examples How-Tos
More
About Us Bundler Essays Examples How-Tos Reference Videos Pro
   
[                    ]
Indicator

Datastar

The hypermedia framework

Basic CRUD [                    ] Real-time

x:
y:
speed:

This starfield is a web component. Its attributes are driven by
reactive signals using Datastar's data-attr-* attribute.

1<ds-starfield
2    data-attr-center-x="$x"
3    data-attr-center-y="$y"
4    data-attr-speed="$speed"
5></ds-starfield>

Engage warp speed Close
Rocket

Build reactive web apps that stand the test of time

Datastar is a lightweight framework for building everything from
simple sites to real-time collaborative web apps.

Bring Your Own Backend

Harness the simplicity of server-side rendering and the power of a
frontend framework, with a single 10.75 KiB file.

Write your backend in the language of your choice (we have SDKs,
too).

          
Get started

Datastar accepts text/html and text/event-stream content types, so
you can send regular HTML responses or stream server-sent events
(SSE) from the backend.

See the difference by trying zero and non-zero intervals below.

Interval in ms:
[400                 ] Start

Hello world!

Network Response

Reactive frontends with no user-JS

Datastar allows you to iterate quickly on a slow-moving,
high-performance framework.

Your browser does not support the video tag.

Get started Watch more videos

Datastar solves more problems than it creates

Unlike most frontend frameworks, Datastar simplifies your frontend
logic, shifting state management to the backend.

Drive your frontend from the backend using HTML attributes and a
hypermedia-driven approach.

State in the right place

Add reactivity to your frontend using data-* attributes.

1<button data-on-click="@get('/endpoint')">
2    Open the pod bay doors, HAL.
3</button>
4
5<div id="hal">Waiting for an order...</div>

Backend driven frontends

Modify the DOM and state from your backend.

1sse.PatchElements(`
2    <div id="hal">I'm sorry, Dave. I'm afraid I can't do that.</div>
3`)
4time.Sleep(1 * time.Second)
5sse.PatchElements(`<div id="hal">Waiting for an order...</div>`)

Open the pod bay doors, HAL.Waiting for an order...

    Datastar gives me reactive, realtime applications without the
    complications of the JS/TS ecosystem. I had to change my way of
    thinking about building frontends, and I'm Oh-So-Glad I did!
    Brian Ketelsen
    Brian Ketelsen

Game of Life

Game of Life

One Billion Checkboxes

One Billion Checkboxes

One Billion Cells

One Billion Cells

    Datastar is exactly like React, except without the network,
    virtual DOM, hooks, or JavaScript. Oh and you get multiplayer and
    realtime for free. Did I mention you can use any backend language
    you want? Datastar has solved the frontend for me - I can now get
    back to solving business problems.
    Anders Murphy
    Anders Murphy

    I've spoken about avoiding SPA complexity for years, and Datastar
    nails it: real-time UIs with less code than htmx or Alpine.js,
    and none of the overhead I used to wrestle with.
    Chris May
    Chris May

Backed by a nonprofit

Supported by a community

Coded by hand

Simple. Fast. Light. No VCs. More About Us

Sunset

Ready for liftoff?

Guide Reference  Examples 
(c) Star Federation
Hosted by Arcustech