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:

• Data : the Navigator rail's ⌘6 . What does this page or component know, and what is it worth right now? Declare values, computed entries, data sources, and functions here, and read what each one resolved to as the page runs. Fetches wait for a Refresh or for preview and do not re-run on every edit.

• The Logic tab : the Inspector's third tab, ⌘⇧3 . How does this element behave? Events, repeating lists, conditions, and a custom element's outward contract all live here, because they are one job: wiring the selected element to something.

• Formulas : not a place but an affordance. How is this value computed? A state entry can be a formula, an event can run one, and every operand inside one can be another, with live previews of the real result as you build. A formula workspace opens in the Bottom dock when a formula outgrows an inline field. It sits under the page rather than over it, so you can watch the value it computes change as you edit it.

• 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 instead of a cramped text box.

A counter in 60 seconds

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

1. Open a component and press ⌘6 for Data . Choose + Add… > Value , 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 . Click the value source chip beside Text Content on the Content tab, pick From data… , and choose $count .

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

4. Pick Preview in the View control on the context bar and click the button. The number climbs, and in the Data panel ( ⌘6 ) 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 Data first, because every other surface refers back to what you declare there.

• Use the Inspector's Logic tab whenever behavior belongs to one element ("this button submits", "this list repeats per product", "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.

• Prefer the plainest value source a field will accept. A signal ( From data… ) is easier to read and to revisit than a formula that only fetches one value.

• Come back to 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 Data panel

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

• The reactive model underneath it all is documented in Reactivity