Skip to main content
Labs are interactive coding environments where you apply programming concepts. Each lab includes a full-featured code editor, terminal access, file explorer, and automated testing.

​
Lab Interface

The lab environment consists of several panels:

​
Activity Bar

The leftmost vertical bar provides access to:
IconPanelPurpose
FilesExplorerBrowse and open project files
BookInstructionsView lab objectives and guidance
SearchSearchFind text across all files
ContainerServicesManage Docker/Podman services
FlaskTestingRun and view test results
LightbulbSolutionView the solution (if available)
SettingsSettingsConfigure editor preferences

​
Editor Area

The central panel shows:
  • Editor tabs: Open files with dirty indicators (•)
  • Code editor: Monaco-based editor with syntax highlighting, IntelliSense, and git diff markers
  • Split view: Open two files side-by-side

​
Bottom Panel

Collapsible panel with tabs for:
  • Terminal: Integrated terminal sessions
  • Diagnostics: TypeScript/LSP errors and warnings

​
Status Bar

Bottom bar displaying:
  • Current file language and encoding
  • Cursor position (line, column)
  • Tab size
  • Vim mode status (if enabled)
  • Error and warning counts
  • Lab provisioning status

​
Opening Files

1

Open the Explorer panel

Click the Files icon in the activity bar
2

Navigate the file tree

Click folders to expand/collapse, click files to open
3

Alternative: Quick Open

Press Cmd+P (macOS) or Ctrl+P (Windows/Linux) for file search
Files specified in the lab manifest’s openFiles array open automatically when the lab loads

​
Editing Code

The Monaco editor provides:
  • Syntax highlighting: Automatic language detection from file extension
  • IntelliSense: Code completion powered by TypeScript and LSP servers
  • Multi-cursor editing: Cmd+D / Ctrl+D to select next occurrence
  • Git integration: Gutter markers show added, modified, and deleted lines
  • Vim mode: Optional Vim keybindings (enable in Settings)

​
Saving Files

1

Manual save

Press Cmd+S / Ctrl+S or run “Save File” from the command palette
2

Auto-save (optional)

Enable auto-save in Settings to save on content change
3

Save confirmation

Dirty files show a dot (•) in the tab. Closing a dirty file prompts for save.

​
Using the Terminal

Terminals run inside the lab’s containerized environment:
1

Focus the terminal

Click the terminal area or press Cmd+\`` / Ctrl+“
2

Create new terminals

Press Cmd+Shift+\`` / Ctrl+Shift+“ or click the ”+” button
3

Switch between terminals

Click terminal tabs to switch between sessions
Terminals persist for the duration of the lab session. They are destroyed when you close the lab.

​
Running Tests

1

Open the Testing panel

Click the Flask icon in the activity bar
2

Run tests

Click the “Run” button or use the “Run Tests” command
3

View results

Test results show passed/failed assertions with detailed output
Labs are marked complete when all tests pass

​
Test Output

Test results display:
  • Assertion list: Individual test cases with pass/fail status
  • Raw output: Expandable section showing full test runner output
  • Duration: Total test execution time
  • Summary: Count of passed vs. total assertions

​
Searching Files

1

Open the Search panel

Click the Search icon in the activity bar
2

Enter search query

Type text to find across all files (supports regex)
3

Navigate results

Click results to jump to the file and line

​
Split Editor

View two files simultaneously:
1

Open the first file

Open any file in the editor
2

Split the editor

Press Cmd+\\ / Ctrl+\\ or run “Split Editor Right”
3

Switch focus between panes

Cmd+1 / Ctrl+1 for left pane, Cmd+2 / Ctrl+2 for right pane
Each pane maintains its own active file and can be scrolled independently

​
Managing Services

Labs can include Docker/Podman services (databases, Redis, etc.):
1

Open the Services panel

Click the Container icon in the activity bar
2

View service status

See health status, ports, and container state
3

Access services

Services are accessible on their configured ports (usually localhost)
Services are automatically started when the lab provisions. Stopping services may cause tests to fail.

​
Viewing Solutions

If a solution is available:
1

Open Instructions or click the Lightbulb icon

Solutions are accessible from the Instructions panel or Activity Bar
2

Click 'View Solution'

Opens the Solution panel with complete implementation
3

Reference the solution code

Use as a guide—solutions are read-only

​
Lab Lifecycle

Labs go through several states:
StateDescription
ProvisioningCreating workspace, installing dependencies, starting services
ReadyLab is active and ready to use
FailedProvisioning error occurred (shows error message with retry option)
Missing RuntimeDocker/Podman not detected (prompts for installation)
The status bar shows the current lifecycle state with a colored indicator

​
Command Palette

Access all lab commands:
  • File mode: Cmd+P / Ctrl+P - Quick file search
  • Command mode: Cmd+Shift+P / Ctrl+Shift+P - Run commands
Type > in file mode to switch to command mode.

​
Useful Commands

  • Toggle Sidebar
  • Toggle Word Wrap
  • Toggle Auto Save
  • Close All Tabs
  • Go to Line
  • Focus Explorer/Instructions/Search/Services/Testing

Build docs developers (and LLMs) love

Get started for freeTalk to us