Online Code Editor for HTML 5 (HTML, JavaScript and CSS)
This page is available in the following languages:
HTML 5 (HTML, JavaScript and CSS) Code Editor and Interpreter for Browser
Online tool to interpret and run HTML 5 (HTML, JavaScript and CSS) 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 JavaScript, you should set up a development environment for the language, as described here. Alternatively, you can use the embedded console provided by a modern browser (such as Firefox), 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.
Instructions
To create your program, write the code in the provided text box. To run the created code, 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 console.log() is shown in Program Output.
You can also view it using your browser console (terminal; shortcut: F12, as described here).
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).
Auto-reload code after changes?: If the option is marked, the code will be evaluated automatically after a few moments whenever you modify the HTML or CSS values of the source code. The JavaScript code will not be executed automatically (to avoid alert messages in case of errors).
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.