Supported Layouts

Use the uilayout within your scenario's index.json.

Layout	Implementation Notes	UILayout ID
Terminal	Instructions on the left, terminal on the right	terminal
Editor + Terminal	Instructions on the left, editor on the top-right and terminal on the bottom-right	editor-terminal
VS Code + Terminal	Instructions on the left, VS Code on the top-right and terminal on the bottom-right	vscode-terminal-split
Terminal + Iframe tab	Instructions on the left, terminal on the right and a tab with the iframe	terminal-iframe
Terminal + Iframe	Instructions on the left, iframe on the top-right and terminal on the bottom-right	terminal-iframe-split
Iframe	Instructions on the left, iframe on the right	iframe

You can try the layouts and discover additional functionality at https://katacoda.com/scenario-examples/courses/uilayouts.

Read more about customizing these layouts on the Customizing Layout documentation page.

Tabbed Based

If you wish to use VS Code as a separate tab, add the following to your index.json.

"environment": {
    "showide": true
}

An example can be found in the Scenario Examples. You can try this scenario on Katacoda.

Split Screen

If you wish to use VS Code as a split screen with the terminal, use the uilayout vscode-terminal-split, for example:

"environment": {
  "uilayout": "vscode-terminal-split"
}

An example can be found in the Scenario Examples. You can try this scenario on Katacoda.