Comparison of JavaScript-based source code editors: Difference between revisions

Content deleted Content added

Inline

Revision as of 08:07, 12 September 2014

This article provides basic feature comparison between some of the JavaScript-based source code editors available today.

Overview

List of source code editors
Editor	Site	Latest version	Style, clone of	Cost (US$)	Software license	Open source	Browser support	Activity
Ace (editor)	Home, demo	1.1.3, 2014-03-08	Sublime Text / Microsoft Visual Studio	Free	New BSD License	Yes	Firefox 3.5+, Safari 4+, Chrome, IE 8+, Opera 11.5+	Yes
CodeMirror	Home, demo	4.4, 21-07-2014	plain textarea	Free	MIT-like	Yes	Firefox 3+, Chrome, Safari 3+, Internet Explorer 8+, Opera 9+^[1]	Yes
Codenvy Editor	Home	2.10.17, 2014-01-17	Eclipse	-	Public Cloud	No	Firefox 3+, Chrome, Safari 3+, Internet Explorer 8+, Opera 9+	Yes
Orion	Home	5.0, 2014-02-26	Eclipse SWT StyledText, regular textarea	Free	dual-licensed: BSD 3-clause and EPL	Yes	Firefox 5+, Chrome 12+, Safari5+, Internet Explorer 9+^[2]	Yes
Monaco Editor	example	2013	Microsoft Visual Studio	used only by Microsoft	-	No	ie8+ Firefox 4+ Chrome	Yes
Markitup	Home, demo	1.1.14, 2013-02-04	Markup editor, no syntax highlight	Free	MIT, GPL	Yes	IE 6 & 7, Firefox 2 & 3, Safari 3.1, Opera 9+^[3]	Some
LDT	Home	2012-02-19	regular textarea	Free	MIT, GPL	Yes	Firefox 3.6+, IE8, Chromium 16, Midori 4.1, Opera 11, Epiphany	Some
Ymacs	Home, demo	0.5, 2012-03-28	Emacs	Free	BSD	Yes	Firefox, Chrome, Safari	Some
CodePress	Home	0.9.6, 2007-09-26	Microsoft Visual Studio	Free	LGPL	Yes	?	No
CodeTextArea	Home, demo	2009-06	Microsoft Visual Studio	Free	BSD	Yes	Dojo widget	No
EditArea	Home, demo	0.8.2, 2010-01-14	Microsoft Visual Studio	Free	LGPL	Yes	IE 6+, Firefox 1.5+, Safari 3+, Opera 9+, Chrome^[4]	No
Helene	Home^{[dead link]}, demo^{[dead link]}	0.9, unknown release date	Microsoft Visual Studio	Free	GPL	Yes		No
9ne	Home	?	Emacs	Free	GPL	Yes		No
jsvi	Home	?	vi	Free	GPL	Yes		No
MDK-Editor	Home	2.10, 2008	Microsoft Visual Studio	Depends on use	Dual	Code is readable	tested to work on: IE 6, 7 - Firefox 2, 3 - Chrome	Yes
Micro	Home	2013	nano	Free	GPL	Yes		Some
GitHub Atom	Home	Beta, 2014	Emacs, Vim and others	Free	Dual	Yes	Chrome	Yes

List of features

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

List of source code editor features
Feature	Ace (editor)	CodeMirror	Orion	CodePress	CodeTextArea	EditArea	Helene	markItUp!	MDK-Editor
Implementation		nestable full parsers	pattern-based parser	pattern-based parser					parsers
Syntax highlight	Yes	Over 60 languages	mixed mode: HTML + JavaScript and CSS, PHP, EJS; single mode: JavaScript, Java, JSON, CSS, Python, Ruby, XML, YAML (pluggable)	limited mixed mode: HTML + JavaScript (no CSS), PHP + HTML (no JavaScript or CSS), Java, Perl, SQL	only keywords	only one language at a time: Perl, PHP, CSS, Javascript, Python, HTML, XML, VB, C, CPP, SQL, Pascal, Basic, Brainf*ck	PHP	No	mixed mode: PHP + HTML + JavaScript + CSS, single-mode: PHP, Javascript, CSS, XML; extensible
Syntax checking	HTML, CSS, JavaScript (using JSHint)	Some	JavaScript (using JSLint)	No			No		HTML, JavaScript (using JSLint)
Tab support	Yes	Yes	Yes	Some		Yes			Yes
Indent, new line keeps level	optional setting that is on by default	Yes	Yes	very limited	No	Yes	N/A (can't press Enter)	No	Yes
Indent, syntax	Yes	Yes	Yes			No			No
Indent, selected block	yes, including Shift+Tab	either automatically, or block-level indent/unindent	yes, including Shift+Tab	No		yes, including Shift+Tab			yes, including Shift+Tab and using context menu
Bracket matching	Yes	Yes	Yes	an implementation exists with mouse-hover bracket matching ^{[citation needed]}	Ctrl+B; no angle bracket matching			No	matching bracket ([{<>}]) always highlighted
XML matching tag highlight	Yes	Yes	No	No					Yes
Code folding	Yes	Yes^[5]	Some^[6]	No	No	No	No	No	No
Code snippets	Yes	through API/add-on	Some	type 'for' or 'if' then Tab	No	Yes	No	Yes	JavaScript
Code suggestion	Yes	example	Yes through esprima content assist plugin	No		yes^{[citation needed]}		No	CSS, HTML, JavaScript)
Toggle syntax highlight on/off	Yes	Yes	No			last example in demo		N/A	textmode
Keyboard shortcuts	All Common Shortcuts & Custom Keybindings	fully configurable	Yes			some common used: Ctrl+f, Ctrl+g,Ctrl+z,Ctrl+y		Yes	All key combos (except F1 in IE7) can be bound to shortcuts
Line numbers	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No	supports mouse selection
Search & replace	regex supported	via API	Yes		No	toolbar button			has API for the studio
Spell checking	addon for context menu	No	No	browser-based	none	browser-based	none	browser-based	No
Toolbar	But command line console	No	No		No	Yes	No	Yes	No
Visual styling	Fully theme-able	CSS-based themes	Yes		font-type and font-size				5 styles to choose from, having 2 font-sizes
Undo/Redo	Yes	Yes	Yes	Yes		Yes			Differential Undo
Multiple cursors / Block selection	Multiple cursors	Yes	No	No	No	No	No	No	No
IndentGuides	Yes	No	No	No	No	No	No	No	No
Inline widgets	Yes	Yes	No	No	No	No	No	No	No
Non US charset support	Yes	Yes	Yes						No

Offspring projects

Below is a list of projects based on each engine.

Ace powered

Compile On Line - Plenty of languages to be compiled and executed online
CodeAvengers - fun and effective interactive web development courses
GoInCloud - a powerful online IDE for developing PHP projects with online php debugger.
Play My Code - browser-based game development site and portal, which includes hosting and embedding games
Koding - online development environment with the goal of simplifying worldwide development and providing free computation and development to everyone.
Cloud9 IDE - an open-source full browser-based IDE with team collaboration and online project hosting
Sky Edit - a project to integrate Ace as a proper editor within the browser using Mozilla Jetpack
R Studio - an online editor for the R programming language
Qooxdoo Playground - in real-time GUI creator and editor using JavaScript
Radiant CMS - Ace extension for viewing files using the Ace editor
Add-on Builder - site that makes it easier to build FireFox extensions
Developer Companion - service providing the whole stack for programming development, uses Ace editor
Dirigible - a cloud-based programmable spreadsheet service
ShiftEdit - Service allowing you to edit and publish projects.
Akshell - Online application building service within the browser
AppFurnace - Smartphone app development tool aimed at designers and web developers.
FeedHenry - Develop Mobile Applications
ShareLaTeX - Real time collaborative LaTeX editor
CloudCoder - Exercise system for introductory programming courses
EnyoJS Ares2 - Develop Cross-Platform & Cross Form-Factor applications using EnyoJS
BootTheme - Online web designer tool

CodeMirror powered

sourceLair - online Django IDE
NoTex.ch - A browser based text editor with support for reStructuredText, Markdown and LaTex
Brackets - open-source code editor
Codenvy
Codio - Web IDE
ICEcoder - open-source code editor, runs in the browser online or offline
RubyMonk - Learn programming Ruby in your browser
ScraperWiki - Write data scripts and run them in the cloud
ShiftEdit - Service allowing you to edit and publish projects.
Blue Griffon - a WYSIWYG web page editor
Google's API playground
Kodtest - An online HTML5, CSS3 & JavaScript editor with real-time view.
Fiddle Salad - WYSIWYG editor for HTML, CSS, JavaScript, and other languages
Liveweave - An online HTML5, CSS3 & JavaScript editor with code-hinting and real-time preview
Cloud Code Chrome App (non-free) / (free demo version)
r3, a template management engine developed by Yahoo!
FireRainbow - JavaScript syntax highlighting for Firebug
Google Earth KML sampler
Eloquent JavaScript's console
A cool tutorial about the <canvas> element
An online IDE for the Orc programming language
Handcraft - Web-based prototyping software
MyWebSql - Web-based mysql administration
Wiode - Web-based IDE
PythonFiddle - Python Cloud IDE
FeedHenry - (CodeMirror used as fallback for browsers that don't support Ace) Develop Mobile Applications
WebGL Playground - An online WebGL / GLSL editor with a real-time view.
WebGL Academy - An online Javascript/WebGL editor with a real-time view made for educational purposes
Chrome Developer Tools - see source
Firefox Developer tools (starting in Firefox 27)
CodeSkulptor

CodePress powered

Ultimate CMS Tool by Martin Kirk - [Currently only Firefox is supported]
Extplorer by Soeren Eberhardt
ModX CMS plugin
WordPress plugin
Typo 3 plugin
CMS Drupal integration
Codepress plugin for jQuery
Ext plugin

EditArea powered

F->IT, browser-based online JavaScript FTP client
WebDevStudio - web IDE.
Django-EditArea - EditArea integration into Django.

MDK Editor powered

Mobile Development IDE

Mozilla Skywriter powered

ShiftEdit Web-based IDE

Orion powered

Other

References

^ CodeMirror supported browsers
^ Orion supported browsers
^ "markItUp! Universal Markup jQuery Editor". Markitup.jaysalvat.com. Retrieved 2013-06-14.
^ EditArea compatibility chart
^ "Code Folding Demo". CodeMirror. Retrieved 2013-06-14.
^ "Orion 0.3 M2 – New and Noteworthy | Orion News". Planetorion.org. 2011-09-26. Retrieved 2013-06-14.

External links

EditArea vs. CodePress

@@ Line 595: / Line 595: @@
 * [https://developers.google.com/chrome-developer-tools/ Chrome Developer Tools] - see [https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/devtools/front_end/SourceFrame.js&l=48 source]
 * [https://developer.mozilla.org/en-US/docs/Tools Firefox Developer tools] (starting in Firefox 27)
+* [http://www.codeskulptor.org/ CodeSkulptor]
 ===CodePress powered===