Logic

There is no single "logic mode" in Studio. Interactivity comes from a few focused surfaces you move between, and each one answers a different question:

• State — an activity in the left panel. What does this page or component know? Declare values, computed entries, data sources, and functions here.

• Data — the activity right below it. What are those values right now? It shows the live, resolved data as the page runs.

• Events — a tab in the right panel. What happens when a visitor clicks or types? Bind behavior to the selected element here.

• Formulas — not a place but an affordance: almost any value field carries an fx menu that turns a fixed value into a computed one, with live previews as you build it. A full-screen workspace opens when a formula deserves the whole canvas.

• Code — the escape hatch. A real code editor for function bodies, and a Code canvas mode that shows any file as raw source.

Together they cover the whole range: most interactions never need code, and the ones that do get a proper editor rather than a cramped text box.

A counter in 60 seconds

Here is the shape of the workflow, end to end:

1. Open a component and click State in the activity bar. Choose + Add… > State Signal , name it $count , set its Type to integer and its Default to 0 . The component now knows a number.

2. Add a button to the canvas and set its text to show $count — any text field's fx menu can point at a state value.

3. With the button selected, open the Events tab and click Add Event . Set the event to onclick , choose the $expression mode, and build the one-step formula $count += 1 .

4. Toggle Preview on and click the button. The number climbs — and if you open the Data activity, you can watch $count change in real time.

No files were written by hand: Studio stored the value, the binding, and the handler inside the component's own JSON file.

When each surface applies

• Reach for State first — every other surface refers back to what you declare there.

• Use Events whenever behavior belongs to one element ("this button submits", "this field filters the list").

• Use formulas for values that are calculated rather than typed, and statements when a handler needs several steps in order.

• Open Data whenever something looks wrong — it shows what the page actually sees, not what you hoped it sees.

• Drop into Code when a function outgrows the structured editors, or when you want to read exactly what Studio wrote.

Next

• Declare your first values in the State panel

• Wire data in from files, APIs, and the browser with Data sources

• The reactive model underneath it all is documented in Reactivity