# 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.