A code editor is without a doubt the most important tool for any web developer. It includes the essential functions and provides a highly comfortable user experience without being overly bloated with unnecessary features. There are different HTML code editors for each operating system (e.g. Windows, macOS and Linux).
- What makes for a good web code editor?
- An overview of the best code editors for Windows, macOS, Linux and Android
- The best cross-platform web code editors
- The best code editors for Windows
- The best code editors for Mac computers
- DroidEdit: the code editor for Android
- Overview of the featured code editors in a table
What makes for a good web code editor?
Classic code editors provide a kind of intermediate solution in comparison to simple text editors and complex IDEs (Integrated Development Environments). The former are differentiated by their extended functionality, while the latter include multiple tools for software development, which are interconnected. A code editor is usually also integrated into these complex development environments, but it is just one of many components.
Other characteristics of a good code editor for Mac and the like include:
- the ability to save projects in any character encoding,
- syntax highlighting for various languages (ideally configurable),
- a flexible “find and replace” function which can also handle regular expressions,
- a show and hide function for logically related blocks of code (i.e. code folding),
- autocomplete for code (e.g. words, functions, parameters),
- a macro editor and
- the ability to easily manage complete code snippets.
An overview of the best code editors for Windows, macOS, Linux and Android
Code editors are very simple programs, which require little disk space and do not require much in terms of system performance. Therefore, choosing which device or operating system to run the programs on primarily depends on user preference. Of course, not every code editor can run on all operating systems which is why the options are limited if you are exclusively looking for a Linux code editor, for example. As with other software, there are also differences between proprietary software, open source solutions and freeware. This is why the cost is often taken into account when deciding whether or not to use a web code editor.
To simplify your search for the right code editor for your web project, the following sections will go over the most important examples for each operating system as well as some cross-platform solutions.
The best cross-platform web code editors
There are a number of editors, which can be used on different platforms. When this is the case, the developer will offer different installation filesfor each operating system so that all you have to do is select the appropriate file to install the program on Windows, macOS or Linux. However, they may differ based on the operating system, so certain functions might only be available to Linux users, for example.
GNU Emacs (Windows, Linux, macOS)
In 1984, Richard Stallman developed GNU Emacs, a revised, open source version of the Emacs editor, which had been released eight years earlier. The now GNU and GPL licensed code editor thus became the first program in the GNU project, which was created around the same time. This project played a major role in developing the open source scene as well as the Linux operating system. Nowadays, the software is not only available for GNU/Linux but also for macOS and Windows. The software can be extended to include any number of functions and language support using the programming interface written in C, which includes a built-in interpreter for the programming language Lisp. This free code editor has its own package manager for downloading and installing these extensions, which are called “modes” in GNU Emacs.
Due to its strong extensibility, GNU Emacs offers not only access to the standard tools found in a code editor such as autocomplete and syntax highlighting but also, if needed, access to features, which go well beyond writing and editing text and code. For example, you can add an audio player, a project planner and even a web server to the program. A special feature, and a cornerstone, of this editor is the use of keyboard shortcuts, which can be learned quite quickly. Additionally, you can also use a mouse with Emacs.
|Strong extensibility||Some unfamiliar controls using keyboard shortcuts|
Brackets (Windows, Linux, macOS)
Brackets offers the most important code editor functions from the get-go: Code syntax is automatically highlighted. Brackets also provides recommendations for parameters and automatically closes brackets. The “find" tab allows you to search all open code documents for specific words or blocks of code and automatically “replace” the corresponding items if needed. In addition, you can see what your web project looks like in its current state of completion using the “live preview” function. If you wish to extend the functionality of the code editor for Mac, Windows and Linux, simply use the integrated Extension Manager.
|Focus on web development||Lack of split-screen and full-screen support|
Atom (Windows, 64-bit Linux, macOS)
Atom is closely connected to GitHub. This is why the code editor offers, among other things, the possibility to create a GitHub directory for your project without having to visit the developer platform. You can also use the Git version control system to keep track of all changes to the code, test them, and undo the changes if necessary. Other basic features of the software include syntax highlighting, automatic language recognition, code folding, autocomplete for text or code and the ability to find and replace terms, expressions, and blocks of code throughout the project.
|Integration of Git and GitHub||High memory usage|
|Strong extensibility (over 8,000 extensions available)||Has difficulty with large text files|
The best code editors for Windows
Web development has always been closely associated with UNIX and Linux. Important web tools and software such as the Apache web server are a part of the standard repertoire for nearly all distributions of this operating system family. Furthermore, many users find that the administrative freedom they have is a significant advantage over Windows. Nevertheless, Microsoft systems also have a significant user base when it comes to programming and managing a new website. This is clearly demonstrated by the fact that there are code editors developed exclusively for Windows.
In 2003, the software developer Don Ho created the Microsoft code editor Notepad++, which grew over the following years into one of the most important web development tools on Windows machines. Notepad++ had over 28 million downloads on SourceForge.net, where the open source editor (GPL license) was initially hosted, before the entire project was moved to the online platform GitHub in 2015. The double plus in the name of this free code editor for Windows refers to the fact that it was written in C++ (Notepad++ also uses the text editor from the Scintilla library).
Notepad++ already offers the basic features of a good HTML code editor in the factory settings. You can use syntax highlighting for various languages, and you have the option of defining the highlighting rules. This also applies to grouping related blocks of code. In addition, Notepad++ provides a “find and replace” function as well as a function to record and play back macros and an autocomplete feature (words, functions, parameters). If the browsers are installed, HTML documents created in Notepad++ can be previewed at any time in Firefox, Chrome, Safari or Internet Explorer.
|Minimalistic code||Problems with very large files|
|Integrated macro editor is standard|
Quick clips allow you to add common elements and parameters (e.g. tables, colours or bolding) to your code documents in Araneae with just a single click or via a hotkey, making coding much easier. If you want to check whether your code works, you can use the integrated preview function to preview the current document in the browser of your choice.
|Minimalistic code||No autocomplete function|
|Hotkeys (quick clips) for frequently used code elements|
The best code editors for Mac computers
macOS, the operating system used by Apple devices such as iMacs and MacBooks, is popular among many app and web developers. This is due in particular to the fact that the operating system natively supports various UNIX development tools as a BSD (Berkeley Software Distribution) derivative. Another reason to develop web applications on a Mac is the fact that Apple devices tend to be high-performing. On top of that, apps for iOS can only be programmed from a macOS device.
Coda (macOS, iOS)
The Japanese software company Panic released Coda, a code editor for Mac computers, in 2007. In addition to the desktop application, which you can purchase on Panic’s website for $99 (around £75) after a one-week free trial period, there is also an app for iOS which Panic offers for $24.99 (around £20) on the App Store. Coda includes the basic functions of a code editor. On top of syntax highlighting for various languages, project-wide autocomplete and a quick “find and replace” function, the program also offers the ability to show and hide code as well as to add comments. Extensions can be added to Coda at any time via plug-ins, most of which are community developed.
To ensure the best possible user experience, Coda has features, which go above and beyond those of an average HTML code editor. The software has its own integrated file management system which simplifies the process of opening and editing local files and makes it possible to access files via (S)FTP, WebDav or Amazon S3 server. Thanks to Git and Subversion support, Coda also lets you track all changes made to your documents at any time. Additional extras include a built-in terminal, an HTML validator as well as a MySQL editor. The code editor for Mac also offers a preview function using WebKit Preview or AirPreview.
|Ideally designed to meet the requirements of web development||Not free of charge|
Of all the code editors for Mac, BBEdit is certainly one of the oldest. This proprietary editor solution was first released by the American company Bare Bones Software in 1992 for the OS X and macOS predecessor Macintosh System Software 6. Since then the software has been receiving steady updates making it one of the most popular code editors for Mac users despite having been around for more than two decades. In addition to the paid licensed version, which costs around $50 (around £38), Bare Bones Software offers an unlicensed demo version with limited functionality, which can be used free of charge and upgraded at any time. Up until 2016, the manufacturer offered a separate code editor called TextWrangler (formerly called BBEdit Lite), but support for it has since been discontinued.
BBEdit offers a balanced mix of basic code editor functions and additional features, which make web developers’ work much easier. It includes syntax highlighting for various languages, autocomplete, a multi-document “find and replace” function, code folding as well as file access via (S)FTP, support for Git and Subversion and a comprehensive set of HTML and CSS markup tools (including support for HTML5). If you want to see a live preview of the code, you can use the integrated WebKit Inspector which is also standard. BBEdit is also good for debugging. You can detect spelling mistakes directly in the code editor with the macOS correction function while you are debugging the code for your HTML pages with the HTML syntax checker.
|Ongoing software updates||Quite slow when editing and saving large files|
|Built-in FTP client|
DroidEdit: the code editor for Android
There is a whole range of code editors for the mobile operating system Android, but one in particular stands out: DroidEdit which was developed by André Restivo. This editor, which is designed for coding on smartphones, tablets and other similar devices, offers customisable syntax highlighting for nearly 200 different programming and markup languages. DroidEdit also includes the “find and replace” function, which is commonly found in desktop applications. Using the Emmet extension, you can easily convert simple expressions into full HTML code and use an additional virtual keyboard to enter specific symbols and special characters.
DroidEdit can be downloaded from the Google Play Store. There are two different versions of the code editor for Android: DroidEdit Free can be used completely free of charge, but it contains advertisements. DroidEdit Pro is a paid product (just over two dollars/£1.50), but it features support for the Git version control system among other things. Upon purchasing the app, you will also have access to (S)FTP support as well as access to interfaces for the online storage services Dropbox, Google Drive and Box.
|Outstanding language support||Problems with larger files|
|Virtual keyboard with special characters and symbols||No autocomplete|
Overview of the featured code editors in a table
|Araneae||2006||Windows||free of charge||hotkeys (quick clips)|
|Atom||2015||Windows, Linux (64 bit), macOS||free of charge||direct connection to GitHub|
|BBEdit||1992||macOS||$50 (around £38)||HTML syntax checker, built-in FTP client|
|Coda||2007||macOS, iOS||$99 (around £75) (iOS app: $24.99/around £20)||integrated terminal|
|DroidEdit||2014||Android||approx. 2 dollars (£1.50)||virtual keyboard with special characters/symbols|
|GNU Emacs||1984||Windows, Linux, macOS||free of charge||first program in the GNU software project|
|Notepad++||2003||Windows||free of charge||integrated macro editor is standard|