Building Real-Time Simulations with State.js: Eliminating Frontend Framework Complexity

The DOM Is Already a Database

Idev-Games developed Spore Colony, an autonomous simulation game powered by State.js. The entire application operates from a single HTML file without React, Virtual DOMs, or build tools.

Why This Matters

Modern frontend development has normalized extreme complexity, requiring bundlers, hydration pipelines, and state management libraries to sync JavaScript objects with the browser. This architecture creates significant overhead through reconciliation and diffing; conversely, using native browser capabilities like data attributes and CSS custom properties allows for hardware-accelerated rendering and zero-framework overhead.

Key Insights

• DOM-First State Management: State lives directly on elements via native data-* attributes rather than in separate JS stores (State.js, 2026).
• Declarative Game Loops: Replacing setInterval() with declarative markup using attributes like data-state-interval for autonomous resource growth.
• Native CSS Rendering: Using CSS variables (e.g., var(—state-spores-percent)) to eliminate the need for component re-rendering or Virtual DOM diffing.

Working Examples

Defining the application state database directly within HTML attributes.

<div id="colony"
data-state
data-state-watch="spores,bio,mut,haz,cycle,nodes,boosted,collapsed"
data-state-var="true"
data-state-persist="true"
data-state-toggles="ticking,danger,mutating,thriving"
data-spores="10"
data-spores-min="0"
data-spores-max="100"
data-bio="0"
data-bio-min="0"
data-bio-max="200">
</div>

A declarative autonomous resource growth loop replacing imperative JavaScript timers.

<button id="t-grow"
data-state
data-state-trigger
data-state-bind="colony"
data-state-attr="spores"
data-state increment="calc(var(--state nodes))"
data-state condition="spores < 95 and collapsed < 1"
data-state interval="2000"
style="display:none">
</button>

Zerovis JS rendering where UI updates automatically via CSS variable changes.

.bf–s {
background: linear–gradient(
90deg,
var(--spore3),
var(--spore)
);
width: var(--state–spores–percent, 10%);
}

Practical Applications

• • Indie Games/Interactive Tools: Use declarative HTML state to create lightweight simulations that run locally without servers or npm installs.
• • Performance Critical Dashboards: Implement hardware_accelerated CSS rendering to avoid Virtual DOM reconciliation bottlenecks.

References:

• https://dev.to/idevgames/i –built –a –real –time –simulation –game –in –a –single –html –file –without –react —or ⶄcustom ﶗjavascript ﶗ//Cusom URL not provided in text but link is present in context metadata as https://dev.to/idevgames/i…etc” (Context URL)
• 📦 GitHub: StateJS by iDevGames (Link referenced in context)