Playground
Hosted: play.eelden.dev
No install required for the hosted site. Open the link in a browser (phone or desktop) and the full engine runs in that tab.
This page uses plain English: short sentences, clear steps, and one complete worked example. You do not need to already know databases.
What it is
The playground helps you build a small app in three steps:
- Data — lists of things your app knows about
- Screens — how people look at that data or fill it in
- Try it — use the app without builder chrome
Field types choose what people see on screen (text box, number, switch, and so on). Actions are buttons that change your lists.
Data stays in this browser tab, Saved on this device when the browser allows it. There is no account and no share URL. To show someone else your work, use Share app (one file); they use Open app file in the playground.
How the pieces fit
Starter app (or lists you create)
↓
Data — named lists with rows and fields
↓
Field types decide what shows on screen
↓
Screens — fill-in forms and saved looks
↓
Actions are buttons that change data
↓
Try it — use the app without builder chrome
↓
Share app / Open app file — one portable file| Term | Meaning |
|---|---|
| Data / list | A named list of records (Players, Plots, Orders) |
| Row | One record |
| Field | One fact on a record (name, XP, ready time) |
| Editing | Permission to change data (footer or App menu) |
| Action | A labeled button that runs a prepared change |
| Screen | A fill-in form or a saved look at your lists |
| Save point | A named bookmark of data state (App menu) |
| Share app / Open app file | Download / upload the whole mini-app as one file |
Worked example: Crops
A complete loop that uses lists, time, actions, live refresh, and sharing. Follow every step once.
Setup
- Open play.eelden.dev.
- If the quick tour appears, step through it or tap Skip.
- Note the Editing control — it must be on before Plant or Harvest will save.
1. Load Crops
- Stay on Data (step 1).
- Under Starter apps (or from the App menu), tap Crops.
- Confirm you see Players and Plots.
You should also have:
- A player named you with XP 0
- Actions: Plant wheat, Harvest ready
- Screens / looks: Ready to harvest, XP board
2. Enable Editing
Turn Editing on (footer or App menu). If a write is blocked, use Enable & run.
3. Plant
- On Data, open Actions.
- Tap Plant wheat.
- Open the Plots list — a growing wheat row should appear.
The action inserts a plot with a ready time a few seconds ahead. You do not type a query.
4. Wait until it is ready
- Open Screens and choose Ready to harvest (or the matching look).
- The list may be empty at first.
- Stay on that screen for about 5–6 seconds.
- It should refresh on its own and show wheat.
The look filters with “ready at or before now.” The playground re-checks the clock while that screen is open, so you do not press Run.
5. Harvest
- Return to Screens or Data so Actions are visible.
- Tap Harvest ready.
- Open Data → Players (or the XP board screen).
- XP should read 10 (this starter awards a fixed +10 per harvest).
One action updates plots and players together — the same pattern as a game rule with two lists.
6. Try it
Open step 3 · Try it to use the app without builder chrome. Leave Try it when finished.
7. Share
- App menu → Share app — save the app file.
- On another machine or profile: App menu → Open app file and choose that file.
The file includes structure and live rows (not only starter seeds).
Field types and the UI
Under App menu → Edit structure, each field type maps to a control:
| Type | On screen | Typical use |
|---|---|---|
| Text | Text box | Names, notes |
| Number | Number field | XP, counts, stock |
| Yes / No | Toggle | Flags |
| Money | Currency amount | Prices, balances |
| Choice list | Dropdown | Status values |
| Link to list | Picker | Point at a row in another list |
The list stores the value; screens are the interface to that value.
Build your own (outline)
- One-sentence idea (inventory, points, tracker).
- List the data groups (nouns).
- List fields and pick types from the chart above.
- App menu → Edit structure — add lists and fields; apply when prompted (structure changes may reset sample data — share first if needed).
- Turn Editing on.
- Enter data via a list, a screen, or an action.
- Add a Screen for the question you care about.
- Try it, then Share app.
Prefer two lists and one closed loop before adding more.
Other starters
- Storefront — users, listings, orders
- CRM lite — contacts and deals
- Crops — timed actions and XP (best first complete loop)
Applying a starter replaces the current structure and sample data.
Chrome reference
Steps: Data · Screens · Try it
Footer: Editing · step-appropriate actions · Run only under Advanced (Build / Code)
App menu: Share app / Open app file · Edit structure · Save point · Advanced (Build / Code) · Restart guide · Reset & reseed
Status whisper: Saved on this device when durable storage is available.
If something fails
- Changes do not stick → turn Editing on.
- Plant seems to do nothing → check Plots and any error banner.
- Ready look stays empty → wait the full delay with that screen open.
- Shared file looks empty → use Open app file, not only the site URL.
- Too much chrome → Try it, or Restart guide under the App menu.
Local development
cd clients/studio && npm install && npm run build:wasm && npm run dev:playground
# open http://127.0.0.1:5173/?local=1PLAYGROUND_URL='http://127.0.0.1:5173/?local=1' npm run test:playground
# or: npm run test:playground:ciNotes for maintainers: in-tab wasm engine; OPFS when available; package v2 JSON with live rows; refresh-after-write and now() clock tick (no playground CDC websocket). Plans live under internals/plans/.