Youtube

Go to The Main Page Add Youtube to favorite!

Comparison of Javascript-based source code editors 

This article provides basic feature comparison between some of the JavaScript-based source code editors available today. This article is not all-inclusive or necessarily up-to-date.

Contents

Overview

List of source code editors
Site Latest version Style / Clone of Cost (US$) Software license Open source Browser compatibility
CodeMirror Home Page 0.58, 2008-09-28 Microsoft Visual Studio Free BSD-like Yes Firefox 1.5+, Internet Explorer 6+, Safari 3+, Opera 9.52+, Chrome[1]
CodePress dead home page, Demo, SourceForge 0.9.6, 2007-09-26 Microsoft Visual Studio Free LGPL Yes ?
CodeTextArea Home page, Demo, Experimental demo Microsoft Visual Studio Free Yes ?
EditArea Home, Demo 0.7.2.2, 2008-09-05 Microsoft Visual Studio Free LGPL Yes IE 6 & 7, Firefox 1.5, 2, 3, Safari 3.1, Opera 9, 9.5 and Chrome[2]
Helene Home, Demo 0.9, unknown release date Microsoft Visual Studio Free GPL Yes
Markitup Home, Demo 1.1.3, 2008-09-15 markup editor, no syntax highlight Free MIT, GPL Yes
9ne Home Page ? emacs Free GPL Yes
jsvi Home Page ? vi Free GPL Yes
CodeIDE Home Page ? Microsoft Visual Studio ? ? No
MDK-Editor Home Page 2.10, 2008 Microsoft Visual Studio ? ? No

List of features

Feature testing was performed with Firefox 3.0.3 against the current demo version, and results may not match those in other browsers or downloadable versions.

List of source code editor features
CodeMirror CodePress CodeTextArea EditArea Helene markItUp! MDK-Editor
Syntax highlight mixed mode: HTML+JavaScript+CSS; can define parsers in JavaScript limited mixed mode: HTML+JavaScript (no CSS), PHP+HTML (no JavaScript or CSS), Java, Perl, SQL only keywords only one language at a time: PHP, CSS, Javascript, Python, HTML, XML, VB, C, CPP, SQL, Pascal, Basic, Brainf*ck PHP No mixed mode: HTML+JavaScript+CSS
Syntax checking No HTML, JavaScript, CSS
Auto-indent Yes No No Yes N/A (can't press Enter) No Yes
Bracket matching Ctrl+[; no angle bracket matching Ctrl+B; no angle bracket matching No Yes
Code folding No
Code snippets Yes
Code suggestion No CSS
Keyboard shortcuts Yes
Search & replace API No toolbar button
Spell checking browser-based browser-based none browser-based none browser-based none
Toolbar No Yes Yes No
XML tag matching Yes
Usability new text sometimes syntax highlighted only after going out of the viewable area No PageDown/PageUp can't type Enter delayed typing and copy-paste



Feature EditArea CodePress CodeMirror Code Area 2 Code Area 3 Helene CodeIDE 9ne jsvi
Drag'n'Drop yes yes yes no yes no no no no
Copy'n'Paste yes yes (still working on IE) yes no yes no no no no

Drag-and-drop support

Supported by: EditArea, CodeArea 3, CodePress, CodeMirror

Not supported by: CodeArea 2

Copy and paste support (Within area)

Supported by: CodeArea 3, Edit Area, CodePress, CodeMirror

Not supported by: CodeArea 2

Copy and paste with other applications (Firefox)

Supported by: CodePress, CodeMirror, EditArea, CodeArea 3

Copy and paste with other applications (IE7)

Supported by: CodeMirror, EditArea, CodeArea 3

Viewable area limited highlighting (scalable to larger files)

CodePress

Textarea based (uses highlighting overlays)

EditArea, CodeArea 3

Use iframe

CodePress, CodeMirror


Custom spell checking

Supported by: none;

Browser-based spell checking

Supported by: CodeArea 3, CodeMirror;


Browser-based zooming

Supported by: CodeArea 3, CodeMirror, CodePress (partial - line numbers aren't correct)

Not supported: CodeArea 2, EditArea (Has custom text-size selection, though)


Multiple Undo allows the user to undo/redo multiple, granular changes to the document

Supported by: CodeArea 3 (Complete snapshots), EditArea (snapshots on delete and newline), CodePress (snapshots on delete and newline), CodeMirror (complete)

Simple Undo allows the user to undo the last change

Not supported by: CodeArea 2

Multiple instances support means that multiple edit boxes can be displayed on the same screen

Supported by: CodePress, EditArea, CodeArea 2, CodeArea 3, CodeMirror


Ctrl-A (Select All)

Supported By: CodePress,CodeMirror,EditArea,CodeArea 3

Not supported by: CodeArea 2


Automatic bracket insertion

Supported by: CodePress

Auto-indentation refers to maintaining the current indent level when the enter key is pressed - not code reformatting.

Supported by: CodeMirror, EditArea, CodeArea 3

Not supported by: CodePress

Bracket matching refers to the highlighting of the matching pair of braces, brackets, or parenthesis when the cursor is positioned on one of them.

Supported by: CodeMirror, EditArea

Not supported by CodeArea 3, CodePress

Batch indentation refers to indenting and un-indenting multiple lines at a time.

Supported by: EditArea

Not supported by CodePress, CodeMirror, CodeArea 3


TODO: Other aspects

  • What size files do these editors handle best
  • How many dependencies (files) does each require? When compressed, what is the minimum download size in kilobytes?
  • Tabbed editing?
  • "Fast" mode, without syntax highlighting?
  • Javascript architecture (prototype, functional, or closure-based)
  • How responsive is each library (with and without a large file loaded)? (Not sure how to measure this yet.)
  • How long is the delay before syntax-highlighting occurs on new text.

Language features

  • Syntax highlighting (None, pattern, or full parser)
  • Snippet support
  • Text folding
  • Customizable key bindings

Offspring projects

list of projects based on each engine, offering more/less features.

CodePress powered

EditArea powered

  • Scaffold[BETA] by Jupiter (Justin Meyer (and others?)) - tabbed editing ? - database creation ?

Browser Compatibility

  • IE 6
  • IE 7
  • FF 1.5
  • FF 2.0
  • Safari
  • Safari/Win
  • Opera

Extensibility Features

  • Feature plugins
  • Interface languages (English, French, etc.)
  • Syntax highlighting plugins
  • Bracket completion plugins
  • Language snippet plugins
  • Code suggestion plugins
Could not update stat
UP