Creating Tabs

Overview

Tabs are interactive UI elements that display different types of content in your lab interface. They provide access to terminals, web applications, code editors, external documentation, and reference materials. Tabs help organize your lab environment by allowing users to switch between multiple tools and resources without cluttering the interface.

You configure tabs within layout resources, which define how your lab’s interface is structured and what tools users have access to.

The Instruqt platform supports five main tab types:

• Terminal - Interactive command-line access to containers
• Service/Web Application - Web applications and HTTP/HTTPS services
• Code Editor - Browser-based code and file editor
• Web Browser - Embedded external documentation and tools
• Note/Document - Static reference materials and documentation

Tab Types

When adding a new tab, you can choose from the following types:

Terminal Tabs

Terminal tabs provide command-line access to containers in your lab. They’re essential for hands-on tasks that require users to run commands, edit files, or interact with services.

Supported fields:

Field	Required	Description
Name (internal)	✓	Used for internal reference. Not visible to end users
Target	✓	Container to attach the terminal to
Shell		Shell program to use (default: /bin/sh)
User		User to run terminal as (default: root)
Group		Group to run terminal as (default: root)
Working Directory		Initial working directory (default: /)
Command		Command to execute instead of interactive shell

Note

Terminal tabs can only target container resources. They cannot directly target Kubernetes or Nomad clusters.

Service Tabs

Service tabs expose web applications, APIs, and dashboards running in your containers. They create an HTTP/HTTPS proxy that users can access directly from the lab interface.

Supported fields:

Field	Required	Description
Name (internal)	✓	Used for internal reference. Not visible to end users
Target	✓	Container hosting the service
Scheme		Protocol: http or https (default: http)
Port	✓	Port number the service listens on
Path		URL path to append to requests

Note

Service tabs can only target container resources. To expose Kubernetes services, create a proxy container or use ingress resources.

Editor Tabs

Editor tabs provide a browser-based code editor with support for multiple workspaces. Users can edit files from your local filesystem or directly from containers.

Supported fields:

Field	Required	Description
Name (internal)	✓	Used for internal reference. Not visible to end users

Workspace block fields:

Field	Required	Description
Name (internal)	✓	Used for internal reference. Not visible to end users
Directory	✓	Path to directory to expose
Target		Container to access files from (optional)

Note

• Workspace names must be unique within an editor
• When target is omitted, the directory is resolved relative to your lab configuration file
• Each workspace appears as a separate folder in the editor sidebar

External Website Tabs

External website tabs embed external documentation, cloud consoles, or online tools directly in your lab interface. This keeps users focused on the lab without switching browser tabs.

Supported fields:

Field	Required	Description
Name (internal)	✓	Used for internal reference. Not visible to end users
URL	✓	URL of external website (must use HTTPS)
Open in new window		Open in new browser window (default: false)

Caution

• URLs must use HTTPS (HTTP is not allowed)
• Some websites block iframe embedding with X-Frame-Options headers

Note Tabs

Note tabs display static markdown content for reference materials, quick tips, or supplementary documentation. Unlike instruction pages, notes don’t support progress tracking or interactive components.

Supported fields:

Field	Required	Description
Name (internal)	✓	Used for internal reference. Not visible to end users
Content	✓	Markdown content for the note

Note

Key differences from instruction pages:

• No progress tracking
• Cannot embed <instruqt-task> or <instruqt-quiz> components
• Supports variable substitution with Handlebars syntax
• Use only for supplementary reference materials

Using Tabs in Layouts

After creating your tab resources (terminal, service, editor, etc.), you add them to your lab interface through layouts. For detailed instructions on adding tabs to layouts, see Adding Tabs to a Layout.

Summary

Tabs are the building blocks of your lab’s interactive interface. By combining different tab types—terminals, services, editors, external websites, and notes—you create comprehensive learning environments that provide everything users need in one place.

Key points to remember:

• Five tab types: Terminal, Service, Editor, External Website, and Note
• Usage in layouts: Tabs are created as resources and added to layouts

For detailed information about each tab type, see the reference documentation:

• Terminal
• Service
• Editor
• External Website
• Note
• Layout

For guidance on designing effective layouts, see Designing Layouts.