GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing data-star.dev — Datastar

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<star-field
2    data-attr:center-x="$x"
3    data-attr:center-y="$y"
4    data-attr:speed="$speed"
5></star-field>

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 12.52 KiB file.

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

Get started

A solid core and a complete framework

Datastar core provides frontend reactivity. Datastar plugins provide declarative syntax and convenience.
Rocket provides even more power, when you need it.

Get started Watch more videos

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:

Hello world!

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>`)

Waiting for an order...

Reactive frontends with no user-JS

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

Datastar: It’s Pretty Good — with David Nolen

Real-Time Collaboration with Sprig and Datastar – Ben Croker

Put State in the Right Place - Delaney Gillilan | SSW 2026

Get started Watch more videos

Datastar is definitely the best tool that I’ve added to the web technology stuff that I do in at least 12 years.
David Nolen

Game of Life

One Billion Checkboxes

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

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

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

With the introduction of Datastar, the value of Vue, React, and all other frontend frameworks just dropped to zero.
That’s punk!
Louis Sunshine

Every six months I’d search for “modern take on htmx” or “lighter take on SolidJS with no build step”, and always came up empty. It went on like this for a couple of years. Then, last week, I tried again, and behold... Datastar.
Andy Gayton

Backed by a nonprofit

Supported by a community

Coded by hand

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

Ready for liftoff?

Guide Reference Examples Pro

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.