Introduction

Playground and Studio — Developers

Audience: Engineers running the local UI apps.
Related: Overview

Case file

CASE FILE · SIM-04

1. Two surfaces

Two separate UI apps over @x12i/api-simulator. They are not one merged workspace.

Surface	Job	Mindset
Playground (`apps/playground`)	Try a request in ~30 seconds	Ephemeral, session-only
Studio (`apps/studio`)	Author and own a simulator	Persistent (IndexedDB), exportable

Playground Open in Studio hands off the current definition via sessionStorage.

Case file

CASE FILE · SIM-04

2. Run locally

From the repo root (after npm install and npm run build):

npm run build
npm run dev -w @x12i/playground   # http://127.0.0.1:5523
npm run dev -w @x12i/studio       # http://127.0.0.1:5521

Or use the root aliases: npm run dev:playground / npm run dev:studio.

Case file

CASE FILE · SIM-04

3. Ports

Ports come from @x12i/ports-manager zone api-simulator (5520–5539, even = API, odd = UI). Wrapper: scripts/api-simulator-ports.mjs.

Name	Port	Role
`api` / library-demo / codegen	5520	API
`studio` (Vite)	5521	UI
`flowstate` compose server	5522	API
`playground` (Vite)	5523	UI

npx x12i-ports zone api-simulator

UI apps vs API processes: Playground and Studio are Vite UI processes (odd ports). They do not need @x12i/core-service /_live. Example API processes that bind even ports (library-demo, FlowState compose, node-server) use @x12i/core-service for /health and /_live — see Adapters — HTTP process compliance.

Case file

CASE FILE · SIM-04

4. Product rule

Both apps edit a UI model that maps to SimulatorDefinition / endpoint behaviors. The library remains the API of record; the UIs generate and preview — they do not invent a parallel DSL.

Case file

CASE FILE · SIM-04

5. Out of v1 Studio

Cloud auth/sync, org SSO, CI, marketplace, multi-env matrices, and share links are deferred (Studio v1.1+).