Adobe  I/O Brackets

Adobe Open Source Spotlight: Brackets

When it comes to selecting a code editor, developers are faced with hundreds of options. As more and more people develop mobile and web applications and launch tech startups, myriads of other people are eager to build a platform to contain all of that code. Of all the code editor options on the market today, dozens are also open-source, enabling developers to hack the software itself. So how can one individual code editor set itself apart from the crowd?

This was one of the questions that the Brackets team at Adobe faced when deciding to build a modern, open source text editor. Adam Lehman, director of Adobe I/O and one of Brackets’ original founders, defines Brackets as "a lightweight, open source web editor focused on web design and development." This second element is key. Brackets distinguishes itself from the crowd not only by being open-source but also by focusing specifically on the needs of front-end web developers and not being afraid to innovate.

Brackets interface interface

Made with ♥ and JavaScript: How to build a developer-friendly code editor

Brackets was founded in 2011 by the team that had formerly worked on the Adobe Flash Player. Brackets has been open-source from its very first days, making it the first 100% open-source project started at Adobe.

One key decision made by the Brackets team in the early development days was to build Brackets itself in JavaScript. This was accomplished by first building a “Brackets Shell”, or a lightweight C++ layer that was contributed to by Brackets engineers. Once the shell was built, any web developer using Brackets could start building on the Brackets core code without knowing any C++.

Although the team would have saved time if they had written Brackets in a native language, building Brackets on HTML and JavaScript was essential to breaking the barrier of comfortability and expertise between Brackets developers and Brackets contributors. Getting front-end developers to contribute to an open-source project can be a huge hurdle especially when the actual platform is often built using native languages. As Adam Lehman explains, "Let’s say you’re a web developer who wanted to contribute to Brackets. If Brackets was written in C, you would have to first find some friends who know C++ or try to learn it yourself."

Building Brackets "with ♥ and JavaScript" has enabled an inviting ecosystem where Brackets users can easily become Brackets contributors. This was a challenge from a technical perspective, but it was worth it from the perspective of giving back to the community and increasing the number of individual contributors.

A "sandbox" for web developers: How to set yourself apart without making enemies

Even though there are many other open-source code editors on the market, Adam stresses that Brackets doesn’t have any competitors. Since Brackets is free and open to the public, other code editors are not competition. In fact, one key metric that the Brackets team uses to measure its success is keeping track of how many features that were first invented within Brackets have now been adopted by other code editors.

While other code editors focus on many languages, Brackets specifically focuses on support for HTML, CSS, and JavaScript, which enables it to cater to the specific needs and desires of front end developers. In building Brackets, the team aspired to break the mold and innovate with features that were focused on making web developers’ lives easier. In Adam’s words, "The text editing community had given up on innovating, but Brackets started pushing the boundaries."

Here are just a few of the features that distinguish Brackets from the crowd. Although some of these features are now common in other code editors, all of them were first invented by the Brackets team!

  • Inline editing: While other code editors put HTML, CSS, and JavaScript in different tabs, Brackets puts the three side-by-side. This creates a visual map between the three languages and allows for a more intuitive UI.
  • Visual tools inside the code editor: For example, when a developer picks a color on a visual UI, the CSS code updates live.
  • Live previews of code: With Brackets, developers don’t need to save and refresh to view the changes that they have made. A live connection between the browser and the code editor allows you to view your changes in real-time.
Quick Docs

Quick docs is another cool feature of Brackets. If you forget what a tag means, you can find its definition and accessories, all within the Brackets interface.

The other 99%: How to get your contributors to contribute

Currently, Brackets has 297 contributors. A number this big is practically unheard of for a desktop application, and contributors are essential to Brackets’ success and mission. So how did Brackets attract so many contributors?

Beyond making it easy for new contributors to dive in right away by writing all the core code in JavaScript, Brackets has several other 'secrets' for getting new people excited about contributing. For example, the Brackets site lists many "starter issues" that new contributors can tackle first. These bugs are minor, only take an hour or two to fix, and allow new contributors to immediately impact the code.

The Brackets team knows that developers are more likely to contribute again if they promptly see their contribution in the actual product, so they strive to approve pull requests and give contributors visibility as quickly as possible. As Adam stresses, “Open-sourcing the code is 1% of the effort. 99% of the effort is actually managing that project and making yourself available to every single person who is using the product or contributing to the product.”

Brackets Contributors

A sampling of 100 Brackets contributors

Why it matters: Why go open-source in the first place?

Maintaining an open source project can be a lot of work. You have to constantly be in communication with your contributors, be on-call for questions, and be open to feedback and suggestions. From a business and engineering perspective, an open-source community increases velocity. Teams working on a project like Brackets often have many big ideas that are difficult and time-consuming to execute, especially in the early stages of the project. If you leverage an excited open-source community, you can get things done faster.

In addition to quickly catching and fixing bugs, Brackets contributors have built the majority of Brackets extensions, which include everything from supporting native languages in Brackets to awesome themes for the code editor’s UI. Contributors have also helped translate Brackets into 33 languages, from Bulgarian to Farsi to Turkish, enabling Brackets’ reach to spread around the world.

However, according to Adam, "The real value of open-sourcing a project, the one you can’t put a price on, is innovation. We have some smart and talented guys at Adobe, but if we are the only ones innovating, that’s only going to take us so far. But if we can could build a sandbox that anyone can come and innovate and build prototypes in, that’s where things get crazy. That’s where we really start to see the value."

Would you like to play in the Brackets sandbox? Check out the Brackets Github page and begin making your own contributions!