1 · The Studio

Open the Studio in another tab and keep it beside you. Everything in this series happens there.

It looks like this the first time you arrive:

The Studio, on the Editor tab, with the blank starter show loaded.

Four regions, and that is the whole application.

The menu bar

One bar. Two menus, undo/redo, the document name, the tabs, and a status readout.

The two menus name two different filesystems, and mixing them up is the one thing worth getting straight early:

• Project ▾ is your disk. New project, Open folder, Open show file, Save, Save as, Examples, Copy show JSON. This is where your .json file lives.
• Show ▾ is the document the engine is running. New show file, Undo/Redo, Revert, Pretty/Condensed.

Project ▾. Examples is a submenu — that is where the shows in this series are loaded from.

On the right, the status readout tells you where the engine is running: web (wasm) means the engine is compiled into this page, fps is the real frame rate it is hitting, and fw is the engine version. Pointed at a board instead, the same readout names the board and its free heap.

Your show lives in the tab

The Studio keeps nothing on a server. Close the tab without Project ▸ Save as… and the show is gone. Each part of this series prints its full show at the end, so nothing here is unrecoverable — but save your own work.

The tabs

Three of them in the browser, six on a real device:

Tab	What it is
Live	The running show: speed, inputs, wiring, variables.
Editor	The show as blocks. Where you will spend the series.
Show	The same show as text — the actual show.json.
Config	Per-unit settings. Device only.
Files	The board’s storage. Device only.
Console	Logs and the validation report. Device only.

The last three are hidden in the browser because there is no device to have them: no drive to list, no Wi-Fi to configure, no serial log. The Studio is the engine without the hardware.

The palette

Every verb the engine has, grouped by what it drives. Drag one into any list in the tree.

This is the entire vocabulary. Not a curated subset — every verb is here, and the ones your show has no device for are dimmed rather than hidden, so you can always see what you would get by adding one. A show with no screen dims the whole Screen group; add a screen device and twelve verbs light up.

The rail folds away with the ▾ PALETTE header when you want the room. It is a width control, not a mode — the tree does not change when it is closed.

The tree — this is the editor

The middle column is your show, and it is where you build it. Not a preview of a file you type somewhere else: the cards are the editor. Type in a box and the engine has the change before you have let go of the key.

It is organised into three collapsible groups, in the order a show is read:

Collapsed. The number beside each group is how many things are in it.

Group	Holds	Answers
SETUP	Devices · Inputs · Buses · Drivers · Sensors	what hardware is there
DEFINES	Variables · Palette · Defs · Lists	what values you track
BEHAVIORS	Scripts · States · Rules	what it does, and when

Click a group header to open it, a section header inside it to open that, and the caret on a card to fold the card. Everything remembers whether you left it open, so you can close the parts of the show you are not working on and keep them closed.

Everything is a card with a name box

Each section ends with a ＋ new … box. Type a name into it and you have a new device, input, variable, script or state — already in your show, already running.

No dialog, no wizard. Type a name, press Enter.

Every card has a notes fold

The ▸ // notes fold on each card holds real // comments in your show.json: write one here and it is in the file you save; open a file that has them and they appear here, attached to the thing they were written above. They survive drags, renames and reorders, because a comment follows its object rather than its position in the file.

Two ways to add a step, neither of which is typing

Inside a script, the list of things it does is a drop target. You can drag a block from the palette into it — or, if dragging is not your thing, use the add bar underneath the list:

＋ effect, ＋ draw, ＋ flow, ＋ action. Click one, pick a verb, and the step appears in the list.

Once a step exists it is a row of labelled boxes and dropdowns — the device is a picker of your devices, the colour is a colour well, the flow is a three-item dropdown. Nothing on that row is free text unless the value genuinely can be anything.

The live preview

Pinned beside the tree. This is the engine, not a drawing of it.

The right-hand rail runs the show while you edit it. Every pixel in it was produced by the same code that would drive the real LEDs — colour order, brightness, timing and all. If your show has a screen, its framebuffer appears here too, and any inputs you declared become buttons you can press.

The Live tab

The Live tab: the same running show, with everything the engine knows about it on one page.

Worth knowing about before you need it:

• Master speed scales the whole show. Drag it to 0.25 and every animation — and every sound — runs at quarter speed, because time flows downhill from the root. It is the best debugging tool in the application.
• Wiring and board pinout show which pins your show has claimed, live. A pin that does not exist on the board, or that two devices both want, is caught here rather than on the bench.
• Effects lists your scripts, lit when they are running.
• Variables shows every var in the show, updating in real time. time, audioLevel and unitId are built in and always there.

That is the tour

You now know where everything is. Part 2 puts something in it.