Docs Index

Doc

Code Editor

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).

Autocomplete

We’ve all been there: you want to set a repeating function, but can’t remember the API of how to start a timer in JavaScript. But, you were able to remember that some of the JavaScript timing APIs start with “set.”

Luckily, CoderPad comes with autocomplete. Simply start typing the API you’re looking for and the editor will make suggestions:

You can look through the suggestions using the up and down arrows to find the completion.

Then, hit Tab to accept the suggestion and have CoderPad fill in the code.

By default, autocomplete is triggered whenever . is pressed, however you can also use ctrl + space to initiate the autocomplete at any point.

Auto-Close Brackets

A feature that many IDEs, including CoderPad, provide is the ability to automatically close related symbols when called.

For example, whenever an “if” statement is called in JavaScript, you’ll always need an opening ( and a closing ). To help reduce potential bugs, CoderPad has this feature enabled by default.

The list of symbols that will auto-close are:

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

Note: These symbols do not change based on your currently selected language.

Multi-Cursor

CoderPad provides multi-cursor functionality to allow you to edit multiple lines at once.

This can be especially useful when you want to make the same change to multiple lines of code. Editing multiple lines one-by-one is monotonous at best – bug-introducing at worst. 

Multi-cursor works with three different methods of line selection:

  1. Selecting adjacent lines
  2. Selecting specific lines
  3. Keyboard-only

Select Adjacent Lines

Holding Alt will turn your cursor into a cross-hair. While holding the key, if you click and drag, it will select all of the lines where your cursor is

Select Specific Lines

Ctrl + Click will allow you to select multiple lines that the cursor is over, regardless of where they are in the editor.

This method of multi-line select is able to stack on top of other methods as well, 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.

Keyboard-Only Multi-Cursor

Finally, Alt + Ctrl + Up/Down will allow you to select lines above and below your current selection

Three-Pane for Front-End

When using the HTML language, we provide a more powerful editor specifically for front-end coding. Here, we show three different code editor panes for your HTML, CSS, and JavaScript.

These panes, just like the main pane, can be repositioned using the drag handlers at the top of each pane.

To enable the three-pane editor, simply select “HTML/CSS/JS” as your programming language for an active pad

Using Three-Pane with Your Questions

You don’t need to modify your existing questions in order to use the three-pane editor in your frontend interviews.

To use three-pane with your CoderPad questions, simply select an HTML/CSS/JS question from your list of questions

Once a question has been selected to add to the Pad, you’ll see a dialog that will prompt you to select a code layout. There’s the “Dedicated Frontend” three-pane option, or the “Classic” layout which provides only one editor pane.

> Not ready for three-pane yet? No worries! Simply select the “Classic” layout when prompted to load a question and you’ll be opted out for that question in the pad

This is what the question looks like using Classic layout:

Meanwhile, this is the same question auto-parsed into the three-pane layout:

If the three-pane layout doesn’t work out for your interview question, you can revert to the single-pane view at any time by clicking the “Revert to Single Pane” button in the HTML pane.

Creating Three-Pane Questions

The functionality to create questions with three-pane layout is coming soon! 

In the meantime, create HTML questions as usual and you will be offered the option to load them into three-pane or classic layout when you use them.

Technical Details

Any existing questions you’d like to use with three-pane currently relies on our auto-parsing. Let’s explore the technical details that will help you debug your questions to work with three-pane.

Auto-Parsing into Three-Pane

When you select a non three-pane HTML question to be displayed in the three-pane layout, we’ll automatically parse your single HTML file into each relevant pane.

All script tags contents will be imported into the index.js pane sequentially.

Likewise, all style tags will have their contents imported into the index.css pane sequentially.

Any remaining HTML will stay within the index.html pane.

This means that the following contents of a classic layout HTML question:

<html> <head> <style>p {color: red;}</style> </head> <body> <p>Text here</p> <script type="text/jsx"> console.log(document); </script> <script>console.log(window);</script> <style>p {color: blue;}</style> </body> </html>
Code language: HTML, XML (xml)

Will output the following for HTML:

<html> <head></head> <body> <p>Text here</p> </body> </html>
Code language: HTML, XML (xml)

This for the JavaScript:

console.log(document); console.log(window);
Code language: JavaScript (javascript)

And finally, this will be your CSS contents:

p {color: red;} p {color: blue;}
Code language: CSS (css)

Three-pane to HTML

When you click run in a three-pane enabled pad, the contents of all three panes are placed within a iFramed HTML preview in order to be executed.

index.html

If the index.html pane is formatted with a head and body tag, the injected CSS and JS from the other two panes will be injected within the same head and body for the final iFramed output. 

If not, we will construct a head and body for you and attempt to automatically place relevant items at the start of the document within the head

So, if the index.html pane looks like this:

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> <style>p {color: green}</style> <div id="root"></div> <style>p {color: blue}</style>
Code language: HTML, XML (xml)

The outputted iFrame will look like this:

<html> <head> <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> <style>p {color: green}</style> </head> <body> <div id="root"></div> <style>p {color: blue}</style> </body> </html>
Code language: HTML, XML (xml)
index.css

The index.css pane’s contents are added to the end of the outputted head element

index.js

The index.js pane is setup by default to use Babel with React JSX enabled. Once transformed with Babel, it will be added to a script tag at the end of the body element

However, keep in mind that you’ll still need to add imports for React and React DOM to index.html in order to use JSX

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
Code language: HTML, XML (xml)
Full Example


To showcase how the three-pane parser outputs, let’s see an example.

Given the following index.html:

<html> <head> <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> </head> <body> <style>p {color: green}</style> <div id="root"></div> <style>p {color: blue}</style> </body> </html>
Code language: HTML, XML (xml)

And the following index.css:

h1 { color: red; }
Code language: CSS (css)

And finally, the index.js:

ReactDOM.render( <h1>Hello, React!</h1>, document.getElementById('root') );
Code language: JavaScript (javascript)

You’d get the following output in the iFramed HTML:

<html> <head> <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> <style> h1 { color: red; } </style> </head> <body> <style> p { color: green; } </style> <div id="root"><h1>Hello, React!</h1></div> <style> p { color: blue; } </style> <script> ReactDOM.render(/*#__PURE__*/ React.createElement("h1", null, "Hello, React!"), document.getElementById("root")); </script> </body> </html>
Code language: HTML, XML (xml)