The desktop allows your users to run code that creates a graphical user interface (GUI) window.
A Desktop example


The desktop includes a number of features:
  • View and interact with GUI
  • Expand to fullscreen to view larger GUIs
  • Works with every stack
Full GUI
More information can be found in the project user guide.
If you currently have a content embedded using an iframe, you will need to add the following tags to your iframe code to enable fullscreen mode: allowfullscreen webkitallowfullscreen mozallowfullscreen.

Getting Started

To get started, you have to decide whether the course will only need the desktop tab, or if the user will be using other tabs. If the course only needs the desktop tab, select Desktop in the Interface Selection section of the Interface tab. In most cases, however, the user will need the ability to use other tabs, for example the Code Editor and Terminal. Below is an example of a course that uses both the code editor and terminal:
Example of a course using three panes
You will notice the image above is a little busy and could be overwhelming for a new user. Another way to incorporate a desktop tab into a course is using fewer panes. Below is an example of a course that still uses the code editor and terminal, but only uses two panes:
Example of a course using two horizontal panes
Using two panes instead of three makes the interface less crowded, but still allows the user to interact with all three tabs seen above.
Once you have decided how you would like your interface to look, be sure to use the Save button in the top left corner of your screen.
Copy link
Getting Started