MiniState – Simplified FSM Builder

Author: christianhohlfeld

A zero-dependency, single-file, browser-based finite-state-machine (FSM) prototype tool.
Build UI states by snapping the DOM, wire up transitions (events, property changes, or custom/async functions), share stateful context data between states, and preview everything live—no bundler or build step required.

---

📂 Repository Structure

.
└── state.html      # “MiniState” all-in-one demo + dev UI + runtime

Nothing else. Just open state.html in your browser.

---

🚀 Quick Start

1. Clone your repo

   git clone https://github.com/christianhohlfeld/ministate.git
   cd ministate

2. Open in browser
   Double-click state.html (or open state.html).
3. Enter Dev Mode
   Click the red DEV MODE button at bottom-right.
4. Snapshot & Edit States
   • Click ＋ Snapshot Current to capture the DOM as a new state.
   • ★ star any state to make it the initial state.
5. Add Transitions
   • Pick an element → “add rule: click()” / “prop change” / “custom fn”
   • (Optionally) Attach a named async/sync JavaScript function as a condition or action.
6. Map Context → DOM
   • Define per-state JSON context
   • In “Edit State Entry Mappings,” map context.* paths to element IDs + properties.

---

✨ Key Features

• Single HTML file: zero install, zero build.
• DOM snapshots per state + live apply.
• Event, prop-change, or fn-call triggers.
• Async conditions & actions: async (req, getState, ctx) => { … }.
• Shared context across states.
• Data-mapping UI: map context.foo → #myEl.textContent.
• DaisyUI + Tailwind Dev UI.
• JSON import/export of your FSM spec.
• Clean logs via console.log, no alerts.

---

🛠️ How It Works

1. Auto-track all id-ed elements’ key props (value, textContent, classList, disabled, …).
2. Snapshot saves “id.prop = value” pairs.
3. Transitions:
   • Event (click, etc.)
   • Property (value, checked, etc.)
   • Function (custom code)
4. Conditions & actions can be async—MiniState shows a loading spinner and times out after 5 s.
5. Context merge: if your condition/action mutates context, those values carry into the next state.
6. Entry hooks apply snapshot + data-mappings automatically.

---

🧩 Custom Functions

Inside Dev UI → Custom Functions:

async (requestChange, getState, context) => {
  // fetch some data
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = await res.json();
  context.last = data;
  return true;         // allow transition
}

Then in the next state’s “Edit State Entry Mappings”:

• Source: context.last.title → Component: #dataTitle → Property: textContent
• Source: context.last.completed ? '✓' : '✗' → #dataDone.textContent

---

🔧 Tailor to Your Repo

• Rename MiniState title or favicon as desired.
• Drop in your own HTML/CSS structure ≤250 KB.
• All logic lives inside <script>—feel free to extend or embed into your app.

---

📝 License

This project is MIT-licensed — see LICENSE for details.

---

Built by christianhohlfeld • Enjoy prototyping without the overhead!