Using the CodeHS Code Editor

Learn about using the Code Editor, or IDE, to code, check and grade student work, view code history, view help docs, and change settings.

Kayla Pica avatar
Written by Kayla Pica
Updated over a week ago
Banner: This is a Free Feature

The Code Editor, or IDE (Integrated Development Environment), is where students write their programs. Students can write code, run code, check code, reset their code, change font size, view assignment details, access help documents, download code, view code history, view grades, correspond with teachers, and share their program. From a teacher's view, you can do everything students can do, as well as view solutions, and check and grade student work.

Image of code editor showing the More navigation menu. Image showing Output, Docs, Grade, History, Conversation, Share, Print, Download tabs and more!

View Documentation in Code Editor

If you are on any editor page on CodeHS, we provide a handy Docs tab to give you a quick reference to information you may need to finish your program. To find the docs, just click the Docs tab on the right side of the screen.

Image showing where to find the Docs tab in the Code Editor

For more info on using and styling the docs tab, check out the video below:

View Code History

The Code History tab is a way for teachers and students to see all of the changes and revisions that have been made to a certain program with a timestamp and allows you to revert a program to any previously saved version. It is accessible on any exercise page under the More > History tab in the top right corner. You can use arrows to quickly move back and forth between timestamps of code.

Gif of the Code Editor with the Code History tab highlighted. Includes Arrows to navigate code history

The History tab is a great tool to aid in cheat detection, as exercises (particularly more complex ones) that are solved in very few code runs/saves may be attributable to borrowed or copied code.

Actions that cause an entry to be created in the History tab

  1. Student runs code

  2. Student clicks save

  3. Student pastes text in the editor

  4. The aforementioned actions didn't occur but the student's code has changed

  5. The teacher edits code and Pushes changes to a student's program


View Grades

Students can view their grade(s) for assignments directly from the Grade Tab. As a teacher, you can also award credit to students from the Grade Tab. See Grading Single Assignments for more information.

Print Your Code

You can print your code by clicking More > Print or More > Print Without Name. After you click the blue Print button, a new page will open up that is nicely formatted for printing. From here, modify any printing settings and click Print.

.gif shows users how to print code via the code editor. Select More > Print

Share Your Program

You can share your program by clicking More > Share. You can then click the “Create Share Link” button and instantly have a link to send to others for them to run your program.

In the Share Tab, you can choose whether the share link is “Public.” If you change your mind about sharing your program and don’t want other people to be able to visit the share link, you can toggle the “Public” switch to Off. As the author, you will still be able to view that shared program page, but no one else can.

GIF shows using right hand tabs in code editor to send messages and access resources

Editor Settings

Students can change their default Code Editor settings. Access the settings by clicking the gear icon in the upper left corner of any editor.

  • Editor Font: adjusts the font size of the student's code

  • Console Font: adjusts the font size of the console on the right

  • Editor: adjust between using the Ace and Monaco editor engine. See Using Monaco in the Code Editor for more information.

  • Editor Theme: change the color scheme of the Code Editor to a higher contrast theme, such as Terminal or Monokai

  • Console Theme: change the output console to Light or Dark Mode

  • Autocomplete: automatically adds closing brackets while typing code. See Using Autocomplete and Auto-format for more info.

  • Blocks/Text Settings: toggle block coding

  • Wrap Lines: separates lines of code so that they are fully visible within the editor window

  • Show File Tab Bar: switch between files easily using the File Tab Bar. Read more about the Bar here.

Program-Specific Editor Settings

  • Auto-Format: automatically format code in Javascript programs. See Using Autocomplete and Auto-format for more info.

  • Code Running Environment:

    • Enable the URL Bar in HTML programs; see Using the URL Bar for more info.

    • Switch from running Brython (3.9.0) to Brython (3.11.0) in Brython Graphics programs.

  • Debug Mode: Step debugging is available in Python3 and Java(main) programs

  • Project Configuration: Switch between similar program types, such as JavaScript Console, JavaScript Graphics with Console, and JavaScript Graphics without Console.

  • Stopify: Enable Stopify in Javascript(console) programs; check out Using Stopify for more info.

Animated .gif demonstrating how to change settings in the Code Editor
Gif showing Karel Program editor settings

Check out this video demonstration showing how to modify Code Editor settings:


Display Settings

Use the blue Layout menu in the bottom left-hand corner to configure the layout of your Code Editor. You can hide the left navigation panel, graphics output, test output, and code windows. You can enter fullscreen code, fullscreen graphics code, or fullscreen test output windows.

Animated .gif demonstrating how to adjust the Display settings in the Code Editor

Managing Files

Some program types allow you to use create and use multiple files in your program. Read more about managing multi-file programs here.

Navigating Assignments in the Code Editor

Use the bottom navigation bar in the Code Editor to navigate to other assignments in your current Module or to return home to your Assignments page.

  • Use the home icon to return to your Assignments page for this course

  • Click the Module name to view all of the Lessons and Activities in the current Module

  • Expand a Lesson to view and navigate to an assignment.

    This gif shows how to use the bottom navigation bar to view a list of lessons and assignments and navigate to an assignment.

New IDE Features Demo

View the Using the IDE CodeHS Webinar to learn more.


Still have questions? Contact our team at hello@codehs.com to learn more!

Did this answer your question?