live apps

A sandbox node holds code. A render sandbox draws something: a poster, a shader, a pattern, a small tool. It runs live on the canvas, so you see it change as you turn its dials or wire something into it. Its result flows out to whatever you connect next.

add one

Choose Sandbox in the dock's add menu, or right-click empty space and choose Add Sandbox. A new node arrives with a starter frame and a resident dev pixie, ready to build whatever you describe. See building with sandbox dev.

Two files can be the entry: index.jsx (a React component, with TypeScript and JSX) or index.html (a full document, good for posters and slides). Extra .js, .jsx and .ts files are local modules you import by full filename.

inputs

The node declares its inputs in a schema, and each one becomes a control:

declared as	control
number with min and max	slider
string, color format	color swatch
string, uri format	image slot (video, audio and PDF slots too)
enum	select
action	button

Where a control lives depends on its kind. Ports and per-run form inputs sit on the node's left edge with a handle: wire a text, image or number node straight into them. Dials are settings you tune once; they live in the Settings panel that opens when you select the node, and have no handle. The small arrow beside a control moves it between the two. A wired value always beats a typed one.

presets

If a node has several settings that only look right together, it can ship named presets. Use the arrows at the top of the Settings panel to cycle, open the list to choose one, and type a name under Save these as… to keep your own.

outputs

The code decides what the node produces, and Output in the code editor's Settings tab says how it travels:

output	what flows out
image	a PNG snapshot of the frame, or a file the code declares (an SVG, say)
json	a data value
bundle	a live HTML address

Press Run (the play icon) to produce a result; it appears in the node's generations. The lightning icon switches between auto (runs when inputs change) and manual. A node with an animation timeline renders a video instead; see scripts and cloud runs.

preview, pop-out and code

• Preview. The panel docked to the node's right edge is the live frame. Drag its edges to resize; the panel button collapses it.
• Pop out. The picture-in-picture button lifts the preview into a floating window over the canvas. Drag it, resize it from the corner, minimise it to a pill, or close it. It follows the node's live values.
• Edit code & settings. The code icon opens a full-window editor with one tab per file and a Settings tab for Kind, Run, Output and the input schema. Save applies your edits; the input schema must be valid JSON or the editor stays open and says so.
• Compose. On a render node the move icon lets you drag the elements the code has tagged into place. The code keeps what exists; you keep where it sits.

frames sleep

A render frame is a running page, so ixi keeps it running only while something needs it: the preview on screen at a readable zoom, your pointer over it, the node selected, or a run in progress. About 30 seconds after the last reason goes away, the frame sleeps and the panel shows a still: the last peek or the last run's thumbnail. The dot in the panel header shows the state: grey asleep, amber booting, green live.

A canvas full of sandboxes therefore costs almost nothing until you look at one. Hover, select, zoom in or wire a value in and it wakes.

limits & good to know

• Frames run in a locked iframe with no access to your account. Load media through the frame's own helpers so exports are not blocked by browser cross-origin rules.
• A file a button adds to the canvas (ixi.addToCanvas) must come within 30 seconds of a button press, at most 4 files per press, 25 MB each.
• A wired JSON file passes its contents as text, not its address.

related

• scripts and cloud runs — sandboxes that return data and run with no tab.
• derived columns — fill a table column from a sandbox.
• design scripts — generative art as a node.