How to use the Text Coding Editor

The Text Coding Editor appears when you create a project in Python, JavaScript, HTML/CSS, Java, or p5.js.

Let's a look at the different parts of the editor:

❶ This is the File Manager. Your project can be as simple as a single file, but you can also create more advanced projects that contain several scripts, images, and other assets, organized into folders. Click on the ▾ next to the file name to Rename, Move, Download, or Delete a file. Want to create a file to keep things organized? Right click here and choose New File. To upload a file to your project, simply click and drag it from your computer to the File Manager.

❷ This is the Editor. Write your code here. Notice how line numbers appear on the left—this is a quick and easy way to refer to the particular parts of a program. (Don’t see anything to edit? First select a file from the File Manager on the left.)

❸ This is the Output Area. You’ll see the results of your code displayed here. Click Play to run your code. If your project has a tutorial, you can click the Tutorial button in the upper left part of the Output Area to show it, and you can click the Preview button to return to viewing the output of your program.

❹ This is the Console. If you made an error in your code, you will get a notification here and some hints about what’s wrong, including the line number where the error appears. The Console pane won’t appear until you receive the first error message (or use the console for another purpose). After the first error, the Console Toggle button at the bottom right will light up, and you can click it to show the console. Click Clear to remove old messages, or the X to close the console entirely.

❺ This is the name of your project. You can click on your project name to change it. Click on the small triangle on the Save button to Save As, which will let you create a new copy of your project so that you can save multiple versions of your code. Your project will auto-save every so often, but it is recommended that you also save old versions of your code, especially if you are making big changes or trying something new.

The top of the code editor also has some helpful features.

Undo. Revert an edit.

Redo. Undo your last undo.

Media Library. Add images from Tynker’s Media Library to your project. They will appear in the File Manager on the left.

Code Snippets. Click this button to reveal some pre-written code that you can insert directly into your project, like how to write a for loop or get user input. The upper right corner of the Code Snippets window may contain buttons to show snippets in different languages, depending on what kind of project you created.

Settings. Customize the editor’s display. For example, you can swap themes from Light to Dark.