State.js: Implementing CSS-Driven Reactivity Without JavaScript Logic

a new mental model for building UI

State.js is a reactivity system that allows developers to build interactive interfaces using only HTML attributes and CSS. It eliminates the need for JavaScript logic, hooks, and framework re-renders by syncing data directly to CSS variables.

Why This Matters

Traditional reactive UI development relies on complex frameworks like React or Vue, which introduce significant overhead through build steps and state management libraries. State.js shifts this paradigm by treating HTML attributes as the source of truth, allowing the browser’s native CSS engine to handle behavioral updates, thereby reducing the architectural complexity usually required for simple reactive components.

Key Insights

• Attribute-to-Variable Projection: State.js turns HTML attributes (e.g., data-count=“0”) into live CSS variables (e.g., —state-count: 0) instantly.
• Declarative Triggering: UI updates are handled via data attributes like data-state-trigger and data-state-increment instead of JS functions.
• Reactive Conditional Styling: Logical conditions can be embedded in HTML (e.g., data-state-class=“big: count >= 5”) to toggle CSS classes based on state values.
• Autonomous State Updates: The ‘Autofire’ feature allows for interval-based updates (e.g., time += 1 every 100ms) without writing a manual game loop in JavaScript.

Working Examples

A complete mini app demonstrating reactive text, classes, and state management.

<div id="app" data-state data-count="0">
<h1 data-state-text="Count: {count}"></h1>
<button
data-state-trigger
data-state-target="#app"
data-state-attr="count"
data-state-increment="1">
+1
</button>
<button
data-state-trigger
data-state-target="#app"
data-state-attr="count"
data-state-increment="-1">
-1
</button>
<div data-state-class="warning: count < 0">
<p>Count is negative!</p>
</div>
</div>

Using projected CSS variables to dynamically change element color based on state.

#counter {
color: hsl(calc(var(--state-count) * 20), 80%, 50%);
}

Practical Applications

• 。Use case: Reactive timers or counters using the Autofire system to update values on specific intervals without JS logic.
• 。Pitfall: Attempting to use heavy JS frameworks for simple state transitions when attribute binding could eliminate the build step and reCrender overhead.

References:

• https://dev.to/idevgames/statejs basics—learn—css‑driven—reactivity—in—10—minutes3m80