Brackets: The Open Source Code Editor for the Web

Posted on  by 
Brackets is a new open source project founded by Adobe to push tooling on the web forward. Based on the principle that the best developers to build tools for web developers are in fact web developers, Brackets is built in JavaScript, HTML and CSS. MIT-licensed and hosted on github, Brackets is a project that challenges the status quo in not just how it’s built, but also with its innovative ideas.

There are a lot of text editors out there, but not too many care exclusively about web developers. Brackets plays favorites and is optimized for the modern web. It’s for designers who are as comfortable writing HTML and CSS as they are in Illustrator and Photoshop. It’s also for JavaScript developers building complex apps targeting not only the browser, but everywhere the open web runs.
Because it’s built in JavaScript, HTML and CSS, if you use Brackets, you have the skills necessary to customize, extend and contribute to it. Easy to fork and with a flexible and open license, it truly is your editor. In fact, when you first open Brackets you’ll be looking right at the Brackets source code. On the team, we use Brackets to develop Brackets in this weird inception-style-yin-and-yang type of thing.
Another incredible benefit to developing with open web standards is Brackets has the potential to run nearly everywhere. While we’re focused on the desktop first, we hope to supplement that version with a version of Brackets that can run exclusively in your browser. We also have a few ideas about how Brackets might be able to turn your tablet into your development environment. Brackets could also be embedded in your existing web applications. With a little help, all these versions could be developed in parallel. The possibilities are wide open.
In addition to how it’s being built, Brackets has a few ideas that make it special:
The Brackets team isn’t down with floating panels, cluttered toolbars and other distractions. We want to keep it simple yet productive. We strongly believe it should just be you and your code and one of the way Brackets maintains its minimal design is through a new idea called Quick Edit.
Every web project consists of several interrelated HTML, CSS and JavaScript files that are normally spread across the top of your editor in the form of tabs. In your common editors, it’s your job to keep a mind map of how all these files interrelate. If you want to apply or tweak a style on an HTML element, you have to located the right stylesheet; scroll around or quick search for the class; edit; save; then return back to your original file. In Brackets you simply open a Quick Edit by hitting Cmd/Ctrl + E. Brackets rips open your current document and displays only the CSS classes that apply to that element inline. It’s something you have to see to believe.
Brackets inline Quick Edit.
Brackets Quick Edit enables inline CSS and JavaScript editing.
We can also apply the same ideas to JavaScript development. Smash the Quick Edit key on a function call and Brackets opens an inline editor with the JavaScript function body ready for edit. Instead of managing documents, developers can dive in and out of their code with ease. All this is included in the current build (Sprint 10).
Of course, we aren’t just limited to using Quick Edit for coding functions. In the future, Quick Edit can also be used to display visual tools inline like a color picker, gradient designer or even just related documentation. Because Quick Edit isn’t a floating panel, it never obscures your code which makes it moar awesome. Want to try your hand at building an inline tool? There are already plenty of open source extensions to learn from.
Another core philosophy behind Brackets is that code should live in your editor but run in the browser.
Today we’ve all gotten used to doing the save-reload-copy-paste dance. In a generic text editor, you’re likely saving your code, switching to your favorite browser and hitting refresh. While your code is running you likely leverage in-browser tools to debug the application or tweak the design. You make several changes to get everything the way you want and then you have the epic chore of copying and pasting all those changes back to your editor. We call shenanigans.
Brackets opens a live connection to your local browser and brings some of those in-browser tools back into the editor where it makes sense. When Live File Preview is enabled your browser shows real-time changes to CSS classes and properties as you type. Because the code lives in your editor but runs in your browser there is no need to save-reload-copy-paste. w00t!
The current build of Brackets only supports Google Chrome for Live File Preview, but we hope to make this same connection to other browsers simultaneously with a little help from the browser makers. We prototyped support for the live editing of HTML and JavaScript and plan to include this ability in a future build. Just check out the public backlog to see what we’re working on next.
We need your help. There is a lot of work to do before Brackets is ready to be your favorite code editor. We want Brackets to be a truly open project, so we decided to develop Brackets in the open as soon as possible. So on May 1 we opened up our github repositories and started taking pull requests from the general community. We also posted our entire backlog of ideas and future features on Trello.
If you look through our issues in github, you might notice a tag labeled “starter bug“. These are smaller issues that the team thinks will make a good introduction to working with and contributing to the Brackets codebase. If you are feeling a bit bolder and want to take on a larger task, you will find a “starter feature” label in our backlog. These are smaller features that are great for new Brackets developers who are still learning the code. We think that everyone can and should contribute to open source projects, so we’re lowering as many barriers as possible.
Not all ideas makes sense to be added to the core codebase and for that reason, we’ve spent the past several sprints refining an extensibility API. Our growing community has already created several open source extensions ranging from inline MDN documentation(Pamela Fox) to JSHint and CSSLint integration (Ray Camden) to snippet support (John Rowny). We on the Brackets team are implementing several features like Quick Edit as extensions to keep the project modular.
As I mentioned above, we really need your help to make Brackets awesome. We hope that ideas like Quick Edit and Live File Preview help plant a seed for new ideas of your own. We invite you to start hacking away, join our developer mailing list and hang out with us on IRC (#brackets on freenode).
There is a lot to cover here with a single blog post, so expect to hear a lot more from us. In the meantime, you can browse the growing project documentation on our wiki, follow us on Twitter or watch videos from our first hackathon.
If you are at Google IO this Wednesday, be sure to stop by and meet the team. We will be in the Chrome Developer Sandbox.
–
Adam Lehman
Brackets Product Manager