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. Work is kept in your browser profile only when you say it is your own browser; on a shared computer a temporary session neither reads nor saves stored work, author information or settings (docs/storage-sessions.md).
Run it now: https://cozy-loop-studio.pages.dev — available in 18 languages, with five bundled Templates ranging from a small production flow to a large game economy and a three-zone probability/pity comparison.
- 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, or place nodes in a named frame that moves with its contents
- Seeded RNG + Monte Carlo — probabilistic gates and flows, and many-run outcome distributions with percentile bands
- A small model language —
parameter/registernodes with a safe arithmetic expression grammar, guided@-autocomplete authoring, and a name-and-value read-back - Executable state connections —
trigger(+ delay),activator, andlabelPool 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 (optionally protected with a password), and a UI translated into 18 languages
The UI ships in 18 languages, listed here the way the in-app picker orders them. Pick one under Settings → Language; the first visit follows your browser's language, and the choice is remembered on that device.
| Code | Language | In its own words |
|---|---|---|
ar |
Arabic | العربية |
zh-Hans |
Chinese (Simplified) | 简体中文 |
zh-Hant |
Chinese (Traditional) | 繁體中文 |
nl |
Dutch | Nederlands |
en |
English | English |
fr |
French | Français |
de |
German | Deutsch |
it |
Italian | Italiano |
ja |
Japanese | 日本語 |
ko |
Korean | 한국어 |
pt-BR |
Portuguese (Brazil) | Português (Brasil) |
pt-PT |
Portuguese (Portugal) | Português (Portugal) |
ru |
Russian | Русский |
es-419 |
Spanish (Latin America) | Español (Latinoamérica) |
es-ES |
Spanish (Spain) | Español (España) |
th |
Thai | ไทย |
tr |
Turkish | Türkçe |
vi |
Vietnamese | Tiếng Việt |
Regional pairs are separate locales, not one catalog with a flag: a browser
asking for pt-PT gets European Portuguese, while pt, pt-BR and the
African Portuguese tags get Brazilian — and the same split holds for the two
Spanish and the two Chinese catalogs. See
docs/localization.md for the resolution order and
the per-locale notes.
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.
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-endRequires 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.
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, with errata),SEMANTICS-P.md(password-protected 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/.
Playback speed changes what a step draws, and the phone gets a speed choice of its own.
- Three speed tiers: at 0.4 s a step or slower the marker travels with its
+N; faster,+Nappears when it arrives; below 0.2 s the path flashes and the marker appears at its end; Step always shows the full movement - Playback speed on the phone: More → Playback speed offers Slow, Normal, Fast and Very fast
- Fewer moving markers on the phone: at most 12 a step, and no departure ring; every other move keeps its highlighted path and arrival
Playback shows what happens inside the nodes: a Pool lights up as a marker arrives, and a Converter shows that it converts.
- The Pool lights up on arrival: when a moving marker reaches a Pool, the inside of the Pool briefly glows, under its title and value; the number still changes when the step ends
- A conversion mark inside the Converter: while a Converter's markers move, a small two-arrow mark shows inside it, at a spot clear of its text, and fades when the step ends
- Never faded by Focus mode: both stay at full strength in nodes outside the focus; with reduced motion they stay still for the step, and in forced colours the glow is a thin line
Playback shows what moved where: the path a Gate took, and every amount beside its moving marker.
- The Gate's path lights up: during a run, each branch a Gate actually sends something down is highlighted under its moving marker; a branch that carries nothing keeps its usual look
+Nbeside every moving marker: the amount a connection carries in a step rides beside its marker as a badge, from+1; the connection's own label stays in place and fades only while the badge passes over it- Focus mode wins on connections: the markers, badges and highlights on connections outside the focus fade with those connections; in a busy step at most 24 markers move, and every other connection that moved is highlighted instead
A fix release: the canvas controls keep their place while editing is locked, and the phone's language search no longer zooms the page in.
- The frame buttons stay, turned off: Group frame and Clear all frames remain in the canvas controls while editing is locked, so the other buttons no longer move; before, the two disappeared and every button above them shifted down
- Locking turns the frame tool off: a drag on the empty canvas then moves the view, as it should while editing is locked
- No zoom from the phone's text fields: on an iPhone, tapping the language search used to zoom the page in and leave it zoomed; every phone text field is now large enough that it does not
See CHANGELOG.md for the full notes of these releases, v0.21.3 (the edit
lock is exact, and its button shows the state), v0.21.2 (values
and detail rows sit inside their node), v0.21.1 (Focus
mode dims the connections too), v0.21.0 (compact
nodes, so more of a large graph fits in view), v0.20.0 (flow
colours in the minimap and the timeline), v0.19.0 (flow
colours on nodes and connections), v0.18.2 (the
guided tour says each step once), v0.18.1 (one
keyboard contract for every menu), v0.18.0 (the third-party open-source licenses in the About dialog), v0.17.2 (the
Temporary session button drawn like the menu buttons), v0.17.1 (share
links compressed with the browser's own Compression Streams), v0.17.0
(password-protected share links), v0.16.0 (the storage gate, temporary sessions and the
Storage and privacy area), the v0.15 releases and every earlier one.
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 © 2026 Hanrim. All rights reserved.
Loop Studio includes third-party open-source components. Their licenses are in the app
(About Loop Studio → Third-party open-source licenses) and in every build
(licenses/README.md); they cover those components only.