How to navigate the codesphere IDE?

Last updated: June 13, 2025

Codesphere's IDE lets you make quick ad-hoc changes to code, or even develop entire applications within the platform. Understanding its layout and features is key to a fast and efficient workflow. The IDE is organized into several key areas, from file management to customization.

The filetree

Codesphere gives you full access to your app's filetree, located on the left-hand side of the IDE. This is where you manage all the files and folders for your project. You can create, delete, reorder, or duplicate files and folders simply by right-clicking within this panel.

The editor & terminal panel

The central, main area of the IDE is the Editor, where you will write and edit your code. You can open multiple files, which will appear as tabs at the top of the editor.

At the bottom of the screen is the Terminal & Pipeline Panel. This section gives you command-line access to your environment and shows the real-time logs from your CI/CD Pipeline stages.

Key bindings (Keyboard shortcuts)

To speed up your workflow, the IDE has the following Key Bindings by default:

Global Shortcuts

  • ⌘ + B: New directory

  • ⌘ + M: New file

  • ⌘ + P: Open file search

  • ⌘ + ⇧ + F: Search everywhere

  • ⌘ + ⇧ + K: Open key bindings

  • ⌘ + ⌥ + S: Open settings

  • ⌥ + T: Open/close terminal

File Editor Shortcuts

  • ⌘ + S: Save editor content to disk

  • ⌘ + Z: Undo last change

  • ⌘ + ⇧ + Z: Redo last change

  • ⌘ + D: Delete selected line of code

  • ⌃ + L: Select the current line

  • ⌘ + ↩: Insert blank line

  • ⌘ + I: Comment/uncomment Code

  • ⇧ + ⌥ + A: Toggle block comment

  • TAB: Indent selection by one level

  • ⇧ + TAB: Unindent code

  • ⌘ + ⌥ + \: Auto-indent the selected lines

  • ⌘ + ⇧ + I: Format code

  • ⌥ + ↑: Move line up

  • ⌥ + ↓: Move line down

  • ⇧ + ⌥ + ↑: Copy line up

  • ⇧ + ⌥ + ↓: Copy line down

  • ⇧ + ⌘ + \: Move cursor to matching bracket

  • ⌃ + SPACE: Request auto completion

  • ⌘ + ⇧ + E: Reload file from disk

Tab Panel Shortcuts

  • ⌥ + W: Close editor Tab

  • ⌥ + TAB: Select next tab

  • ⌥ + ⇧ + TAB: Select previous tab

Customization

You can customize the Codesphere IDE to fit your preferences by navigating to the Settings tab. You can access these settings and other options by clicking on your user avatar in the top right corner of the IDE.