Online Code Editor for Python

Python Code Editor and Interpreter for Browser

Online tool to interpret and run Python in the browser, without installing additional programs. The provided code is processed locally, in the browser. Thus, the written code is not sent to a remote server.

This page is meant as a convenience for first steps at programming. If you plan to program in Python, you should set up a development environment for the language, as described here.

The embedded editor to write the source code uses CodeMirror (version 6). CodeMirror allows choosing between the MIT and GPL3 licenses. In this case, my choice is the MIT license. This page provides to options to run the code:

1. The implementation provided by Skulpt, which also has MIT license;
2. The implementation provided by Brython, which has BSD 3-Clause license.

Each implementation provides different features; thus, they can be used in a complementary way.

Instructions

To create your program, write the code in the provided text box. To run the created code using the Python interpreter, press the button Run. You can also use the shortcut Ctrl Enter or the shortcut Shift Enter to run the code using the keyboard.

For convenience, the output of print is shown in Program Output. This interpreter provides a simple implementation for input() using JavaScript's prompt() to read data from the keyboard.

This page also provides a canvas for 2D drawing. However, unlike the ones for the JavaScript and the Lua code editors and interpreters, the canvas is meant to be used with Turtle Graphics. Turtle graphics have been introduced by the Logo programming language.

To use the canvas, you can write the following code to create a turtle, which you can use to draw.

Specific Settings

The configuration depends of the chosen implementation (Skulpt or Brython).

Skulpt

import turtle

turtle = turtle.Turtle()
colors = ["red", "green", "blue"]
for i in range(3):
    turtle.color(colors[i])
    turtle.forward(50)
    turtle.right(120)

Although Skulpt allows interacting with the browser, Brython provides more features for that purpose.

Brython

To use turtle graphics with Brython, the code requires additional configuration.

# Brython:
from browser import document
import turtle
turtle.set_defaults(
    turtle_canvas_wrapper = document["turtle-div"],
    turtle_canvas_id = "turtle-canvas",
    canvwidth = 500,
    canvheight = 500,
)

t = turtle.Turtle()
colors = ["red", "green", "blue"]
for i in range(3):
    t.color(colors[i])
    t.forward(50)
    t.right(120)

# Brython:
turtle.done()

As it has been mentioned, Brython provides more features out-of-the-box than Skulpt to interact with the browser.

from browser import document

canvas = document["code-canvas"]
context = canvas.getContext("2d")
# Example of drawing a blue rectangle at position (10, 20), with a width of 200
# pixels and a height of 100 pixels.
context.fillStyle = "blue"
context.fillRect(10, 20, 200, 100)

The previous example is equivalent to the ones provided for the JavaScript and Lua browser interpreters.

Editor Settings

The editor have some settings:

• Indent code using TAB?: If the option is marked, TAB will indent the code by one level and Shift TAB will "deindent" the code by one level (it will remove one level of indentation).

  The option is disabled by default due to accessibility concerns. TAB and Shift TAB can be used to browse a page using a keyboard, switching between fields and options in the browser.

  If the option is enabled, the navigation will not be possible normally. To perform it, you can use, respectively, ESC TAB (ESC, then TAB) and ESC Shift TAB (ESC, then Shift TAB).

• Advanced: enable Vim mode?: Experimental option. This option is not recommended for beginners.

  If the option is marked, the text editing will use the modal edition style adopted by the Vim editor.

  The feature uses Codemirror-vim, with MIT license.

Program