Docs Index

Code editor

Last updated on Available in French

CoderPad provides a feature-rich code editing environment for your candidate to work in. 

We support over 30 programming languages and have different libraries and frameworks built in per language, and our core editor functionality is available for each programming language (unless otherwise specified).

We also provide enhanced support with better autocomplete and other editor functionality for the following languages:

  • Ruby
  • Python 3
  • JavaScript
  • Java
  • C
  • C++
  • C Sharp
  • Swift
  • Kotlin
  • TypeScript

Code Editor Feature List

  1. Autocomplete
  2. Multi-cursor
  3. Duplicate lines
  4. Code folding
  5. Error highlighting
  6. Right-click options
  7. Command palette
  8. Frontend multi-file layout

✅ To run or execute your code at anytime, simply click on the Run button in the top left corner or use the keyboard short cut: + enter OR + S for iOS or CTRL + enter OR CTRL + S for Windows.

Autocomplete

To use autocomplete, just start typing and the editor will make suggestions:

Scroll through the suggestions using the up and down arrows to find the code you’re looking for. Then, hit Tab or Enter to accept the suggestion and have CoderPad fill in the code.

By default, autocomplete is triggered whenever . is pressed. You can also use Ctrl + Space to initiate the autocomplete at any point.

An example of autocomplete, the code snippet "myArray" is shown and the autocomplete dropdown menu has opened with the first item being "at".

Auto-close Brackets

CoderPad provides the ability to automatically close related symbols — like parenthesis, brackets, and quotation marks.

✅ To help reduce potential bugs, this feature is enabled by default.

The full list of symbols that will auto-close are:

  • [] – Brackets
  • {} – Curly braces
  • () – Parenthesis
  • "" – Double quotation marks
  • '' – Single quotation marks


Multi-Cursor

Multi-cursor functionality lets you edit multiple lines at once. This can be especially useful when you want to make the same change to multiple lines of code.

Select cursor positions, lines, and sections

Multi-cursor has a number of different methods for line selection:

  • Alt+Click selects or deselects one or more cursor positions, anywhere in the code.
  • Alt+Shift+Click and drag selects multiple contiguous lines at a time.

This method of multi-line select stacks on top of other methods, since you only have to hold down the modifier key when actively clicking the mouse to select a new line.

Because of this, you can even scroll in the middle of selecting lines.

If you’ve selected adjacent lines, but later realize you missed a line you wanted to add, you can use this method to add to your list of selected lines.

Alt + Ctrl + Up/Down in Windows or Option + Shift + Up/Down in Mac allows you to select contiguous lines above and below your current selection.


Duplicate lines

Alt + Shift + Up/Down duplicates the lines you are on.


Code folding

Free-up space and improve readability by temporarily hiding code using code folding.

Hover over the space between the line numbers and the code. You will see dropdown arrows appear at the beginning of all major code blocks such as comments, imports, classes, methods, etc.

Dropdown arrows appear on lines 1, 5, and 8. The arrows are pointing down.

Click on an arrow to close the code block; click on it again to open it back up.

Lines 1,5, and 8 has the code folded and the dropdown arrows are now pointing to the right.


Error highlighting

Similar to other IDEs, CoderPad highlights errors as you make them by underlining them in red. Yellow lines signal warnings.

Hover over the red lines to see more information about the error.

There is a method that only accepts one argument. In the method instantiation there are two methods added, and the second one is underlined with a red error line.


Right-click options

Right-click opens a dialog box with common tools, code navigation options, and access to the Command Palette. 

If you are using one of the enhanced support languages, you see a list of options related to navigating around the code if the cursor is on a class, object, method, or function:

The right click menu for a supported language is displayed and starts with "Go to definition" and ends with "command palette".

If you are using a non-enhanced support language, there are no navigation options:

The right click menu for a non-supported language is displayed and starts with "change all occurrences" and ends with "command palette".


Command Palette

Right-Click and select Command Palette, or press F1 on your keyboard.

The Command Palette provides access to many pad commands and their related keyboard shortcuts.

The command palette dropdown is shown with the "Add cursor above" menu item highlighted.


Frontend multi-file layout

CoderPad provides an interface specifically for frontend coding. You can find more information on using the this interface on the languages page here.

For more information on creating multi-file frontend questions, check out this guide.