Develop a Miblo app without a Miblo: the simulator

Three commands#

You don't need a Miblo to make a Miblo app. The miblo command, which comes with Miblo installed on the computer, creates the app, shows its screen in a simulator in your browser and checks everything with the store's own rules:

miblo apps new "My App"         # creates the folder my-app
miblo apps dev my-app           # the simulator in your browser
miblo apps check my-app         # the store's checks

Nothing to install: the app is the code package the store takes (manifest.json and main.js, which exports run(ctx)), and the SDK reaches it through ctx, as it does the official apps. miblo apps new "My Alerts" --alerts creates an app that only sends alerts.

miblo apps new#

Creates a folder named after the app in lowercase (my-app) with three files:

• manifest.json: the id, the name and the promise in Portuguese and English, one setting, the addresses the app reaches (network, empty: offline), how often it runs (intervalMs) and the store's preview card;

• main.js: a real app. The screen shows the time, a ring with how much of the workday is gone (with the sweep effect), the week on a bar and a live chart fed by ctx.screen.push();

• README.md: the next steps.

miblo apps dev#

Opens a page at http://127.0.0.1:<port>/?t=<code> that only this computer can open. Behind it runs the real Miblo: the same bridge, the same Status API, the same limits and validators, with a virtual Miblo paired in place of the device. Your app runs as an app installed from the store does, in the same sandbox (it reads only its own folder and reaches only the addresses in network). What passes in the simulator passes on the Miblo.

On the left, the page has the Miblo: the 240 × 240 screen drawn by the Miblo app's own mirror, with the card, the effects (fx), the background pictures and the frame and tile animations. The live chart plays its batches as the Miblo gets them. An app alert shows over the screen as on the Miblo: one at a time, for the seconds it asked, with the violet flash when it is important. On the right there are four panels:

• Store checks: green when the store would take the app; each refusal with its file and line;

• App settings: the form people see in the Miblo app, with the same rules; save and watch the screen change;

• Alerts: "Allow this app's alerts" (the first alert only asks, as on the Miblo), the alert on screen and those waiting;

• App log: what the app writes with ctx.log, its errors and what the sandbox blocked.

Every time you save a file in the folder, the checks run again and the app restarts. The "Restart the app" button does the same.

What the simulator does not show as the device does: the card uses the computer's fonts, not the Miblo's; Mode 7 and 3D stay still (they play on the Miblo only); the alert's drawing is an approximation (its order and timing are the Miblo's); and the App screen is always in view, while on the Miblo it shows when the person chose (miblo apps when; by default after 60 s without activity).

miblo apps check#

Runs on your computer, offline, the same checks the store runs when you submit the app: the code analysis (forbidden modules, eval, addresses outside network, files it does not take, the size) and Miblo's rules for what the app declares (the settings and the preview card, which must fit the Miblo's fonts and icons). Exits 0 when the store would take it; --json gives the whole result.

miblo apps check my-app
# my-app: ready to submit (nothing the store refuses).

Then zip the files (without the hidden folders) and submit them at Submit an app:

cd my-app && zip -r ../my-app.zip . -x '.*'

Without Miblo installed#

Download the starter: https://miblo.ai/dl/extras/miblo-app-starter-1.27.0.zip. It holds the two examples (examples/meu-app and examples/meus-alertas) and the simulator, and needs only Node 22.15+, 23.5+ or 24+ (the apps' sandbox uses its permission model). The commands are the same:

node sim.mjs new "My App"
node sim.mjs dev my-app
node sim.mjs check my-app