All Collections
Creating in Kodable
How to Use KODE: Kid Optimized Developer Environment
How to Use KODE: Kid Optimized Developer Environment

Learn about the Kodable Code Editor and how to use it.

Grechen Huebner avatar
Written by Grechen Huebner
Updated over a week ago


A software developer’s IDE (integrated developer environment) is a critical component of their workflow and everyday life. Our goal is to provide kids with their very first developer environment in a kid friendly way. KODE is your child’s Kid Optimized Developer Environment that will follow them throughout Kodable as they learn and grow into a great kid programmer. 

Get to know KODE

There are four main sections to the KODE. 

  1. Toolbar

  2. Source Editor

  3. Utility Area

  4. Simulator

The Toolbar is used to configure your work environment.

It includes items like file names, run button, save button and the source toggle that allows you to switch between JavaScript and Swift code.

The editor area allows you to edit source code, user interfaces, and other resources.

The Utility Area shows information about selected items and access to ready-made resources. 

The Utility Area is divided into two parts. 

  1. The first is the Library pane, where you access fuzz elements, code snippets, and other resources. 

  2. The second is the Value pane, where you view and edit information about items selected in the library and edit areas.

The Simulator displays the behavior and appearance of running your program.

Did this answer your question?