This feature is currently in a closed beta. To request access for your organization, please reach out to your account executive. If you are unsure who your Account Executive is, please contact Skillable Support.
Lab Instructions are designed for hands-on labs to guide learners as they work within the lab environment.
This article describes the features available in the Instructions Editor and explain how to use them. The Skillable Studio Visual Instructions Editor is a versatile and powerful Markdown editor. It supports both Markdown (Code) mode and Visual mode, making it easy to switch between writing in plain text and a more visual format.
Editor Key Features
Visual Mode: Write documents in Visual mode with ease using common editing tools. There is no need to know Markdown to create great lab content.
Markdown Code and Visual Modes: Write in Markdown and see a live preview of the formatted text.
Syntax Highlighting: Easily read and write code.
Scroll-Sync: Keep your editor and preview in sync as you scroll.
Spell Checker: Enable spellcheck capabilities for Visual mode.
Drag and drop: Simply drag and drop tokens, variables, and Activities right into the editor.
Clickable content objects in Visual Mode: Double-click action objects to edit them in a modal dialog without needing to learn any complex Markdown. Instead, let the dialog write the Markdown for you.
Switch to the Visual Instructions Editor
The Visual Instructions Editor is a great tool for anyone who needs a robust editor for writing lab instructions. To access Visual mode, select Visual in the bottom left corner. To switch back to Markdown (Code) mode, select Code.
Features of the Visual Instructions Editor
.png?sv=2022-11-02&spr=https&st=2025-07-16T03%3A18%3A39Z&se=2025-07-16T03%3A40%3A39Z&sr=c&sp=r&sig=yRz5NQwhIIghs4mdAXWC6Aawdahz3xDPtFOdlEv1AWE%3D)
Ribbon Bar: Apply general formatting, layout, paragraph formatting, and power tools.
Left Action Panel: Effortlessly work with all of Skillable’s specialized features, including Lab Tokens, Lab Activities, Replacement Tokens, and Swap Text.
Top Menu Bar: Use the Editor tab, Activities tab, Help tab, Settings menu, and the Instructions Set dropdown menu.
Bottom Bar: Switch between Visual and Code mode in the editor and control the Autosave toggle (or save your changes manually).
Learner Preview: Update the lab’s theme and see a live preview of the instructions as they would show for a learner.
Ribbon Bar Features
General Formatting
.png?sv=2022-11-02&spr=https&st=2025-07-16T03%3A18%3A39Z&se=2025-07-16T03%3A40%3A39Z&sr=c&sp=r&sig=yRz5NQwhIIghs4mdAXWC6Aawdahz3xDPtFOdlEv1AWE%3D)
Button | Item | Description | Key Combo |
|---|---|---|---|
| Bold | Adds bold emphasis to selected text. Use this to emphasize important words or phrases. | Ctrl+B |
| Italic | Adds italic emphasis selected text. This is often used for emphasis or to denote titles of works. | Ctrl+I |
| Strike | Adds a strikethrough to selected text. This can be useful for showing deletions or changes. | Ctrl+Shift+X |
| Heading | Changes the selected text to a heading. Headings are used to organize content into sections. | |
| Blocks | Formats the selected text as a block element, such as a blockquote or Skillable special formatting. Special formatting is predefined when you select (Alert, Note, Help, Hint, and Knowledge blocks). | |
| Links | Adds a hyperlink to the selected text. This is useful for linking to external resources or other parts of the document. | Ctrl+K |
| Code | Formats the selected text as code. | Code Sample: |
Layout and Paragraph
.png?sv=2022-11-02&spr=https&st=2025-07-16T03%3A18%3A39Z&se=2025-07-16T03%3A40%3A39Z&sr=c&sp=r&sig=yRz5NQwhIIghs4mdAXWC6Aawdahz3xDPtFOdlEv1AWE%3D)
Button | Item | Description | Key Combo |
|---|---|---|---|
| Bulleted List | Formats the selected text with a bullet list style. Each line in a multi-line selection will have a bullet. | Ctrl+U |
| Numbered List | Formats the selected text with a numbered list style. Each line in a multi-line selection will be numbered starting from 1. | Ctrl+O |
| Task List | Formats the selected text with an unordered task list style. Each line in a multi-line selection will have a task checkbox. Task lists can be created by first creating an ordered (numbered) list, then highlighting the list and then selecting the Task list button from the ribbon bar. | |
| Decrease Indent | Outdents the selected sub-elements one level within the context of a Bulleted List, Numbered List, or Task List. Multiple clicks allow only one level outdent from its parent. | Shift+Tab |
| Increase Indent | Indents the selected sub-elements one level within the context of a Bulleted List, Numbered List, or Task List. Multiple clicks allow only one level indent from its parent. | Tab |
| Insert | Inserts page-level objects like Page Break, Section, and Horizontal Rule at the current cursor position. | Horizontal Rule: Ctrl+L |
| Table | Opens the table menu for inserting tables. |
.png?sv=2022-11-02&spr=https&st=2025-07-16T03%3A18%3A39Z&se=2025-07-16T03%3A40%3A39Z&sr=c&sp=r&sig=yRz5NQwhIIghs4mdAXWC6Aawdahz3xDPtFOdlEv1AWE%3D)
Powertools
.png?sv=2022-11-02&spr=https&st=2025-07-16T03%3A18%3A39Z&se=2025-07-16T03%3A40%3A39Z&sr=c&sp=r&sig=yRz5NQwhIIghs4mdAXWC6Aawdahz3xDPtFOdlEv1AWE%3D)
Button | Item | Description |
|---|---|---|
| AI | AI Menu: Provides a chat prompt with options to teach, show steps, quiz, or find resources on a topic, using AI. |
| Type Text | Inserts Type Text tokens at the cursor’s current position, streamlining the content creation process. There are three variations: |
| Input Field | Allows inserting various input field types as tokens within the Visual Instructions Editor. |
| Author Comment | Inserts a comment section. Whether text is selected or not, the modal popup provides an intuitive interface for adding comments, preserving existing content. |
| Include Instructions | Provides a more versatile approach to incorporating external instructions into your lab content. This allows external instructions to be included, as well as referenced instructions that are defined in the current instruction set. |
| Import from File(s) | Imports content from a file to your current instruction set. Supported file types include: Microsoft Word (.doc or .docx), Markdown (.md), and RTF (.rtf). |
| Upload Media | Easily insert images, videos, and audio without pasting them into the editor. The dialog box supports drag-and-drop for multiple files and offers options to display files inline or as links, and to overwrite existing files. |
.png?sv=2022-11-02&spr=https&st=2025-07-16T03%3A18%3A39Z&se=2025-07-16T03%3A40%3A39Z&sr=c&sp=r&sig=yRz5NQwhIIghs4mdAXWC6Aawdahz3xDPtFOdlEv1AWE%3D)
.png?sv=2022-11-02&spr=https&st=2025-07-16T03%3A18%3A39Z&se=2025-07-16T03%3A40%3A39Z&sr=c&sp=r&sig=yRz5NQwhIIghs4mdAXWC6Aawdahz3xDPtFOdlEv1AWE%3D)
Additional AI Information
AI Menu
AI Menu provides a chat prompt to the user with instructions, commonly used to wrap text with syntax that serves as a topic. The text of the link is the topic (e.g., Azure Storage Accounts). Selecting the link displays a menu with four options:
Teach me: Generates a text response designed to teach the learner about the provided topic.
Show me: Generates a list of steps on how to perform the topic, which is useful if the topic text starts with a verb (e.g., "Create an Azure Storage Account").
Quiz me: Generates multiple choice questions on the topic. Attempts to process responses interactively, providing Correct or Sorry, try again feedback based on the answer.
Find Resources: Generates a list of links to web resources about the topic.
AI Chat
AI Chat: Provides a chat-style interface to the user based on the provided topic.
AI Generated Content
Overview: Expands on AI features with four tags that leverage AI to respond to a given topic and format the output according to the specified format:
ai-teach
ai-show
ai-quiz
ai-resources
AI Content Tags: These tags (ai-teach, ai-show, ai-quiz, and ai-resources) are designed to generate specific types of content directly, without needing an intermediary selection menu. They allow content creators to specify the type of AI-generated content required at any point in their documents, simplifying the creation process.
Left Actions Panel
Button | Item | Description |
|---|---|---|
| Tokens | Create dynamic text placeholders that enhance your lab's interactivity and personalization. |
| Activities | Provide interactive lab instructions and environments when used for scoring. |
| Variables | Personalize and fine-tune your lab like never before. |
| Text Swap | Seamlessly change what users see in your lab without altering the actual content. |
Functions within Left Actions Panel
Item | Description |
|---|---|
Text Search | Allows users to easily start typing and search text within the token name or description and present the corresponding token cards. |
Filter | Quickly filters based on available groups. |
Search Results | Displays a results message to indicate how many cards are filtered of the total available. |
Drag Icon | Allows a user to drag and drop the token card into the editor. |
Hovering over Card | Highlights where in the instructions the token is inserted. |
Top Menu Bar
.png?sv=2022-11-02&spr=https&st=2025-07-16T03%3A18%3A39Z&se=2025-07-16T03%3A40%3A39Z&sr=c&sp=r&sig=yRz5NQwhIIghs4mdAXWC6Aawdahz3xDPtFOdlEv1AWE%3D){kind=small}
Button | Item | Description |
|---|---|---|
| Editor | Displays the Editor screen. |
| Activities | Displays the Activities Manager screen. |
| Help | Allows users to easily navigate to the help documentation. |
| Settings | Allows users to set Editor Settings and Lab Options. Editor mode context is supported, which means Code editor-specific settings are only visible when using Code editor. For more information, see the section for Editor Settings. |
| Instruction Sets | Allows user to easily switch between different Instruction Sets while staying in the editor. There is also an option to Manage Instructions Sets. |
| Close | Closes the instructions editor. |
Bottom Bar
Button | Item | Description |
|---|---|---|
| Editor | Allows users to easily switch between Visual mode and Code mode. |
| Autosave | Default = ON when editing and will auto save the changes. Once toggled to OFF, it will allow the user to select Save Changes. |
| Save Changes | Default = OFF when editing. Once Autosave is toggled to OFF, it will allow the user to select Save Changes to save any changes to the instructions. |
Visual Editor Settings
Setting | Description |
|---|---|
Learner Preview | Displays a preview of the lab instructions next to the code view, which updates in real time as changes are made to the lab instructions. |
Sync Learner Preview Location | Syncs the position of the code view and position of the lab instructions preview while scrolling in the lab instructions editor. |
Set Code Editor as Default | Sets the Code editor as the default editor. |
Spellcheck | Identifies and highlights any spelling errors to ensure accuracy in your text. Currently, this feature is only available in the Visual Editor. |
Track Task Progress | Displays a progress bar at the bottom of the lab instruction window with the total number of tasks the lab user has to complete. When they check a task, the progress bar reflects their progress. |
Require tasks to be completed in order | Requires lab users to complete tasks in the order they appear in the lab instructions. |
Auto-Check Previous Tasks | Allows a lab user to select a task in the lab instructions to automatically mark all previous tasks as complete. |
Code Editor Settings
Setting | Description |
|---|---|
Learner Preview | Displays a preview of the lab instructions next to the code view, which updates in real time as changes are made to the lab instructions. |
Sync Learner Preview Location | Syncs the position of the code view and position of the lab instructions preview while scrolling in the lab instructions editor. |
Set Code Editor as Default | Sets the Code editor as the default editor. |
Code Editor Word Wrap | Allows the text to wrap to the next line when it reaches the end of line in the editor pane. |
Code Editor Zoom | Adjusts the zoom level while viewing the editor. |
Track Task progress | Displays a progress bar at the bottom of the lab instruction window with the total number of tasks the lab user has to complete. When they check a task, the progress bar reflects their progress. |
Require tasks to be completed in order | Requires lab users to complete tasks in the order they appear in the lab instructions. |
Auto-Check Previous Tasks | Allows a lab user to select a task in the lab instructions to automatically mark all previous tasks as complete. |
Learner Preview
The Learner Preview, if enabled, displays a pane to the right of the Editor representing the instructions as viewed within the Lab Client. This is what a typical user sees when they launch a lab. Providing a live preview speeds up the content creation process.
To enable or disable Learner Preview:
Along the top of the editor, select the Gear icon to open the settings menu.
Toggle Learner Preview on or off and then click anywhere on the screen to close out of the settings menu.
Frequently Asked Questions
What happens when I add in Markdown the Visual Editor can’t render?
Sometimes there are certain Markdown patterns that users can add to Code mode that Visual mode cannot display properly. In this case, a popup displays indicating that the Visual Editor is currently disabled. No worries, you’re automatically redirected back to Code mode, and Visual mode is disabled to prevent any issues with editing. You will always have an editor that allows you to work effectively.
Can I change my default editor?
If your lab has some advanced or unique patterns that the Visual Editor can’t render properly, you can chance the default editor mode.
You may also prefer to write your lab instructions in Markdown, using Code mode as the default option. To enable Code mode as the default, use the Settings menu to toggle the Set Code Editor as Default option on.
To reset to the Visual Editor, toggle the Set Code Editor as Default option off.
What are Tokens?
Tokens, also known as Replacement Tokens, are dynamic text placeholders that enhance your lab's interactivity and personalization. By inserting structured text (of the format @lab.TokenName) into instructions or scripts, it will dynamically be replaced in each lab launch with personalized text or interactive components like user-specific names, unique identifiers, questions, or dropdown menus. Tokens empower you to create engaging, personalized, and ever-changing lab experiences, fostering interaction and customization for a more immersive skills journey. For more information about Replacement Tokens, read our Replacement Tokens documentation.
What are Activities?
Activities provide ways for users to interact with lab content. Activities also allow authors to assess how well a user is doing in their lab. Activities can consist of interactive questions, automated scripts, or even groups of multiple activities.
You can reference activities in your instructions by using the activity's Alias. For example, if you have a question with the alias "q1", you can reference it in your instructions like this: @lab.Activity(q1). When a learner reaches this point in the instructions, they will see the question you created. For more information about Activities, read our Activities documentation.
What are Variables?
Variables empower you to personalize and fine-tune your lab like never before. Think of them as dynamic settings that you control, allowing you to tailor each launch to your exact needs. While some variables could be as simple as 'Personalized: Yes/No,' others might be complex like SSH keys or completely unique identifiers. This customization injects dynamism into your lab, making every instance distinctive and precisely suited to your requirements. For more information about Variables, read our Variables documentation.
What is Text Swap?
Text Swap empowers you to seamlessly change what users see in your lab without altering the actual content. Just like using find/replace in documents, Text Swap allows you to transform visible text elements while keeping the original text unchanged. For instance, you can transform 'Sign in to the environment' to 'Login' for users, while preserving the original wording for backend operations. Whether you need case-sensitive changes, case-insensitive adjustments, or even more intricate transformations using regular expressions (Regex), Text Swap provides a user-friendly solution to enhance the user experience.