Skip to content

Schema and Code Editors

The Properties area is where Studio moves from canvas sketching into real interface definition.

Properties Tabs

  1. State: edit state fields and value schemas
  2. Commands: define callable commands and parameters
  3. Port: declare data inputs/outputs and their schemas
  4. Node: change labels, colors, and other visual metadata

State tab Commands tab Port tab Node tab

Schema Editor

Schema UI Schema JSON

Use the schema editor to make contracts explicit. In Studio, valueSchema drives:

  • runtime validation
  • editor form rendering
  • completion and inline assistance in Python-related editors

Prefer clear schemas over loose any ports for graphs you plan to maintain or hand off.

Monaco Code Editor

Monaco editor

Common shortcuts:

  1. Ctrl+S: save
  2. Ctrl+Q: close
  3. Ctrl+Space / Ctrl+J: completion
  4. Ctrl+Shift+Space / Ctrl+Shift+J: parameter hints
  5. Esc: close suggestion popup

Authoring Tips

  • Model state and ports first; write code second.
  • Put reusable logic in operator/service nodes, not ad-hoc text notes.
  • Tight schemas improve grep-ability, refactoring safety, and editor support.