What is the Codio Guides authoring tool?

A Codio project can have a single Guide. Within that Guide you can have as many sections as you like.

To create a new Guide, or to edit an existing one, go to the ‘Tools->Edit Guide’ menu option.

Having selected 'Edit Guides’ you will see your Guides window appear.

Use the Layout modes to switch between editor, preview,code and split view modes.

Anatomy of the Guides Editor

Below is a screenshot of the editor with the main components highlighted.

Editor Settings

Editor settings gives you access to the key functions:


  • Layout allows you to specify the panel layout you want to choose for this section,
  • Step Path allows you to define specific folders in your project that you wish to be visible when the current section is displayed,
  • Close Tabs allows you to close all tabs open from previous section,
  • Set Section as Chapter allows you to set the section as a chapter in your guides,
  • Teacher Only allows you to show content that only teachers are able to see.

Open Tabs

allows you to specify:

  • which files you want to automatically open when the current section is displayed,
  • Preview (including external websites),
  • Open a Terminal window (including running a terminal command in the background,
  • which lines (if any) you wish to highlight within each file.


allows you to set up assessments


  • Theme allows you to select the default theme for people viewing the Guide. We currently have a light theme and will be adding a dark theme shortly. (Dyslexic users can also choose a special theme from the Settings drop down in the Guide player.
  • Scripts allows you to point to one or more .js files in your project (usually you would have this somewhere within the .guides folder) that is run when the page is shown. This is especially useful when interacting with a Guide button.
  • Lexicon Topic if you use this option, an icon will appear in the Guide toolbar that will load the Lexikon window with the selected topic automatically selected.

    • Hamburger Icon can be pressed to show or hide the Section List.
    • Section List lists the sections in your Guide. You can add new ones and re-order the list by dragging