Skip to main content ↓
Screenshot of a code editor with a JavaScript file containing module exports of functions and a sidebar with file icons.

A New Breed of Free Source Code Editors

Many outstanding free source code editors have come out recently, and they’re giving paid apps a run for their money. Beautiful user interfaces, practical features, and the ability to enhance your setup with extensions are just a few things this fresh crop of code editors are offering. In 2008 and 2009, I wrote about some text editors that can be used for web development.

I talked about Notepad++, Vim, Emacs, and 21 other text editors.  Five and a half-ish years later, there is bound to be some good additions and innovations in this realm. And there are.

Characteristics that modern source code editors share are:

  • Minimalism: By default, they’re simple. Like a blank canvas. They’re optimized specifically for writing code, so inessential features that general-purpose text editors might have are left out in order to declutter the interface.
  • Extensibility: The ability to enhance and customize your code editor is important because we each have our own personal preferences and needs.
  • Integration with the browser: Designing and testing in the browser is an optimal way of building sites and web apps. Modern code editors interoperate seemlessly with your browser to provide you with an ideal web development experience.
  • Cross-platform compatibility: Back then, you would stumble across an awesome-looking code editor and then be disappointed to find out it only worked on Windows. Now, everything works on all operating systems with little to no fussing about.
  • Open source: Not only are these new code editors free, but you can also see, and even contribute to, their source code. The days of freeware are long gone.

What follows is a discussion of five free source code editors that exhibit the traits outlined above.

Atom

Atom Atom sports a distraction-free interface and a pragmatic feature set that includes integration with your browser’s developer tool, a fast batch search-and-replace that traverses all the files in your project, theming, and more. Atom is developed by GitHub, and I can’t think of any other company that’s had as much experience and exposure to code and developers as much as they have.

Brackets

Brackets Brackets, an open source project led by Adobe, is not only pretty but also practical. It’s built around the concept of designing in the browser, a commonsense approach to creating sites and web apps. This code editor gives you a live preview of your work: As you’re composing code, it dynamically updates your browser so you can see your changes almost in real time (there’s a tiny bit of a delay while the app processes your changes).

Code hints, its own JavaScript debugging feature called Theseus, on-the-fly syntax error warnings, and a highly extensible core make Brackets a great choice for web designers and front-end developers.

ICEcoder

ICEcoder This code editor works purely in your browser whether you’re plugged in to the Internet or not. But just because ICEcoder is browser-based doesn’t mean you’re being shortchanged: It has a robust feature set that includes real-time JS linting, a find-and-replace builder which essentially gives you a simple UI for regular-expression matching, themes, and much more.

CodeMirror

CodeMirror CodeMirror is an interesting text editor: To install it, all you need to do is reference its JS and CSS files in your HTML documents, and then instantiate it with a line of JavaScript. You don’t need to run any software installer or anything like that. CodeMirror supports 60 programming languages, autocompletion, and endless configurability of even the minutest of options using its Programming API.

Light Table

Light Table This gorgeous code editor has got a lot of unique features going for it. It has, for example, Inline Evaluation, which displays the results of your code within the editor, saving you a bit of time from having to output/query the results in your browser’s developer tool. The development funds of Light Table came through Kickstarter.

The project was backed by over 7,000 people and was able to raise over $300,000 in funding, indicating the interest and excitement around it.

Other Options

Here are a couple of other awesome code editors/IDEs to check out. Sublime Text: This is a well-loved code editor.

But it’s not entirely free: You can download and try it for free, but it will cost you $70 to continue using it, a price plenty of developers are willing to pay because of how useful and awesome it is. Cloud9: Cloud9 is a cloud-based code editor. It requires you to register for an account in order to use it, a prerequisite that isn’t everyone’s cup of tea.

You’ll also have to pay in order to unlock its premium features.

Related Content

Make estimating web design costs easy

Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!

Try Our Free Web Design Cost Calculator
Project Quote Calculator
TO TOP