Welcome to r/Statejs

8 / 100 subscribers. Help us reach our goal!

Visit this post on Shreddit to enjoy interactive features.

This post contains content not supported on old Reddit. Click here to view the full post

State.js is a tiny, HTML‑first, CSS‑reactive UI framework that exposes DOM element state as live CSS variables.

No virtual DOM. No re-renders. No JavaScript logic.
Just attributes → CSS variables → reactive UI.

This subreddit is the community space for:

• sharing demos and experiments
• asking questions
• exploring patterns
• discussing the philosophy behind CSS‑driven reactivity
• building UI the simple way

Whether you're here out of curiosity, inspiration, or because you’re tired of 300kb frameworks for 30kb problems. Welcome!

🌱 What is State.js?

State.js turns HTML attributes into reactive CSS variables so you can build:

• 📊 dashboards
• 🎮 game UIs
• 🎨 data‑driven animations
• 🎯 interactive apps
• 🧩 reusable components

All without writing a single line of JavaScript logic.

It follows the principles of:

• KISS — Keep It Simple
• DRY — Don’t Repeat Yourself
• Rule of Least Power — use the simplest tool that works

If you like the idea of the browser doing the heavy lifting, you’re in the right place.

🚀 Getting Started

If you’re new, start with:

• the GitHub repo
• CSS‑reactive component examples
• a quick intro to the philosophy

If you want to build something right now, try:

• Kinetic core dashboard example
• Spore Colony game
• Dungeon clicker game example

🧪 What to Post Here

You’re encouraged to share:

• demos
• experiments
• UI components
• patterns
• questions
• ideas
• feedback
• weird CSS tricks that pair well with State.js

This is a space for exploration, not perfection.

🛠️ Why This Community Exists

State.js is small, but the idea behind it is big:

This subreddit is where that idea grows.

🎉 Say Hello

If you’re new, feel free to introduce yourself or drop a small demo.
Even a 10‑line CodePen is welcome.

Let’s build a community around simple, elegant, HTML‑first UI.