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. Your First Reactive Element Let’s make a simple counter.…