No special knowledge is needed to use Codio’s IDE.

It's easy enough for beginners who are learning to code.

Because it’s web-based, there’s nothing to download, install or update.

Exiting the IDE

You can exit the IDE and return to the Dashboard in one of the following ways

  • Select Project > Close from the menu
  • Click on the Gravatar in the top bar
  • Click on your user name in the top bar

Editing a file

You can open an existing file from the tree or create a new one from either the File > New File menu or by right-clicking in the file tree.

When you open a file, it will appear in a tab in the currently active Panel.

Codio will syntax highlight based on the file type. You can see the detected file type in the status bar. Clicking on that file type will allow you to force the syntax highlighting to another language format.

Uploading files

You can upload a file into your project in the following ways

show

  • Right-click within the file tree, taking into account folders
  • Select the File > Upload menu option, having first selected a folder in the file tree.

Having selected on of these options, you can upload files by

  • Pressing the browse for files button and selecting your files
  • Dragging files from your destop or file explorer into the dialog. Dragging of a folder and its contents is only supported in Chrome.

Important: if you select both files and folders to upload, only the files within the main folder will get uploaded. You will need to upload one folder at a time.

Downloading files

You can download individual files from your project.

show

  • Right-click the file from the file tree,
  • Select the Download option.

Adding files

Adding a file is done in one of two ways. First, make sure you have selected the folder within the file tree where you want the file created.

  • Right-click within the file tree, taking into account your folders
  • Select File > New from the menu

You should specify both the file name and the extension.

Right-clicking also allows you to Copy/Paste existing files.

Creating a folder

Creating a new folder is done in one of two ways:

  • Right-click within the file tree, taking into account the existing folder structure
  • Select the File > New folder item from the menu

Right-clicking also allows you to Copy/Paste existing folders along with its contents.

Deleting a folder

You can delete an entire folder and its content in two ways

  • Right click the folder and select Delete
  • On Macs, press fn+backspace
  • On anything else, press shift+del

Warning - Deleting a folder cannot be undone.

Dragging files & folders

You can drag individual or multiple files and folders around the filetree. Excercise caution when doing this as drag actions cannot be undone.

Right-clicking also allows you to Copy/Paste existing files/folders.

Readme info pages

When you open up a project in the IDE, Codio will try to locate a file called readme.md in the root of the project. If it finds one and you have not opened the project beforehand, it will open and display it in 'markdown' mode.

readme info page

If you select the README.md file from the file tree, it will be opened up for editing using markdown. You can switch between markdown, 'preview' and you can run in SplitView mode as highlighted in the above image.

The readme.md file should be written in markdown format. Here is a reference for markdown:

Exporting an app

You can export an app at any point by

  • right-clicking the app in the file tree (click the top level item)
  • or by selecting the Project>Export as Zip menu item
  • from the Project Settings

You can also download individual files from your project. See Download Files for more information.