Loop Studio

Loop Studio is a browser-based visual systems editor and simulator — draw a Machinations-style diagram of pools, sources, drains, gates, and converters, then run a deterministic, seeded simulation to see how the system behaves over time. Built primarily for game economies, the same step-based model generalises to inventory/supply chains, service queues, cash flows, and other resource-flow systems; it's an independent, client-only implementation — nothing is uploaded, the whole app runs in your browser, and a graph is a plain JSON file you own.

Run it now: https://cozy-loop-studio.pages.dev — available in English, 한국어, and 日本語, with five bundled Templates ranging from a small production flow to a large game economy and a three-zone probability/pity comparison.

Key features

• Visual diagram editor — pools, sources, drains, gates, and converters; resources move between them on a deterministic, discrete-step simulation; select a region of nodes from the rail and move them together
• Seeded RNG + Monte Carlo — probabilistic gates and flows, and many-run outcome distributions with percentile bands
• A small model language — parameter / register nodes with a safe arithmetic expression grammar, guided @-autocomplete authoring, and a name-and-value read-back
• Executable state connections — trigger (+ delay), activator, and label Pool modifiers, with in-canvas pulse / tint / flash feedback
• Simulation playback — resources visibly depart, travel the real edge path, and arrive before values update, in dependency order
• Data import & collaboration — bring the numbers you already keep in a spreadsheet (CSV/TSV paste or upload) in as adjustable Parameters, with a manual refresh and a three-way diff — see docs/import-guide.md; plus file-based project revisions & proposals for asynchronous collaboration — no accounts, no server
• Runs anywhere — an installable offline PWA, a portable single-file build, shareable links, and a localized UI (EN / KO / JA)

Representative use cases

The 3-zone gacha banner comparison Template runs three pity/pickup rule sets — General/Free, Premium Standard (hard-pity ceiling), and Premium Pickup (hard-pity + a pickup guarantee) — side by side, 200 pulls per zone under identical run settings. Once a run completes, its hit and pickup rates are easy to compare; run Monte Carlo analysis to inspect the distribution across many runs.

Premium Pickup, framed on its own — the hard-pity counter forces the next roll's SSR once it hits the ceiling; whether that (or any ordinary) SSR lands as pickup or standard depends on the Pickup owed guarantee flag, which a miss sets and the next SSR consumes.

Develop locally

npm install
npm run dev             # http://localhost:5173
npm run build            # -> dist/            static SPA, deploy anywhere
npm run build:portable   # -> dist-portable/   single self-contained index.html (file://)
npm run lint
npm test                 # vitest (engine + store unit tests)
npm run e2e              # Playwright browser end-to-end

Requires Node 22+ (.nvmrc pins 22). React + TypeScript + Vite, React Flow for the canvas, Zustand for state; the simulation engine is a dependency-free, unit-tested TypeScript module kept separate from the UI. Deployed on Cloudflare Pages; CI on GitHub Actions.

Technical reference

Behaviour is frozen in versioned spec documents; a behavioural change means a new spec id, never an edit to a frozen one.

• Engine & simulation — SEMANTICS.md, SEMANTICS-B1.md (seeded RNG), SEMANTICS-B2.md (Monte Carlo)
• State connections — SEMANTICS-S4.md (trigger / activator / label; the latest of a sequential S1→S4 series, each frozen on its own)
• Model language & expressions — SEMANTICS-X.md, SEMANTICS-M2.md (the latest of a sequential M1→M2 series)
• File formats & revisions — SEMANTICS-W.md (Workspace), SEMANTICS-U.md (Share links), SEMANTICS-R8.md (revision projection/diff/Apply — the latest of a sequential R1→R8 series)

Project revisions & proposals — a worked, file-based walkthrough of the create → propose → review → apply flow lives in examples/revision/README.md.

Where the model could grow (not on a committed schedule — continuous-time models, spatial/grid models, external-engine integration for specialized physics) is recorded in docs/product-direction.md.

Additional feature-specific design documents (localization, mobile, module system, large-graph readability, simulation playback, edge routing, data import, …) live under docs/.

Latest — v0.11.0

• Region select — a one-shot rail tool to rubber-band several nodes (Shift-drag and Ctrl/Cmd-click still work), with a persistent selection count in the right column / the mobile Inspector sheet, never on the canvas
• Faster orthogonal routing — the same routes, rebuilt 10–20× faster on the bundled templates with a fraction of the memory, and smoother node drags
• Fixes — a selected node is never dimmed by Focus mode; Register / Parameter values are never clipped by the node rim
• Test bed — every visual baseline reviewed and refreshed, a per-capture snapshot tolerance policy with a guard, and a type-checked e2e/

See CHANGELOG.md for the full v0.11.0 notes, the v0.10.x releases and every earlier one.

Credits

Created by Hanrim · Cozy Shelter.

Loop Studio is an independent project and is not affiliated with or endorsed by Machinations.io. Its modeling approach is informed by publicly documented academic work on game-economy diagrams.

Copyright

Copyright © 2026 Hanrim. All rights reserved.