State.js looks simple — just HTML attributes — but it introduces a new mental model for building UI:

HTML holds the data.

CSS reacts to the data.

State.js keeps them in sync.

If you’re used to React, Vue, or Svelte, this feels strange at first.

If you’re used to CSS, this feels like “why didn’t CSS always work like this?”

This tutorial will teach you the core ideas behind State.js so you can build reactive UI without JavaScript logic, without a framework, and without a build step.

⭐ 1. What State.js Actually Does

State.js turns HTML attributes into live CSS variables .

Example:

<div data-state data-count= "0" ></div>

Enter fullscreen mode

Exit fullscreen mode

State.js automatically exposes:

--state-count : 0 ;

Enter fullscreen mode

Exit fullscreen mode

If data-count changes, the CSS variable updates instantly.

This is the foundation of everything.

Learn more: Reactive attributes

⭐ 2.…