Skip to main content
Studio is the browser workspace for Component authoring and saved Scratch files. Open Studio from the main navigation, then choose Components for deployable code or Scratch for drafts and operational notes. Studio replaces the separate Playground page.

Work with Components

The Components navigation keeps categories, Components and their elements together. Open several elements in tabs, drag a tab into another group or to an edge to split the editor, and resize each split. The breadcrumb identifies the current Component and element. Source changes remain pending until you review and deploy them. When the current revision and a proposed edit need reconciliation, use the merge view in Studio to compare the affected source and accept the intended result. Keep the final code and diagnostics visible in the same Studio workspace, then use the normal deployment review. Accepting a merge does not by itself deploy a Component.
  1. Open a Component or drag a category or Component into the workspace.
  2. Edit its elements, inspect diagnostics and use code search, Methods, Types and Libraries for references.
  3. Run representative input with restricted execution (readOnly: true). Choose full execution (readOnly: false) when an authorized write must be tested.
  4. Review the changed elements and validation result in Deploy, then deploy the intended changes.
A debug run is not automatically free of side effects. Use test data and confirm each called method’s behavior before running code that can change live resources.

Keep Scratch files

Scratch is a saved workspace for exploratory code and supporting text. Create a file with a name and format, then organize files in folders. Folders can contain other folders. Supported formats include JavaScript, TypeScript, Markdown, JSON, NDJSON, YAML, CSV and plain text. A single-file Scratch opens directly in a tab; code Scratch files can be promoted to Components after review. Scratch uses its own save action and automatic saving. Ctrl+S or Command+S saves the active Scratch; in Components, the same shortcut enters the Component deployment flow. Scratch files are stored in instance preferences, so keep Secrets in the platform’s governed Secret store rather than in a draft. To keep a Scratch file in managed Storage, open its menu and choose Export to Storage. Select Private or another writable Storage workspace, then choose its root or an accessible folder and confirm Export here. Studio uploads the file in its selected format and encoding, and records Scratch source and encoding metadata on the saved Storage entry. The Scratch draft remains in Studio; the exported file follows the destination workspace’s access rules. See Storage for file access and organization.

Arrange the workspace

Input and Code share the default lower-left tool group. Terminal, Output and Performance share the lower-right group; Terminal is selected initially. Methods, Types, Libraries, Secrets, recent runs, working diff and code search are available from the right rail. Drag a tool tab to join a group or create a new split; drag rail shortcuts to rearrange them. Choose Select preference to restore a saved arrangement. Open the adjacent preference manager to name, describe, share or make a layout the default. Layout preferences save pane positions and open references, not copies of Component source or Secret values. The home action restores Studio’s standard arrangement. Studio Info offers a guided tour and a list of keyboard shortcuts. In Settings → Preferences, editor options such as font size and family, line numbers, word wrap, indentation, whitespace and minimap apply to Studio and other Monaco code or diff editors.

Run and inspect

Set JSON Input, and use Code input when running a JavaScript or TypeScript library. The run controls expose execution mode, configuration and a compact result. Open Terminal for the stream, Output for the returned value, Performance for timings, and recent runs for earlier executions. Working diff shows pending Component changes. The editor loads runtime declarations and active library namespaces. Library calls use the generated lib.LibraryName.ElementKey.member path:
If completion disagrees with deployed behavior, check the active library version and current declarations before changing source. Component deployment and runtime authorization remain governed by the existing roles and resource access rules.

Continue

The default library element displays a code icon and the lowercase italic label default. Its actual key is @default; edit its source to add exports, while rename and delete are disabled. Monaco presents default exports at lib.LibraryName.member, with the literal bracket alias for runtime values. See Libraries.
Last modified on October 14, 2026